XML/SWF Charts| CSS/XML Timeline Eons(New)| Timeline Eons| SlickBoard

 < previousnext > 

 

chart_note

 

<chart_note type='string'
            x='number' 
            y='number'
            offset_x='number' 
            offset_y='number'
            font='string' 
            bold='boolean' 
            size='number' 
            color='string'
            alpha='number'
            background_color_1='string' 
            background_color_2='string' 
            background_alpha='number' 
            
            shadow='string'
            bevel='string'
            glow='string'
            blur='string'
            />
             


Description

chart_note defines the look of comments that can be attached to data or category points. They can be added with chart_data. They are supported by all chart types except for 3d, image, bubble, and mixed charts. Notes are the red elements here:

 

The note attributes are:

  • type: The general look of notes. Valid values are:

    • flag (default)
    • balloon
    • arrow
    • bullet
    • lance


  • x: The horizontal position of notes relative to the points they are attached to. A zero value centers the notes horizontally relative to their points. A positive value moves them right. A negative value moves them left. The default is 15. See Note Position below.

  • y: The vertical position of notes relative to the points they are attached to. A zero value centers the notes vertically relative to their points. A positive value moves them down. A negative value moves them up. The default is -30. See Note Position below.

  • offset_x: The horizontal distance to move the whole notes (including their origin) to avoid possible overlap with labels. A positive value moves them right. A negative value moves them left. The default is zero. See Note Position below.

  • offset_y: The vertical distance to move the whole notes (including their origin) to avoid possible overlap with labels. A positive value moves them down. A negative value moves them up. The default is zero. See Note Position below.

  • font: The font used in notes. The default is Arial. See Fonts.

  • bold: A boolean that indicates whether the font is bold or not. The default is true.

  • size: The font size. The default is 12.

  • color: The text color. This is a string holding triple hexadecimal values representing the red, green, and blue components of a color. The default is "FFFFFF" (white).

  • alpha: The text transparency value. This affects the transparency only when the embedded font is used (see Fonts). Valid values are 0 (fully transparent) to 100 (fully opaque). The default is 100.

  • background_color_1: The notes' primary background color. This is a string holding triple hexadecimal values representing the red, green, and blue components of a color. The default is "000000" (black). If background_color_2 is omitted, then only background_color_1 is used for the notes' background.

  • background_color_2: The notes' secondary background color, which is used only when type is set to flag or balloon. This is a string holding triple hexadecimal values representing the red, green, and blue components of a color. If both background_color_1 and background_color_2 are defined, then background_color_1 is used as an outline for background_color_2.

  • background_alpha: The background transparency value. Valid values are 0 (fully transparent) to 100 (fully opaque). The default is 50.

  • shadow: The ID of a shadow filter to apply to notes. This is omitted by default (no shadow).

  • bevel: The ID of a bevel filter to apply to notes. This is omitted by default (no bevel).

  • glow: The ID of a glow filter to apply to notes. This is omitted by default (no glow).

  • blur: The ID of a blur filter to apply to notes. This is omitted by default (no blur).

 


Note Position

To make a note appear, add its text to chart_data. See this page for details.

The tool does not make room for notes automatically. It is necessary to make room for them manually based on your chart and layout preferences. Start by using notes sparsely to prevent them from overlapping, and then make additional room by increasing chart_rect's dimensions, adjusting axis_value's max and min attributes, reducing the notes' font size, etc.

The chart_note's type, x, y, offset_x, offset_y and size attributes can be used to control the general shape, size, and position of all notes. In addition, these attributes can be overridden in chart_data to give each note a different shape, size, and position:

<chart>

   <!-- increase the space above the data graphics -->   
   <axis_value max='100' />

   <!-- set the general look of all notes -->
   <chart_note type='flag'
               color='000000' 
               alpha='90'
               background_color_1='8888ff' 
               background_alpha='90'
               />
                
   <!-- add two notes to chart_data -->
   <!-- override the type and position of the second note -->
   <chart_data>
     <row>
	    <null/>
	    <string>2007</string>
	    <string>2008</string>
	    <string>2009</string>
     </row>
     <row>
	    <string>Region A</string>   
	    <number note='Lowest Value'>40</number>
	    <number>45</number>
	    <number note='Highest Value' note_type='arrow' note_x='-20'>63</number>   
     </row>

   </chart_data>

</chart>

 

 

Example

<chart>

   <!-- increase the space above the data graphics --> 
   <axis_value max='150' />
   
   <!-- set the general look of all notes -->
   <chart_note type='lance'
               size='11' 
               color='000000'
               alpha='90'
               x='0'
               y='-15'
               offset_y='-5'
               background_color_1='ff4400' 
               background_color_2='ffff00' 
               background_alpha='75' 
               shadow='low'
               />
   
   <!-- add three notes to chart_data -->
   <chart_data>
      <row>
         <null/>
		 <string>2002</string>
		 <string>2003</string>
		 <string>2004</string>
		 <string>2005</string>
		 <string>2006</string>
		 <string>2007</string>
		 <string note='Market Crash' note_type='flag' note_y='-120'>2008</string>   
		 <string>2009</string>
	  </row>
	  <row>
		 <string>Region A</string>
		 <number>10</number>
		 <number>20</number>
		 <number note='Campaign 1'>30</number>
		 <number>30</number>
		 <number note='Campaign 2'>50</number>
		 <number>65</number>
		 <number>30</number>
		 <number>95</number>
	  </row>
   </chart_data>
   
   <chart_type>line</chart_type>
   <legend layout='hide' />
   <filter>
      <shadow id='low' alpha='50' blurX='8' blurY='8' />
   </filter>

</chart>

 

 < previousnext > 


Copyright © 2003-2017, maani.us