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

 < previousnext > 

 

chart_data

 

<chart_data>
  [data]
</chart_data>


Description

chart_data sets the chart's data.

To create a chart, start by organizing the data in a table like this:

  2006 2007 2008 2009
Region A 5 10 30 63
Region B 100 20 65 55
Region C 56 21 5 90

 

Then, translate the table into XML elements like this:


<chart_data>
  <row>
	 <null/>
	 <string>2006</string>
	 <string>2007</string>
	 <string>2008</string>
	 <string>2009</string>
  </row>
  <row>
	 <string>Region A</string>
	 <number>5</number>
	 <number>10</number>
	 <number>30</number>
	 <number>63</number>
  </row>
  <row>
	 <string>Region B</string>
	 <number>100</number>
	 <number>20</number>
	 <number>65</number>
	 <number>55</number>
  </row>
  <row>
	 <string>Region C</string>
	 <number>56</number>
	 <number>21</number>
	 <number>5</number>
	 <number>90</number>
  </row>
</chart_data>

Notice that:

  • The XML elements mimic the table exactly
  • Even though the top left cell is empty, it's included in the XML code as a null for consistency
  • All the row and column titles are strings. All the table values are numbers

 

This website refers to each row of data by series, and each column of data by category.

 


Pie Data

In the case of pie charts, only one row of values is required, and all values must be positive:

  2006 2007 2008 2009
Region A 5 10 30 63


<chart_data>
  <row>
	 <null/>
	 <string>2006</string>
	 <string>2007</string>
	 <string>2008</string>
	 <string>2009</string>
  </row>
  <row>
	 <string>Region A</string>
	 <number>5</number>
	 <number>10</number>
	 <number>30</number>
	 <number>63</number>
  </row>
</chart_data>

 


Floating Data

In floating column and floating bar charts, the columns and bars aren't anchored to the zero line. They can start from any value. Each column or bar have two values. The low value determines where the column or bar starts. The high value determines where the column or bar ends.

Floating charts require two rows of values that must be organized in this order: high, low.

  2007 2008 2009
high 10 15 16
low 1 5 3


<chart_data>
  <row>
	 <null/>
	 <string>2007</string>
	 <string>2008</string>
	 <string>2009</string>
  </row>
  <row>
	 <string>high</string>
	 <number>10</number>
	 <number>15</number>
	 <number>16</number>
  </row>
  <row>
	 <string>low</string>
	 <number>1</number>
	 <number>5</number>
	 <number>3</number>
  </row>
</chart_data>

 


Candlestick Data

In candlestick charts, each candle represents a period of time during which a price fluctuates. The price the period starts with is the open price. The price the period ends with is the close price. The highest and lowest price during this period are the max and min. See chart_pref for more details.

Candlestick charts require four rows of values that must be organized in this order: max, min, open, close.

  mon tue wed thu fri
max 4 5 6 8 10
min 1 1 3 .5 2
open 3 4.5 5 6 5
close 3.5 2 4 7 8


<chart_data>
  <row>
	 <null/>
	 <string>mon</string>
	 <string>tue</string>
	 <string>wed</string>
	 <string>thu</string>
	 <string>fri</string>
  </row>
  <row>
	 <string>max</string>
	 <number>4</number>
	 <number>5</number>
	 <number>6</number>
	 <number>8</number>
	 <number>10</number>
  </row>
  <row>
	 <string>min</string>
	 <number>1</number>
	 <number>1</number>
	 <number>3</number>
	 <number>.5</number>
	 <number>2</number>
  </row>
  <row>
	 <string>open</string>
	 <number>3</number>
	 <number>4.5</number>
	 <number>5</number>
	 <number>6</number>
	 <number>5</number>
  </row>
  <row>
	 <string>close</string>
	 <number>3.5</number>
	 <number>2</number>
	 <number>4</number>
	 <number>7</number>
	 <number>8</number>
  </row>
</chart_data>

 


Scatter Data

In scatter charts, the category axis is calculated just like the value axis. Scatter charts require a pair of x and y values for each data point. The x represents the horizontal position of the point, and the y represents the vertical position. The x and y values must be organized in column pairs like this:

  x y x y x yx yx y
region a .5 5 2 8 3 71.56.52.52.5
region b 1 1 3 5 273.710.53.52.5


<chart_data>
  <row>
	 <null/>
	 <string>x</string>
	 <string>y</string>
	 <string>x</string>
	 <string>y</string>
	 <string>x</string>
	 <string>y</string>
	 <string>x</string>
	 <string>y</string>
	 <string>x</string>
	 <string>y</string>
  </row>
  <row>
	 <string>region a</string>
	 <number>.5</number>
	 <number>5</number>
	 <number>2</number>
	 <number>8</number>
	 <number>3</number>
	 <number>7</number>
	 <number>1.5</number>
	 <number>6.5</number>
	 <number>2.5</number>
	 <number>2.5</number>
  </row>
  <row>
	 <string>region b</string>
	 <number>1</number>
	 <number>1</number>
	 <number>3</number>
	 <number>5</number>
	 <number>2</number>
	 <number>7</number>
	 <number>3.7</number>
	 <number>10.5</number>
	 <number>3.5</number>
	 <number>2.5</number>
  </row>
</chart_data>

 


Bubble Data

In bubble charts, the category axis is calculated just like the value axis. Bubble charts require x, y, and z values for each bubble. The x represents the horizontal position of the bubble, y represents the vertical position, and z represents the diameter of the bubble in pixels (which may be scaled up or down in the XML source code). The x, y, and z values must be organized like this:

  x y z x y z x y z
