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

 < previousnext > 

 

chart_data effect

 

<chart_data>
   ...
   <number shadow='string' bevel='string' glow='string' blur='string' alpha='int' line_color='string' line_thickness='int' line_alpha='int'>...</number>
   ...
</chart_data>

                            


Description

In addition to containing the chart values, chart_data can be used to apply physical attributes to the graphic elements generated by those values. This is done by adding effect attributes to chart_data's <number> tags. They can be added to all, some, or none of the number tags. The attributes are:

 

  • shadow: The ID of a shadow filter to apply to a chart's element. This is omitted by default (no shadow). The shadow effect works with all charts except for 3d charts.

  • bevel: The ID of a bevel filter to apply to a chart's element. This is omitted by default (no bevel). The bevel effect works with all charts except for 3d charts.

  • glow: The ID of a glow filter to apply to a chart's element. This is omitted by default (no glow). The glow effect works with all charts except for 3d charts.

  • blur: The ID of a blur filter to apply to a chart's element. This is omitted by default (no blur). The blur effect works with all charts except for 3d charts.

  • alpha: The transparency value of a chart's graphic element. Valid values are 0 (fully transparent) to 100 (fully opaque). The default is 100.

  • line_color: The border's color. This is a string holding triple hexadecimal values representing the red, green, and blue components of a color. The default is "000000" (black). The line_color attribute applies to charts with shape graphics that can have borders, like column, area, and pie charts. It does not apply to line and scatter charts managed through chart_pref and series_explode.

  • line_alpha: The border's transparency value. Valid values are 0 (fully transparent) to 100 (fully opaque). Set this to 0 to hide borders. The default is 10 for 3d charts, and omitted for all other charts. The line_alpha attribute applies to charts with shape graphics that can have borders, like column, area, and pie charts. It does not apply to line and scatter charts managed through chart_pref and series_explode.

  • line_thickness: The border's thickness. The default is 1 pixel. The line_thickness attribute applies to charts with shape graphics that can have borders like column, area, and pie charts. It does not apply to line and scatter charts managed through chart_pref and series_explode.

 

 

Example

In this example, effects are applied to the graphic elements generated by the number 100, 60, and 75:

<chart>

   <!-- chart_data -->
   <chart_data>
      <row>
         <null/>
         <string>2007</string>
         <string>2008</string>
         <string>2009</string>
      </row>
      <row>
         <string>Region A</string>
         <number shadow='shadow1' bevel='bevel1'>100</number> <!-- apply shadow and a bevel to graphic 100-->
         <number>30</number>
         <number alpha='25'>60</number> <!-- make graphic 60 transparent-->   
      </row>
      <row>
         <string>Region B</string>
         <number>40</number>
         <number line_color='00ff88' line_thickness='5' line_alpha='100'>75</number> <!-- apply green outline to graphic 75-->   
         <number>30</number>
      </row>
   </chart_data>
   
   
   <!-- define the shadow and bevel filters to use in chart_data -->
   <filter>
      <shadow id='shadow1' distance='5' angle='45' blurX='5' blurY='5' alpha='50' />
      <bevel id='bevel1' angle='45' blurX='5' blurY='5' distance='10' />
   </filter>
   
   <chart_label position='middle' />
   
</chart>

 


Line, Area, Floating, Candlestick, Scatter, and Bubble Charts

When more than one data value generates only one graphic element (like in area charts), then only the effect assigned to the first value gets applied to the graphic element. An area chart example:

  2007 2008 2009
Region A 50 30 60
Region B 40 75 70

<chart>

   <chart_type>area</chart_type>
   <axis_category margin='false' />
	
   <!-- chart_data -->
   <chart_data>
      <row>
         <null/>
         <string>2007</string>
         <string>2008</string>
         <string>2009</string>
      </row>
      <row>
         <string>Region A</string>
         <number shadow='shadow1' bevel='bevel1'>50</number> <!-- apply effects to the graphic generated by a whole data row-->   
         <number>30</number>
         <number>60</number>
      </row>
      <row>
         <string>Region B</string>
         <number>40</number>
         <number>75</number>
         <number>70</number>
      </row>
   </chart_data>
   
   
   <!-- define the shadow and bevel filters to use in chart_data -->
   <filter>
      <shadow id='shadow1' distance='5' angle='45' blurX='5' blurY='5' alpha='50' />
      <bevel id='bevel1' angle='45' blurX='5' blurY='5' distance='10' />
   </filter>
  
   
</chart>

 

A candlestick chart example:

  mon tue wed
max 4 5 6
min 1 1 3
open 3 4.5 5
close 3.5 2 4

<chart>

   <chart_type>candlestick</chart_type>
	
   <!-- chart_data -->
   <chart_data>
      <row>
         <null/>
         <string>mon</string>
         <string>tue</string>
         <string>wed</string>
      </row>
      <row>
         <string>max</string>
         <number>4</number> 
         <number shadow='shadow1' bevel='bevel1'>5</number> <!-- apply effects to the graphic generated by a whole data column-->  
         <number>6</number>
      </row>
      <row>
         <string>min</string>
         <number>1</number>
         <number>1</number>
         <number>3</number>
      </row>
      <row>
         <string>open</string>
         <number>3</number>
         <number>4.5</number>
         <number>5</number>
      </row>
      <row>
         <string>close</string>
         <number>3.5</number>
         <number>2</number>
         <number>4</number>
      </row>
   </chart_data>
   
   
   <!-- define the shadow and bevel filters to use in chart_data -->
   <filter>
      <shadow id='shadow1' distance='5' angle='45' blurX='5' blurY='5' alpha='50' />
      <bevel id='bevel1' angle='45' blurX='5' blurY='5' distance='10' />
   </filter>
      
</chart>

 

 < previousnext > 


Copyright 2003-2014, maani.us