Wijmo 5[Flex Chart]
Refersh data and add series dynamically
HTML
<link rel="stylesheet" href="http://cdn.wijmo.com/5.20162.198/styles/wijmo.min.css">
<script src="http://cdn.wijmo.com/5.20162.198/controls/wijmo.min.js"></script>
<script src="http://cdn.wijmo.com/5.20162.198/controls/wijmo.input.min.js"></script>
<script src="http://cdn.wijmo.com/5.20162.198/controls/wijmo.chart.min.js"></script>
<div id="theChart"></div>
<button id="add" >Add Series</button>
<button id="pushData">Data Refresh</button>
JavaScript
var countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','),
data = [];
for (var i = 0; i < 5; i++) {
data.push({
id : i,
country : countries[i],
sales : Math.random() * 1000,
expenses : Math.random() * 1000,
downloads : Math.random() * 100
});
}
$(document).ready(function () {
var chartData=new wijmo.collections.CollectionView(data);
var chart = new wijmo.chart.FlexChart('#theChart', {
itemsSource:chartData ,
bindingX: 'country',
series: [{name:'Sales',binding:'sales'}]
});
function dataReresh() {
data.push({
id: 5,
country: countries[5],
sales: Math.random() * 1000,
expenses: Math.random() * 10000,
downloads: Math.random() * 100
});
chartData.refresh();
}
$('#pushData').click(function () {
dataReresh();
});
$('#add').click(function () {
var series = new wijmo.chart.Series();
series.binding = 'expenses';
series.name = 'Expenses';
series.chartType=wijmo.chart.ChartType.Line;
chart.series.push(series);
});
});