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

 < previousnext > 

 

update

 

<update url='string' 
        delay='int'
        timeout='int'
        retry='int'
      
        mode='string' 
        span='string' 
        /> 


Description

update updates the chart without reloading the web page. This makes it possible to display charts with live data, change the chart's look over time for emphasis, or create a slideshow from different charts.

 

  • url: Relative or absolute URL of an XML source to get the update from.

  • delay: The delay in seconds before requesting the update. The actual interval between updates is this delay, plus the time it takes to request and receive the next update. Depending on the connection speed, the actual interval might be several seconds longer than this delay. The default is zero.

  • timeout: The number of seconds to wait before loading the update times out. The default is 30 seconds.

  • retry: The number of times to try loading the update before displaying an error message. The default is 2 (try twice).

  • mode: This determines the way the update is applied to the chart. Valid values are:

    • normal: Only the updated chart parts are affected. The rest of the chart remains unchanged. This is the default mode value.

    • reset: The updated chart parts are affected. The rest of the chart gets reset to the default values.

    • data: Only chart_data is used to update and transition the data points. Other chart parts remain unchanged. Unlike other update modes, this mode does not change the data graphs suddenly. It morphs between the old and new graphs. In this case, chart_data must have the same number or rows and columns before and after the update.

    • stream_category: The update adds categories (data columns) to the right of chart_data without affecting anything else.

    • stream_series: The update adds series (data rows) to the bottom of chart_data without affecting anything else.



  • span: If mode is set to either stream_category or stream_series, then span determines the maximum number of data rows or columns chart_data is allowed to grow to. When it grows beyond this limit, then old rows or columns are deleted from the top or the left end of chart_data.

 


Basics

The update URL points to the XML code that updates the chart. The simplest implementation of the update code is:


<chart>
</chart>

 

Because the above code doesn't set any chart variables, it produces no change in the chart. To produce a change, create the necessary XML elements like this:


<chart>

   <chart_type>bar</chart_type>

</chart>

 

To produce a change, plus schedule for the following update, use update again in the update code:


<chart>

   <chart_type>bar</chart_type>
   
   <update url='http://yourServer/yourXMLsopurce' delay='5' /> 

</chart>

 

Use the necessary XML elements to update a chart, in exactly the same way they're used to create a new chart. Update only the chart parts you want to change, and omit the parts you don't want to change.

Some browsers might use cached updates instead of calling the update source repeatedly. This results in seeing only one fresh update. To avoid this, append any unique value to the update URL to keep it new:


<chart>

   <chart_type>bar</chart_type>
   
   <update url='http://yourServer/yourXMLsopurce?uniqueID=0.26440600+1128349620 

</chart>

 


Streaming Category

To stream data and add categories (data columns) to the right of chart_data, add update to the XML code that renders the initial chart like this:

<!-- initial chart code -->
<chart>
   
   <chart_data>
      <row>
         <null/>
         <string>1</string>
         <string>2</string>
         <string>3</string>
      </row>
      <row>
         <string>Region A</string>
         <number>10</number>
         <number>30</number>
         <number>63</number>
      </row>
      <row>
         <string>Region B</string>
         <number>20</number>
         <number>65</number>
         <number>55</number>
      </row>
   </chart_data>
   
   <update url='update_stream_category.php?count=0' delay='3' mode='stream_category' span='10' /> 

</chart>

 

Then create an update script that sends additional categories (one or more columns of data) to the chart. This can be any script that generates XML code. The PHP script for this example looks like this:

<?php
// the update script in update_stream_category.php 

$count = $_REQUEST[ 'count' ]+1;

print "<chart>";

//generate a random column of data
print "   <chart_data>";
print "      <row>";
print "         <string>".$count."</string>";
print "      </row>";
print "      <row>";
print "         <number>".rand (0, 90)."</number>";
print "      </row>";
print "      <row>";
print "         <number>".rand (0, 90)."</number>";
print "      </row>";
print "   </chart_data>";

