You are viewing documentation for an older version. For current documentation - click here.
Clearing Chart View

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

  1. Sending the &clear=1 command from server
  2. Setting clearChartInterval (in the XML or JSON data) 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 are 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 will not 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/JSON data, at which the chart will automatically clear itself. Shown below is an example:

<chart .... clearChartInterval='21600' ...>
{
  "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 do the following:

  • Get reference to the chart
  • Call clearChart()

The code snippet below illustrates this: 

//Get reference to the chart using its ID
var chartToClear = FusionCharts("ChId1");

//Call clearChart() 
chartToClear.clearChart();

See how it works in a live demo!

When the above function is called, the chart will clear its existing view state and start afresh.

You can call the JavaScript APIs of a chart only after it has rendered. You can use the FC_Rendered event tracker or the Rendered event listener to check if a chart has rendered. For more information, please see FusionWidgets XT and JavaScript section.