Data-streaming Charts > Clearing Chart View

The data-streaming charts in FusionWidgets v3 allow you to clear the data currently being shown on the chart using 3 different ways:

  1. Sending a &clear=1 command from server.
  2. Setting clearChartInterval so that the chart clears itself every n seconds specified
  3. Using JavaScript API

Let's see each one of them in detail.

Chart clearing can also be used to reduce CPU usage by data-streaming charts, when they've been running live for days/months. Clearing the chart re-instantiates many objects in the chart, thereby clearing a lot of memory.

 
Clearing the chart from server

Let's consider a scenario where you plotting the real-time values of a certain counter 24/7. At the start of next day, you wish to clear the existing data being shown on the chart. This can be easily done by sending the following command as part of your real-time data update:

&clear=1

The above command, when sent to the chart, clears all the data that's currently being shown on the chart. The chart now bears an empty canvas - ready to accept new incremental values from the real-time data provider page.

When sending this command from real-time data provider to the chart, you need to make sure, that it's not sent in each incremental data. Else, you wouldn't see anything plotted on the chart, as the chart will clear itself with each update.

 
Setting clearInterval

The data-streaming charts also allow you to set a pre-defined interval in the XML, at which the chart will automatically clear itself. Shown below is an example:

<chart .... clearChartInterval='21600' ...>

clearChartInterval needs to be specified in seconds. Here, we've set it as 21600 (or 6 hours). Therefore, every 6 hours, the chart will clear itself and start drawing with a fresh canvas.
 
Clearing chart using JavaScript API

The data-streaming charts also expose a JavaScript API to help you clear charts at client side. To do so, you need to take the following steps:

Enable the registerWithJS flag as under (last parameter):

var chart1 = new FusionCharts("../Charts/RealTimeLine.swf", "ChId1", "500", "350", "0", "1");
 
At the event when you want to clear the chart (say a button click, or any other event), get a reference to the chart object and call clearChart() method as under:
//Get reference to the chart using its ID
var chartToClear = getChartFromId("ChId1");
//Invoke clearChart() command
chartToClear.clearChart();
When the above command is invoked, the chart will clear its existing view state and start afresh.