//schedule for the next update
print "   <update url='update_stream_category.php?count=".$count."' delay='3' mode='stream_category' span='10' /> ";

print "</chart>";

?>

 

The result adds categories to the chart. The span attribute in this example limits the total number of categories to 10:

 


Streaming Series

To stream data and add series (data rows) to the bottom of chart_data, add update to the XML code that renders the initial chart like this:

<!-- initial chart code -->
<chart>
   
   <chart_data>
      <row>
         <null/>
         <string>2008</string>
         <string>2009</string>
      </row>
      <row>
         <string>1</string>
         <number>30</number>
         <number>63</number>
      </row>
   </chart_data>
   
   <update url='update_stream_series.php?count=0' delay='3' mode='stream_series' span='5' /> 

</chart>

 

Then create an update script that sends additional series (one or more rows of data) to the chart. This can be any script that generates XML code. The PHP script for this example looks like this:

<?php
// the update script in update_stream_series.php 

$count = $_REQUEST[ 'count' ]+1;

print "<chart>";

//generate a random row of data
print "   <chart_data>";
print "      <row>";
print "         <string>".$count."</string>";
print "         <number>".rand (0, 90)."</number>";
print "         <number>".rand (0, 90)."</number>";
print "      </row>";
print "   </chart_data>";

//schedule for the next update
print "   <update url='update_stream_series.php?count=".$count."' delay='3' mode='stream_series' span='5' /> ";

print "</chart>";

?>

 

The result adds series to the chart. The span attribute in this example limits the total number of series to 5:

 


User-Triggered Updates

To create updates triggered by mouse clicks and javascript, see link, link_data, and Javascript_to_Flash.

 

 

Example

<chart>

   <axis_value max='100' />
   
   <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>
      <row>
         <string>Region B</string>
         <number>20</number>
         <number>65</number>
         <number>55</number>
      </row>
   </chart_data>
   
   <!-- relative url. Script document: update_1.php -->
   <update url='update_1.php' delay='3' mode='data' /> 

</chart>

 

The script in "update_1.php" is a PHP script generating XML code. This can be any type of XML source. This PHP script looks like this:

<?php

print "<chart>";

//generate random data
print "   <chart_data>";
print "      <row>";
print "         <null/>";
print "         <string>2007</string>";
print "         <string>2008</string>";
print "         <string>2009</string>";
print "      </row>";
print "      <row>";
print "         <string>Region A</string>";
print "         <number>".rand (0, 90)."</number>";
print "         <number>".rand (0, 90)."</number>";
print "         <number>".rand (0, 90)."</number>";
print "      </row>";
print "      <row>";
print "         <string>Region B</string>";
print "         <number>".rand (0, 90)."</number>";
print "         <number>".rand (0, 90)."</number>";
print "         <number>".rand (0, 90)."</number>";
print "      </row>";
print "   </chart_data>";

//schedule for the next update
print "   <update url='update_1.php?time=".time()."' delay='3' mode='data' /> ";

print "</chart>";

?>

 


Here's another example that changes the chart's type:

<chart>
   
   <!-- start with the default chart -->
   
   <!-- relative url. Script document: update_2.php -->
   <update url='update_2.php' delay='3' /> 

</chart>

 

The PHP script in "update_2.php" looks like this:

<?php

print "<chart>";

//the counter to keep track of change
$counter=( isset($_REQUEST[ 'counter' ]))? $_REQUEST[ 'counter' ]+1 : 1;
if ( $counter>3 ){ $counter= 1; }

switch( $counter ){
   case 1:
   print "<chart_type>line</chart_type>";
   break;
   
   case 2:
   print "<chart_type>stacked area</chart_type>";
   break;
   
   default:
   print "<chart_type>column</chart_type>";
   break;
}

//schedule a new update and append the counter to the URL to keep track of change
print "<update url='update_2.php?counter=".$counter."&time=".time()."' delay='3' />";

print "</chart>";

?>

 

 < previousnext > 


Copyright 2003-2014, maani.us