XML/SWF Gauge  1.6 | XML/SWF Charts | SlickBoard(New)

 < previous 

 

Gauge Source

 

PHP, ASP, CFML, Perl, etc.

The previous tutorial example uses the document sample.xml as a gauge source. This is a static XML document prepared manually. However, the gauge source can be either a static XML document, or any script generating the XML code dynamically.

For example, the source file can be sample.php, containing PHP code that generates all the XML code like this:


<?php

echo "<gauge>";

for ( $i=0; $i<10; $i++ ){
   echo "<line x1='" . ($i*20). "' y1='25' x2='" . ($i*20). "' y2='125' />";
}

echo "</gauge>";

?>

Or, generating some XML code like this:


<gauge>
	
<?php
for ( $i=0; $i<10; $i++ ){
   echo "<line x1='" . ($i*20). "' y1='25' x2='" . ($i*20). "' y2='125' />";
}
?>

</gauge>

Or, generating one or more variables like this:


<gauge>
	
<line x1='<?php echo rand(50, 100); ?>' y1='25' x2='200' y2='125' />

</gauge>

 


Passing variables to Gauge Source

Pass variables to the gauge's source in the query part of the source's URL like this:

xml_source=sample.php?gauge_id=6&user_id=658 

 

Because the source URL is part of the gauge.swf URL, it's necessary to convert all its special characters to their hex values like this:

xml_source=sample.php%3Fgauge_id%3D6%26user_id%3D658

 

The result is:

<HTML>
<BODY bgcolor="#FFFFFF">

<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
	codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" 
	WIDTH="400" 
	HEIGHT="250" 
	id="gauge" 
	ALIGN="">
<PARAM NAME=movie VALUE="gauge.swf?xml_source=sample.php%3Fgauge_id%3D6%26user_id%3D658">
<PARAM NAME=quality VALUE=high>
<PARAM NAME=bgcolor VALUE=#666666>

<EMBED src="gauge.swf?xml_source=sample.php%3Fgauge_id%3D6%26user_id%3D658" 
	quality=high 
	bgcolor=#666666  
	WIDTH="400" 
	HEIGHT="250" 
	NAME="gauge" 
	ALIGN="" 
	TYPE="application/x-shockwave-flash" 
	PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer">
</EMBED>
</OBJECT>

</BODY>
</HTML>

 

The sample.php source might read the variables and generate the XML code like this:


<?php

//read the query variables
$gauge =  $_REQUEST['gauge_id'];
$user = $_REQUEST['user_id'];

if ( $gauge<10 and $user==658 ){
   $x1 = 50;
}else{
   $x1=100;
}

?>
							
<gauge>
<line x1='<?php echo $x1 ?>' y1='25' x2='200' y2='125' />
</gauge>

 


Debugging

To view and debug the XML source code that the tool is receiving, type the URL of the source file directly in a browser, then use the browser's View Source command to view the XML code.

If the XML code is generated by a script as in the examples above, and the script contains errors, then the browser should display the errors.

 


Caching

If a gauge's source is dynamic (changes over time), some browsers might download only one instance of the source file, cache it, then display the same gauge repeatedly. To prevent browsers from caching a dynamic source file, append a unique value to its URL to keep it new. This value must be added programmatically to change with every page reload. This could be the time in microseconds, or any random number (see Passing variables to Gauge Source above):

<HTML>
<BODY bgcolor="#FFFFFF">

<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
	codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" 
	WIDTH="400" 
	HEIGHT="250" 
	id="gauge" 
	ALIGN="">
<PARAM NAME=movie VALUE="gauge.swf?xml_source=sample.xml%3Ftime%3D0.26440600+1128349620">
<PARAM NAME=quality VALUE=high>
<PARAM NAME=bgcolor VALUE=#666666>

<EMBED src="gauge.swf?xml_source=sample.xml%3Ftime%3D0.26440600+1128349620" 
	quality=high 
	bgcolor=#666666  
	WIDTH="400" 
	HEIGHT="250" 
	NAME="gauge" 
	ALIGN="" 
	TYPE="application/x-shockwave-flash" 
	PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer">
</EMBED>
</OBJECT>

</BODY>
</HTML>

 


Central Gauge Source

You may create a different gauge source for each gauge on your web site, or create one central script to generate the data for multiple or all gauges.

Pass the gauge's id to the source to process the related gauge:


<?php

//read the query variables
$gauge =  $_REQUEST['gauge_id'];

switch ( $gauge ){
   case 1:
   $x1 = 50;
   break;
   
   case 2:
   $x1 = 100;
   break;
   
   case 3:
   $x1 = 150;
   break;
}

?>
							
<gauge>
<line x1='<?php echo $x1 ?>' y1='25' x2='200' y2='125' />
</gauge>

 


Tag Attributes

Each drawing or animation XML tag has optional attributes. When omitted, the default attributes are used instead. This code draws two black lines. Black is the default line color:


<gauge>

   <line x1='100' y1='25' x2='100' y2='125' />
   <line x1='200' y1='25' x2='200' y2='125' color='000000' /> 
	
</gauge>

 


XML Syntax

  • The XML source must have the <gauge> root element
  • XML tags are case sensitive. All tags must be lower case
  • XML elements must be properly nested
  • Attribute values must be enclosed in quotes (either single or double quotes)
  • Comments start with <!-- and end with --> (same as HTML)

 


What Next?

Next, explore the reference section. The reference section lists and describes all the tags used to create gauges.

For gauge examples, explore the gallery section and click on each gauge to see its code.

 

 < previous 


Copyright 2005-2020, maani.us