Add and remove lines in zoomline chart
by Nabajeet Sonowal
HTML
<script src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js"></script>
<div id="chart-container">FusionCharts will render here</div>
<input type="button" value="add Data" id="update-data" />
<input type="button" value="remove Data" id="remove-data" />
JavaScript
FusionCharts.ready(function () {
var data = "10|5|5|3|6|8|5|7|9|5";
var data1 = "2|7|5|3|4|8|5|1|9|5";
var categories = [{
"category": "Dec 01 2014|Dec 02 2014|Dec 03 2014|Dec 04 2014|Dec 05 2014|Dec 06 2014|Dec 07 2014|Dec 08 2014|Dec 09 2014|Dec 10 2014"
}];
var revenueChart = new FusionCharts({
type: 'zoomline',
renderAt: 'chart-container',
id: 'myChart',
width: '600',
height: '400',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Unique Website Visits in a Year",
"xaxisname": "Date",
"yaxisname": "Unique Visitors",
"theme": "fint",
"compactDataMode": "1",
"connectNullData": "1",
},
"categories": categories,
"dataset": [{
"seriesname": "series1",
"data": data
}]
}
}).render();
// Set data on the chart using the setChartData function when a button is clicked.
document.getElementById("update-data").onclick = function () {
revenueChart.setChartData({
"chart": {
"caption": "Unique Website Visits in a Year",
"xaxisname": "Date",
"yaxisname": "Unique Visitors",
"theme": "fint",
"compactDataMode": "1",
"connectNullData": "1",
},
"categories": categories,
"dataset": [{
"seriesname": "series1",
"data": data
}, {
"seriesname": "series2",
"data": data1
}]
}, "json");
...