How to dynamically change the pointer position on the linear guage fusion chart

Question

I have linear guage fusion chart with pointer above the chart, where the pointer value keeps updating dynamically , and i am trying to position the pointer based on the value in xml file,but the problem i am facing is each time pointer gets repositioned , the whole graph gets refreshed , my requirement is to reposition only the pointer, the complete chart should not be refreshed , can any one help, to implement this functionality, i am trying to follow the example shown in following link http://www.fusioncharts.com/widgets/Gallery/Linear3.html

sudipto sudipto · Accepted Answer · 2011-09-20T19:23:51

You can always update the Linear Gauge's pointer's value using JavaScript or real-time data streaming.

Say for instance you have created the chart using the following XML :

<chart lowerLimit='0' upperLimit='100' lowerLimitDisplay='Bad' upperLimitDisplay='Good' palette='1' numberSuffix='%' chartRightMargin='20'>
   <colorRange>
      <color minValue='0' maxValue='75' code='FF654F' label='Bad'/>
      <color minValue='75' maxValue='90' code='F6BD0F' label='Moderate'/>
      <color minValue='90' maxValue='100' code='8BBA00' label='Good'/>
   </colorRange>
   <pointers>
      <pointer value='92' />
   </pointers>
</chart>

and the Chart is rendered using the following JavaScript :

var myChart = new FusionCharts("Charts/HLinearGauge.swf", "myChartId", "450", "120", "0", "1");
myChart.setDataURL("Data/Linear3.xml");
myChart.render("chartdiv");

Now you can update this chart using the following JavaScript code:

getChartFromId("myChartId").setData(1, 20);

There are other API functions like: setDataForId(Id, value) or feedData(updateDataQueryString)

e.g.,

getChartFromId("myChartId").setDataForId("p1", 40) ;// this requires the pointer to be set with an id which needs to be provided here as the first parameter

or

getChartFromId("myChartId").feedData("&value=90") ;

which you can also use to update only the data of an existing gauge.

For more information please read: http://www.fusioncharts.com/widgets/docs/Contents/Linear_JSPAPI.html

Read more on how to use Server side real time data streaming to update the gauge's data from: http://www.fusioncharts.com/widgets/docs/Contents/Linear_RealTime.html

For this you would need to create the dat provider page whose output would be a single line string in query string format like: &value=30

How to dynamically change the pointer position on the linear guage fusion chart

1 Answers