region a 55 65 100 68 63 50636625
region b 59 66 50 65 6240637020


<chart_data>
  <row>
	 <null/>
	 <string>x</string>
	 <string>y</string>
	 <string>z</string>
	 <string>x</string>
	 <string>y</string>
	 <string>z</string>
	 <string>x</string>
	 <string>y</string>
	 <string>z</string>
  </row>
  <row>
	 <string>region a</string>
	 <number>55</number>
	 <number>65</number>
	 <number>100</number>
	 <number>68</number>
	 <number>63</number>
	 <number>50</number>
	 <number>63</number>
	 <number>66</number>
	 <number>25</number>
  </row>
  <row>
	 <string>region b</string>
	 <number>59</number>
	 <number>66</number>
	 <number>50</number>
	 <number>65</number>
	 <number>62</number>
	 <number>40</number>
	 <number>63</number>
	 <number>70</number>
	 <number>20</number>
  </row>
</chart_data>

 


Missing Data

Missing chart values are represented by null. Null values aren't displayed in the chart. Example:


<chart>

   <chart_type>line</chart_type>

   <chart_data>
      <row>
         <null/>
         <string>2006</string>
         <string>2007</string>
         <string>2008</string>
         <string>2009</string>
      </row>
      <row>
         <string>Region A</string>
         <number>5</number>
         <number>10</number>
         <number>30</number>
         <null/>
      </row>
   </chart_data>

</chart>

 


Multi-line Labels

To create multi-line category and legend labels, break the corresponding strings with \r. Example:


<chart>

   <chart_data>
      <row>
         <null/>
         <string>Year\r2006</string>
         <string>2007</string>
         <string>2008</string>
         <string>2009</string>
      </row>
      <row>
         <string>First\rRegion</string>
         <number>5</number>
         <number>10</number>
         <number>30</number>
         <number>63</number>
      </row>
      <row>
         <string>Region B</string>
         <number>100</number>
         <number>20</number>
         <number>65</number>
         <number>55</number>
      </row>
   </chart_data>

</chart>

 


See the tutorial section for more information.

 

 

Example


<chart>
   <chart_data>
      <row>
         <null/>
         <string>2006</string>
         <string>2007</string>
         <string>2008</string>
         <string>2009</string>
      </row>
      <row>
         <string>Region A</string>
         <number>5</number>
         <number>10</number>
         <number>30</number>
         <number>63</number>
      </row>
      <row>
         <string>Region B</string>
         <number>100</number>
         <number>20</number>
         <number>65</number>
         <number>55</number>
      </row>
      <row>
         <string>Region C</string>
         <number>56</number>
         <number>21</number>
         <number>5</number>
         <number>90</number>
      </row>
   </chart_data>
</chart>

 



<chart>

   <chart_type>pie</chart_type>

   <chart_data>
      <row>
         <null/>
         <string>2007</string>
         <string>2008</string>
         <string>2009</string>
      </row>
      <row>
         <string>Region A</string>
         <number>10</number>
         <number>30</number>
         <number>63</number>
      </row>
   </chart_data>
</chart>

 



<chart>

   <chart_type>floating column</chart_type>

  <chart_data>
     <row>
	    <null/>
	    <string>2007</string>
	    <string>2008</string>
	    <string>2009</string>
     </row>
     <row>
	    <string>high</string>
	    <number>10</number>
	    <number>15</number>
	    <number>16</number>
     </row>
     <row>
	    <string>low</string>
	    <number>1</number>
	    <number>5</number>
	    <number>3</number>
     </row>
   </chart_data>
</chart>

 



<chart>

   <chart_type>candlestick</chart_type>

   <chart_data>
      <row>
         <null/>
         <string>mon</string>
         <string>tue</string>
         <string>wed</string>
         <string>thu</string>
         <string>fri</string>
      </row>
      <row>
         <string>max</string>
         <number>4</number>
         <number>5</number>
         <number>6</number>
         <number>8</number>
         <number>10</number>
      </row>
      <row>
         <string>min</string>
         <number>1</number>
         <number>1</number>
         <number>3</number>
         <number>.5</number>
         <number>2</number>
      </row>
      <row>
         <string>open</string>
         <number>3</number>
         <number>4.5</number>
         <number>5</number>
         <number>6</number>
         <number>5</number>
      </row>
      <row>
         <string>close</string>
         <number>3.5</number>
         <number>2</number>
         <number>4</number>
         <number>7</number>
         <number>8</number>
      </row>
   </chart_data>
</chart>

 



<chart>

   <chart_type>scatter</chart_type>
   
   <chart_data>
      <row>
         <null/>
         <string>x</string>
         <string>y</string>
         <string>x</string>
         <string>y</string>
         <string>x</string>
         <string>y</string>
         <string>x</string>
         <string>y</string>
         <string>x</string>
         <string>y</string>
      </row>
      <row>
         <string>region a</string>
         <number>.5</number>
         <number>5</number>
         <number>2</number>
         <number>8</number>
         <number>3</number>
         <number>7</number>
         <number>1.5</number>
         <number>6.5</number>
         <number>2.5</number>
         <number>2.5</number>
      </row>
      <row>
         <string>region b</string>
         <number>1</number>
         <number>1</number>
         <number>3</number>
         <number>5</number>
         <number>2</number>
         <number>7</number>
         <number>3.7</number>
         <number>10.5</number>
         <number>3.5</number>
         <number>2.5</number>
      </row>
   </chart_data>
   
</chart>

 

 < previousnext > 


Copyright © 2003-2017, maani.us