Sign in to follow this  
ror

Simple Angulare Gauge

Recommended Posts

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 ....

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites

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 by ror

Share this post


Link to post
Share on other sites

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.:)

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this