FusionCharts - Gallery Example - Multi-series line 2D Chart
Created using FusionCharts Suite XT - www.fusioncharts.com
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>
<script src="//cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.4/jspdf.debug.js"></script>
<script src="//code.jquery.com/jquery-2.2.4.min.js"></script>
<div id="chart-container">FusionChart</div>
JavaScript
var my_data = [
{"series":"group1", "type":"device1", "value":15},
{"series":"group1", "type":"device3", "value":12},
{"series":"group2", "type":"device1", "value":16},
{"series":"group2", "type":"device1", "value":11},
{"series":"group2", "type":"device2", "value":17},
{"series":"group2", "type":"device2", "value":18},
{"series":"group2", "type":"device3", "value":10},
{"series":"group2", "type":"device4", "value":14},
{"series":"group3", "type":"device1", "value":13},
{"series":"group3", "type":"device3", "value":19},
{"series":"group3", "type":"device4", "value":11},
{"series":"group3", "type":"device4", "value":15}
];
var unique = {};
var my_categories = [];
for( var i in my_data ){
if( typeof(unique[my_data[i].type]) == "undefined"){
my_categories.push({"label":my_data[i].type});
}
unique[my_data[i].type] = 0;
}
my_categories.sort(function(a,b) {
var x = a.label.toLowerCase();
var y = b.label.toLowerCase();
return x < y ? -1 : x > y ? 1 : 0;
});
console.log(my_categories);
var categories = [{ category: my_categories }];
var result = my_data.reduce(function (categories) {
var catIndex = categories.reduce(function (r, o, i) {
r[o.label] = i;
return r;
}, {}),
series = Object.create(null);
return function (r, o) {
if (!series[o.series]) {
series[o.series] = {
seriesname: o.series,
data: categories.map(function () { return { value: 0 } })
};
r.push(series[o.series]);
}
series[o.series].data[catIndex[o.type]].value += o.value;
return r;
};
}(categories[0].category), []);
console.log(result);
FusionCharts.ready(function(){
var fusioncharts = new FusionCharts({
type: 'mscolumn2d',
renderAt: 'chart-container',
dataFormat: 'json',
dataSource: {
"chart": {},
"categories": categories,
...