Clearing Chart View

Real-time charts in the FusionCharts Suite XT let you clear the data currently being shown on the chart and render the new data afresh. Chart clearing helps to reduce CPU usage by real-time charts, when they have been running live for several days or months. Clearing the chart re-instantiates many objects in the chart, thereby clearing a lot of memory.

The chart view can be cleared:

• from the server

• by setting a clear interval

• using JavaScript API

In this section, you will be shown how you can clear the chart view using each of the above listed methods.

Clearing the Chart from the Server

Consider the following scenario: You are plotting the values of a certain counter, in real-time, 24/7. At the start of each day, you want to clear the existing data being shown on the chart (of the previous day).

To do this, you will have to send the following command to the chart as part of your real-time data update:

&clear=1

The above command clears all the data that is 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.

A real-time chart that clears all its data after every 10th update looks like this:

The data structure needed to render the above chart is given below:

• JSON
• XML

{
    "chart": {
        "caption": "Harry's Supermart",
        "subCaption": "Online Purchase",
        "yaxismaxvalue": "10",
        "numdisplaysets": "10",
        "labeldisplay": "rotate",
        "slantLabels": "1",
        "showLegend": "0",
        "showValues": "0",
        "numbersuffix": " Transactions",
        "showRealTimeValue": "0",
        "theme": "fint"
    },
    "categories": [
        {
            "category": [
                {
                    "label": "Start"
                }
            ]
        }
    ],
    "dataset": [
        {
            "seriesname": "",
            "alpha": "100",
            "data": [
                {
                    "value": "5",
                    "toolText": "5 Customers on Start"
                }
            ]
        }
    ]
}

In the above data, the feedData() method (covered in the section on feeding and retrieving data) is used to send the clearing command from the server to the chart.

When sending this command from the real-time data provider page to the chart, you need to make sure that it is not sent with each incremental data update. Otherwise, you will not see anything plotted on the chart because the chart will clear itself with each update.

Setting a Chart-clearing Interval

Real-time charts allow you to set a predefined interval in the JSON/XML data to clear the chart.

A real-time column chart configured to do this looks like this:

Given below is a brief description of the attribute used to set the predefined interval:

The data structure needed to render the above chart is given below:

• JSON
• XML

{
    "chart": {
        "caption": "Harry's Supermart",
        "subCaption": "Online Purchase",
        "yaxismaxvalue": "10",
        "numdisplaysets": "10",
        "labeldisplay": "rotate",
        "slantLabels": "1",
        "showLegend": "0",
        "showValues": "0",
        "numbersuffix": " Transactions",
        "showRealTimeValue": "0",
        "clearChartInterval": "50",
        "theme": "fint"
    },
    "categories": [
        {
            "category": [
                {
                    "label": "Start"
                }
            ]
        }
    ],
    "dataset": [
        {
            "seriesname": "",
            "alpha": "100",
            "data": [
                {
                    "value": "5",
                    "toolText": "5 Customers on Start"
                }
            ]
        }
    ]
}

In the data structure above, we have set the interval to 50 seconds. Therefore, after every 50 seconds, the chart will clear itself and start drawing with a fresh canvas.

Clearing Chart using JavaScript API

Real-time charts expose a JavaScript API that enables you to clear charts at the client-side. To do this, you need to:

• Get a reference to the chart

• Call the clearChart() method

A real-time column chart that is configured to be cleared using the JavaScript API after every 10th update looks like this:

The data structure needed to render the above chart is given below:

• JSON
• XML

{
    "chart": {
        "caption": "Harry's Supermart",
        "subCaption": "Online Purchase",
        "yaxismaxvalue": "10",
        "numdisplaysets": "10",
        "labeldisplay": "rotate",
        "slantLabels": "1",
        "showLegend": "0",
        "showValues": "0",
        "numbersuffix": " Transactions",
        "showRealTimeValue": "0",
        "theme": "fint"
    },
    "categories": [
        {
            "category": [
                {
                    "label": "Start"
                }
            ]
        }
    ],
    "dataset": [
        {
            "seriesname": "",
            "alpha": "100",
            "data": [
                {
                    "value": "5",
                    "toolText": "5 Customers on Start"
                }
            ]
        }
    ]
}

In the above data, the chartRef variable is used to get the chart reference. The clearChart() method is then called using the chartRef variable.

You can call the JavaScript APIs of a chart only after it has rendered.

There! You have now seen how you can clear the chart view.