FusionCharts - Gallery Example - Multi-series line 2D Chart
Created using FusionCharts Suite XT - www.fusioncharts.com
HTML
<!-- Multi-series line chart -->
<div id="chart-list"></div>
<script src="https://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
JavaScript
FusionCharts.ready(function () {
showCharts(1, 1, 100);
//showCharts(8, 35, 168);
});
function showCharts(chartNum, lineNum, pointNum)
{
generateDom(chartNum, "chart-list");
var dataArray = generateData(chartNum, lineNum, pointNum);
for(var i = 0;i < chartNum;i ++)
{
var visitChart = new FusionCharts({
type: 'msline',
renderAt: 'chart-container' + i,
width: '800',
height: '350',
dataFormat: 'json'}).render();
visitChart.setJSONData(dataArray[i]);
}
}
function generateDom(chartNum, domId)
{
var div = document.getElementById(domId);
var domStr = "";
for(var i = 0;i < chartNum;i ++)
{
var tempStr = "Chart " + i + ":<br />" +
"<div id=\"chart-container" + i + "\"></div>";
domStr += tempStr;
}
div.innerHTML = domStr;
}
function generateData(chartNum, lineNum, pointNum)
{
var dataArray = [];
for(var x = 0;x < chartNum;x ++)
{
var dataSource = {
"chart": {
chartBottomMargin:"5",animation:"0",setAdaptiveSYMin:"1",labelStep:"4",labelDisplay:"WRAP",formatNumber:"0",ifSingleAxis:"1",legendScrollBarColor:"D6EEFB",setAdaptiveYMin:"1",yAxisNamePadding:"0",chartLeftMargin:"10",bgcolor:"#F4F5F6",chartTopMargin:"10",formatNumberScale:"1",xAxisNamePadding:"0",chartRightMargin:"15",legendPadding:"0",forceDecimals:"1",rotateYAxisName:"1",showvalues:"0",yAxisName:"number"
},
"categories": [
{
"category": [
// { "label": "1" },
]
}
],
"dataset": [
// {
// "seriesname": "Bakersfield Central",
// "data": [
// { "value": "15123" },
// ]
// }
]
};
for(var i = 0;i < pointNum;i ++)
...