FusionWidgets XT uses FusionCharts jQuery plugin that takes care of all the products of FusionCharts XT Suite including FusionWidgets XT.

FusionCharts jQuery plugin also allows you to configure real-time data of an existing chart. At run-time, you can do the following:

• update real-time chart data
• retrieve chart data
• stop real-time streaming of data
• start real-time streaming of data
• clear the chart data of an existing chart

You can also dynamically update the data value and data label of an existing chart. The streamFusionChartsData() method needs to be used to achieve these.

To aid your understanding of this section, we recommend you to go through the Overview page of FusionCharts jQuery plugin

In the following sections of this page we go through some use-cases to showcase how to use this method.

Using the streamFusionChartsData method you can update the data value or the data label of an existing chart. This method accepts new values for chart as a query string. There are several ways to change the data value or the data label of an existing chart:

A code snippet is shown below:

$("#chartContainer").streamFusionChartsData('&value=66');

In the above code, the HTML elements with id - chartContainer, which contain charts, are selected using the jQuery selector. The streamFusionChartsData method is applied on these elements to find all the FusionCharts objects rendered in the selected elements. A new value is set through value property of the parameter passed to the method. The above code passes the value for one dataset.

You can also opt to update value to multiple datasets. A code snippet is shown below:

$("#chartContainer").streamFusionChartsData('&value=66|44');

In the above code, the value property contains two values '66 and 44' for two datasets. The value 66 corresponds to the first dataset and the value 44 corresponds to the second dataset. The values are separated using a '|' character.

You can also provide multiple values to a dataset. To do so you will have to separate the values using comma(,). A code snippet is show below:

$("#chartContainer").streamFusionChartsData('&value=66,44');

Similarly, you can also update data labels of the existing chart. The code will look as under:

$("#chartContainer").streamFusionChartsData('&label=New Label, &value='66,44');

You can also set multiple labels to the existing chart. To do so you need to separate the labels using comma(,). An example code is shown below:

$("#chartContainer").streamFusionChartsData('&label=Label X, Label Y &value=66,44|22,33', );

You can also pass the parameters sequentially to the method using a command. A code snippet is shown below:

$("#chartContainer").streamFusionChartsData('feed', '40', 'New Label');

In the above code, feed is the command used to update the value and the label of the chart. The value provided is '40' and the label provided is 'New Label'.

Parameters can be passed using an object which contains all the information that is to be passed. A code snippet is shown below:

$("#chartContainer").streamFusionChartsData('feed', {value:'40', label:'New Label'});

Updating data for gauges using setData()

In all the gauges, you can update data using the setData property.

In angular and linear gauges:

To update the data value of a dial/pointer of an angular or linear gauge using setdata command you need to set the index of the dial/pointer first and then mention the value to which you want to update. A code snippet is shown below:

$("#chartContainer").streamFusionChartsData('setdata', '1', '40');

In the above HTML code, setdata is the command used to provide data to the chart. Then the index of the dial/pointer is provided and the value for the corresponding dial/pointer is also provided. Here, the value of the first dial/pointer will be updated. In case you have more than one dial/pointer and you want to update the value of the second dial/pointer you need to provide '2' instead of '1'.

In cylinder, bulb, thermometer and LED gauges:

To update the data value of a cylinder, bulb, thermometer and LED gauges using setdata command you need to set the value. A code snippet is shown below:

$("#chartContainer").streamFusionChartsData('setdata', '40');

In the above HTML code, setdata is the command used to provide data to the chart. Then the value of the gauge is provided.

To update the label of a cylinder, bulb, thermometer and LED gauges using setdata command you need to set the label. A code snippet is shown below:

$("#chartContainer").streamFusionChartsData('setdata', 'New Label');

In the above HTML code, setdata is the command used to provide data to the chart. Then the label of the gauge is provided.

Retrieve data from charts and gauges using getData()

You can retrieve data using the getData property.

In angular and linear gauges:

To retrieve data value of a dial/pointer from an angular or linear gauge using getdata command you need to set the index of the dial/pointer whose value you want to retrieve. A code snippet is shown below:

$("#chartContainer").streamFusionChartsData('getdata', '1');

In the above HTML code, getdata is the command used to retrieve data from the chart. Then the index of the dial/pointer is provided. Here, the value of the first dial/pointer will be retrieved. In case you have more than one dial/pointer and you want to retrieve the value of the second dial/pointer you need to provide '2' instead of '1'.

In cylinder, bulb, thermometer and LED gauges:

To retrieve the data value of a cylinder, bulb, thermometer and LED gauges you need to use the getData command. A code snippet is shown below:

$("#chartContainer").streamFusionChartsData('getdata');

In the above HTML code, getdata is the command used to retrieve data from the chart. No other parameters are required.

Stop updating data

To stop updating real-time data streaming you need to use the stop command. A code snippet is given below:

$("#chartContainer").streamFusionChartsData('stop');

Start updating data

To start/restart updating real-time data streaming you need to use the start command. A code snippet is given below:

$("#chartContainer").streamFusionChartsData('start');

In the above code, the start command is used to start/restart the real-time data streaming.

Clear chart data

To clear the existing data of the chart you need to use the clear command. A code snippet is given below:

$("#chartContainer").streamFusionChartsData('clear');

In the above code, the clear command is used to clear the real-time data of the chart.

Note: This command is applicable only for Real-time Area, Real-time Column, Real-time Line, Real-time Stacked Area, Real-time Stacked Column and Real-time Line (Dual Y) charts.