Simple Angulare Gauge

[ror]

Hi All ,

 

I am trying to implement a real time Angular gauge and have the following:

 

- the realtime value was stored into mysql database.

 

so that only i need to connect my ' sql statement ' to XML file ....or is there any method to embbedd the XML code inside PHP code .

 

Sorry but am new in this field ....

[Guest Sumedh]

Hi All ,

 

I am trying to implement a real time Angular gauge and have the following:

 

- the realtime value was stored into mysql database.

 

so that only i need to connect my ' sql statement ' to XML file ....or is there any method to embbedd the XML code inside PHP code .

 

Sorry but am new in this field ....

 

Hi,

 

For implementing Real-time Angular Gauge,

 

Angular Gauge accepts data in XML/JSON format.

 

 

You would nee to specify the URL of the data provider and the time interval (in seconds), after which the gauge will look for new data.

 

The data provider page needs to be a page at your server-side, which when invoked by angular gauge, will output the new data.

 

 

The real-time data format for angular gauge depends on:

 

> Whether you've multiple dials on the chart or a single dial?

> If you've multiple pointers, whether you want to provide data by pointer numerical index or by their defined IDs?

> Whether you're using Message Logger for the chart?

> Commands for the chart - like stop update.

 

You would need to configure following attributes in the XML.

>dataStreamURL - This parameter sets the path of the page which is supposed to relay real-time data to the chart. If you've special characters as a part of your data stream URL, like ? or &, you'll need to URL Encode the entire dataStreamURL.

 

> refreshInterval - For this parameter, you can specify the number of seconds after which the chart will look for new data. This process will happen continuously - i.e., if you specify 5 seconds here, the chart will look for new data every 5 seconds.

 

Ref. Code:

<chart ... dataStreamURL="URL of the data provider page" refreshInterval="3 ">

 

For live demo, refer this link: http://www.fusioncharts.com/demos/gallery/#gauges

 

For more information, refer the following URL's:

http://docs.fusioncharts.com/widgets/Contents/?Angular/RealTime.html

 

http://docs.fusioncharts.com/widgets/Contents/?DataStreaming/Example.html

 

Also, find attached illustration for your reference.

AngularGauge.zip

[ror]

Thanks Sumedh for your quick response

 

 

i just have a small problem i try to get my dynmaic value from my data base using the below code :

 

gauge.php

 

<?php 
$db=&JFactory::getDBO();
$sql = "SELECT Connects FROM aramexjobdata order by RecordID DESC limit 1"; 

$row = mysql_fetch_row(mysql_query($sql));

print "value=".$row[0];

?>

 

The Output of the code was :

 value=20

which it is the value i need it

 

now i need the dial to rotate according to this value :

 

i try to add : dataStreamURL (gauge.php) to the chart tag in my XML file as below :

 

 

<chart lowerLimit="0" upperLimit="100" lowerLimitDisplay="Bad" 

upperLimitDisplay="Good" numberSuffix="" showValue="1" 

showGaugeBorder='0' gaugeStartAngle="180"  

dataStreamURL="Charts/gauge.php" refreshInterval="3" > 
<colorRange>  
 <color minValue="0" maxValue="75" code="FF654F"/>    
<color minValue="75" maxValue="90" code="F6BD0F"/>    <color 

minValue="90" maxValue="100" code="8BBA00"/>  </colorRange> 
<dials>  
 <dial id="CPU1" value="10" rearExtension="10" toolText="CPU 1 

Usage"/>  
</dials></chart>

 

nothing happend the dial still rotate with its default value

 

Please Help me and thanks in advance

Edited June 12, 2012 by ror

[Swarnam]

Hey,

 

To update the value of a gauge, you need to output the data in following format:

 

&value=20So, when FusionWidgets will read this value, it will update the chart by setting its value to 20 (if the data is within range).

 

Hope this helps.