How To Pass The Dial Values Dynamically In Angular Guage.

[bhari]

Hi i have followed the documentation of fusion charts of angular guage it works great with static dial value.but i want to make it as dynamic.

This is the way iam rendering the chart in a php template i.e

default.php

<script type="text/javascript" src="Angular7.js" ></script>

 

<script type="text/javascript">

            var chart = new FusionCharts("Charts/AngularGauge.swf", "ChartId", "800", "400","0", "1");

            chart.setXMLData(dataString);

            chart.render("chartdiv");

</script>

This is some thing Angular7.js which gave in demos.

 

 

var dataString ='<chart caption ="hai" manageResize="1" origW="400" origH="250"  manageValueOverlapping="1" autoAlignTickValues="1"  bgColor="AEC0CA,FFFFFF" fillAngle="45" upperLimit="850" lowerLimit="350" majorTMNumber="10" majorTMHeight="8" showGaugeBorder="0" gaugeOuterRadius="140" gaugeOriginX="205" gaugeOriginY="206" gaugeInnerRadius="2" tickMarkDecimals="1" pivotRadius="17" showPivotBorder="1" pivotBorderColor="000000" pivotBorderThickness="5" pivotFillMix="FFFFFF,000000" tickValueDistance="10" editMode="1">\n\

<colorRange>\n\

<color minValue="350" maxValue="500" code="399E38"/>\n\

<color minValue="501" maxValue="650" code="E48739"/>\n\

<color minValue="651" maxValue="850" code="B41527"/>\n\

</colorRange>\n\

<dials>\n\

<dial id="CS" value="" borderAlpha="0" bgColor="000000" baseWidth="28" topWidth="1" radius="130" editMode="1" />\n\

</dials>\n\

<annotations>\n\

<!-- Draw the background arcs -->\n\

<annotationGroup x="205" y="207.5">\n\

<annotation type="circle" x="0" y="2.5" radius="150" startAngle="0" endAngle="180" fillPattern="linear" fillAsGradient="1" fillColor="dddddd,666666" fillAlpha="100,100"  fillRatio="50,50" fillAngle="0" showBorder="1" borderColor="444444" borderThickness="2"/>\n\

<annotation type="circle" x="0" y="0" radius="145" startAngle="0" endAngle="180" fillPattern="linear" fillAsGradient="1" fillColor="666666,ffffff" fillAlpha="100,100"  fillRatio="50,50" fillAngle="0" />\n\

</annotationGroup>\n\

</annotations>\n\

</chart>'; 

 

 

now i want to dynamically pass the values to the dial .i have a php variable which is always set to different when user login.I want to set the dial value based on this value.

 

Ex:my php variables range between upper and lower limit of  chart.

 

[Guest Sumedh]

Hi,

 

Welcome to FusionCharts Forum!

 

Apologies for the delayed response.

 

Do you want to implement Gauge? If yes, then you can implement Real-time Angular Gauge.

 

The angular gauge is a real time chart, which can continuously request new data from the server and display the same, without involving any page refreshes.

 

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

 

For more information, please refer the following link:

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

 

Also, find attached illustration for your reference.

 

Hope this helps!

RealTime_AngularGauge.zip