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:
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:
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:
{
"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"
}
]
}
]
}<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js?cacheBust=56"></script>
<script type="text/javascript">
FusionCharts.ready(function(){
var fusioncharts = new FusionCharts({
id: "mychart",
type: 'realtimecolumn',
renderAt: 'chart-container',
width: '600',
height: '300',
dataFormat: 'json',
dataSource: {
"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"
}]
}]
},
events: {
"beforeRender": function(evt, args) {
var counter = 1,
chartRef = evt.sender,
formatTime = function(time) {
(time < 10) ? (time = "0" + time) : (time = time);
return time;
},
updateData = function() {
//We need to create a querystring format incremental update, containing
//label in hh:mm:ss format
//and a value (random).
var currDate = new Date(),
label = (formatTime(currDate.getHours()) + ":" + formatTime(currDate.getMinutes()) + ":" + formatTime(currDate.getSeconds())),
//Get random number between 1 & 5 - rounded
footfall = (Math.round(Math.random() * 4) + 1),
strData = "&label=" + label + "&value=" + footfall;
//Adding a vLine
if ((counter % 10) === 1) {
strData += "&clear=1";
}
//Feed it to chart.
chartRef.feedData(strData);
//Increasing counter
counter += 1;
};
evt.sender.chartInterval = setInterval(function() {
updateData();
}, 10000);
},
"disposed": function(evt, args) {
clearInterval(evt.sender.chartInterval);
}
}
}
);
fusioncharts.render();
});
</script>
</head>
<body>
<div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>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:
{
"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"
}
]
}
]
}<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js?cacheBust=56"></script>
<script type="text/javascript">
FusionCharts.ready(function(){
var fusioncharts = new FusionCharts({
id: "mychart",
type: 'realtimecolumn',
renderAt: 'chart-container',
width: '600',
height: '300',
dataFormat: 'json',
dataSource: {
"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"
}]
}]
},
events: {
"beforeRender": function(evt, args) {
var chartRef = evt.sender,
formatTime = function(time) {
(time < 10) ? (time = "0" + time) : (time = time);
return time;
},
updateData = function() {
//We need to create a querystring format incremental update, containing
//label in hh:mm:ss format
//and a value (random).
var currDate = new Date(),
label = (formatTime(currDate.getHours()) + ":" + formatTime(currDate.getMinutes()) + ":" + formatTime(currDate.getSeconds())),
//Get random number between 1 & 5 - rounded
footfall = (Math.round(Math.random() * 4) + 1),
strData = "&label=" + label + "&value=" + footfall;
//Feed it to chart.
chartRef.feedData(strData);
};
evt.sender.chartInterval = setInterval(function() {
updateData();
}, 5000);
},
"disposed": function(evt,args) {
clearInterval(evt.sender.chartInterval);
}
}
}
);
fusioncharts.render();
});
</script>
</head>
<body>
<div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>Given below is a brief description of the attribute used to set the predefined interval:
| Attribute Name | Description |
|---|---|
|
It is used to specify in the JSON/XML data the time after which a chart will automatically clear itself of the previous data. The interval should be specified in seconds. This attribute belongs to the |
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:
{
"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"
}
]
}
]
}<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js?cacheBust=56"></script>
<script type="text/javascript">
FusionCharts.ready(function(){
var fusioncharts = new FusionCharts({
id: "mychart",
type: 'realtimecolumn',
renderAt: 'chart-container',
width: '600',
height: '300',
dataFormat: 'json',
dataSource: {
"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"
}]
}]
},
events: {
"beforeRender": function(evt, args) {
var counter = 1,
chartRef = evt.sender,
formatTime = function(time) {
(time < 10) ? (time = "0" + time) : (time = time);
return time;
},
updateData = function() {
//We need to create a querystring format incremental update, containing
//label in hh:mm:ss format
//and a value (random).
var currDate = new Date(),
label = (formatTime(currDate.getHours()) + ":" + formatTime(currDate.getMinutes()) + ":" + formatTime(currDate.getSeconds())),
//Get random number between 1 & 5 - rounded
footfall = (Math.round(Math.random() * 4) + 1),
strData = "&label=" + label + "&value=" + footfall;
//Clear Data Using Javasctipt API
if ((counter % 10) === 1) {
chartRef.clearChart();
}
//Feed it to chart.
chartRef.feedData(strData);
//Increasing counter
counter += 1;
};
chartRef.chartInterval = setInterval(function() {
updateData();
}, 5000);
},
"disposed": function(evt, args) {
clearInterval(evt.sender.chartInterval);
}
}
}
);
fusioncharts.render();
});
</script>
</head>
<body>
<div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>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.