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

 < previousnext > 

 

axis_value_label

 

<axis_value_label>
     <string>...</string>
   [ <string>...</string> ]
</axis_value_label>


Description

axis_value_label is an array that overrides the default axis_value labels to display custom text instead. This can also be used to reverse the axis_value (see example below). The axis_value labels are the red labels here:

 

The first value in axis_value_label overrides the first axis label, the second value in axis_value_label overrides the second axis label, and so on.

  • To override a value label, place the new text in the corresponding position.
  • To keep the original value label, place a null in the corresponding position.
  • To hide a value label, place an empty string in the corresponding position.
  • To add a multi-line label, break the lines with \r. Example: "Show this in\rtwo lines".
  • If the axis_value_label holds less values than the number of the axis labels, then the unrepresented labels remain unchanged.

 


Two Value-Axes

In some cases, it might be necessary to display two value-axes to represent data using two different scales. For example, one chart might show both temperature and wind-speed data. Each requiring a different value-axis with a different scale. In this case, the second value-axis can be added programmatically using the draw function. See the third example below.

 

 

Example


<chart>

   <!-- override the first label -->
   <!-- keep the default second label by using a null -->
   <!-- override the third label with a multi-line text -->   
   <!-- hide the fourth label with an empty string-->
   <!-- keep the default fifth label by not representing it -->
   <axis_value_label>
      <string>label 1</string>
      <null/>
      <string>third\rlabel</string>
      <string></string>
   </axis_value_label>

</chart>
            

 


This example flips the chart vertically to make it grow from top to bottom.


<chart>

   <!-- reverse the data by multiplying all the values by -1 -->
   <chart_data>
      <row>
         <null/>
         <string>2007</string>
         <string>2008</string>
         <string>2009</string>
      </row>
      <row>
         <string>Region A</string>
         <number>-20</number>
         <number>-75</number>
         <number>-85</number>
      </row>
      <row>
         <string>Region B</string>
         <number>-40</number>
         <number>-25</number>
         <number>-105</number>
      </row>
   </chart_data>

   <!-- adjust the axis_value range -->
   <axis_value min='-120' max='0' steps='4' mode='trim' />

   <!-- adjust the chart's background color -->
   <chart_rect negative_color='FFFFFF' negative_alpha='75' />

   <!-- override the value-axis labels to make them positive numbers -->
   <axis_value_label>
      <string>120</string>
      <string>90</string>
      <string>60</string>
      <string>30</string>
      <string>0</string>
   </axis_value_label>

</chart>
            

 


In the following example, the chart's data includes temperature and wind-speed values, requiring two different value-axes with different scales:

  10am 11am 12am 1pm
Temperature 50 55 53 48
Wind Speed 15 20 25 40

 

The task is to display the temperature on a scale from 40 to 60 degrees fahrenheit (represented by the left value-axis), and display the wind speed on a scale from 10 to 50 miles/hour (represented by the right value-axis.) Because a chart can only have one scale, the two scales must first be converted to one. In this case, the function As_Percentage() converts the 40 to 60 temperature scale to a percentage from 0 to 100, and converts the 10 to 50 wind-speed scale to a percentage also from 0 to 100.


<?php
//---------------------------------------------------
//this function converts the chart's data so that both series have the same scale from 0 to 100
//this is a PHP function, but any scripting language can be used to generate the same results
function As_Percentage ( $value, $min, $max ){
   return ($value-$min)*100/($max-$min);
}
//---------------------------------------------------
?>

<chart>

   <!-- set chart_rect, chart_type, and series_color in preparation for the next steps -->
   <chart_rect x='75' y='50' width='250' height='160' />
   <chart_type>
      <string>column</string>
      <string>line</string>
   </chart_type>
   <series_color>
      <color>ff8800</color>
      <color>88ff00</color>
   </series_color>
   
   <!-- convert the chart's data so that both series have the same scale from 0 to 100 -->
   <chart_data>
      <row>
         <null/>
         <string>10am</string>
         <string>11am</string>
         <string>12am</string>
         <string>1pm</string>
      </row>
      <row>
         <string>Temperature</string>
         <number><?php echo As_Percentage(50,40,60); ?></number>
         <number><?php echo As_Percentage(55,40,60); ?></number>
         <number><?php echo As_Percentage(53,40,60); ?></number>
         <number><?php echo As_Percentage(48,40,60); ?></number>
      </row>
      <row>
         <string>Wind Speed</string>
         <number><?php echo As_Percentage(15,10,50); ?></number>
         <number><?php echo As_Percentage(20,10,50); ?></number>
         <number><?php echo As_Percentage(25,10,50); ?></number>
         <number><?php echo As_Percentage(40,10,50); ?></number>
      </row>
   </chart_data>
   
   <!-- set the value-axis to a scale from 0 to 100. Make it red to match the temperature series color -->
   <axis_value min='0' max='100' color='ff8800' />
   
   <!-- override the text in the value-axis so that it displays values from 40 to 60 instead of 0 to 100 -->
   <axis_value_label>
      <string>40F</string>
      <string>45F</string>
      <string>50F</string>
      <string>55F</string>
      <string>60F</string>
   </axis_value_label>
   
   <!-- draw the right value-axis to display values from 10 to 50 -->
   <!-- make it green to match the wind-speed series color -->
   <!-- use a PHP loop to process all the labels  -->
   <draw>
   <?php
      for($i=0;$i<5;$i++){
         echo "<text x='327' y='".(203-$i*40)."' color='88ff00'>".(10+$i*10)."m/h</text>";
      }
   ?>
   </draw>
   
</chart>

 

 < previousnext > 


Copyright © 2003-2017, maani.us