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

 < previousnext > 

 

chart_data note

 

<chart_data>
   ...
   <number note='string'>...</number>
   ...
</chart_data>
                             


Description

In addition to containing the chart values, chart_data can be used to attach notes to data or category points. Notes are the red elements here:

 


Data Note

To attach a note to a data point, add a note attribute to its <number> tag:

   <chart_data>
      <row>
         <null/>
         <string>2008</string>
         <string>2009</string>
      </row>
      <row>
         <string>Region A</string>
         <number note='Hello World!'>75</number>   
         <number>85</number>
      </row>
   </chart_data>   

 


Category Note

To attach a note to a category point, add a note attribute to its <string> tag:

   <chart_data>
      <row>
         <null/>
         <string note='Hello World!'>2008</string>   
         <string>2009</string>
      </row>
      <row>
         <string>Region A</string>
         <number>75</number>   
         <number>85</number>
      </row>
   </chart_data>   

 


Multi-line Note

To create multi-line notes, break the text with \r. Example: note='Show this in\rtwo lines'.

 


Note Position

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:

 

  • note_type: Overrides chart_note's type attribute to customize an individual note.

  • note_x: Overrides chart_note's x attribute to customize an individual note.

  • note_y: Overrides chart_note's y attribute to customize an individual note.

  • note_offset_x: Overrides chart_note's offset_x attribute to customize an individual note.

  • note_offset_y: Overrides chart_note's offset_y attribute to customize an individual note.

  • note_size: Overrides chart_note's size attribute to customize an individual note.

<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>

 


Note Color

The chart_note's color, background_color_1, and background_color_2 attributes can be used to control the general color of all notes. In addition, these attributes can be overridden in chart_data to give each note a different color:

 

  • note_color: Overrides chart_note's color attribute to customize an individual note.

  • note_background_color_1: Overrides chart_note's background_color_1 attribute to customize an individual note.

  • note_background_color_2: Overrides chart_note's background_color_2 attribute to customize an individual note.

<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_color_2='ff4400' 
               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' note_background_color_1='888888' note_background_color_2='ff8800'>40</number>   
	    <number>45</number>
	    <number note='Highest Value' 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_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