FusionCharts - Gallery Example - Line 2D Chart In Javascript
Created using FusionCharts Suite XT - www.fusioncharts.com
HTML
<script src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
<script src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js"></script>
<!--
Showcase of Line Chart
-->
<div id="chart-container">FusionCharts will render here</div>
JavaScript
FusionCharts.ready(function() {
var visitChart = new FusionCharts({
type: 'mscombi2d',
renderAt: 'chart-container',
width: '600',
height: '350',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Expense Analysis",
"subcaption": "ACME Inc.",
"xaxisname": "Region",
"yaxisname": "Amount (In USD)",
"numberprefix": "$",
"exportenabled": "1",
"theme": "fusion"
},
"categories": [
{
"category": [
{
"label": "East"
},
{
"label": "West"
},
{
"label": "South"
},
{
"label": "North"
}
]
}
],
"dataset": [
{
"seriesname": "Actual Expenses",
"data": [
{
"value": "1441290"
},
{
"value": "855912"
},
{
"value": "911404"
},
{
"value": "648136"
}
]
},
{
"seriesname": "Budgeted Expenses",
"renderas": "line",
"data": [
{
"value": "1297430"
},
{
"value": "776485"
},
{
"value": "685352"
},
{
"value": "726791"
}
]
},
{
"seriesname": "Unknown liabilities",
"renderas": "area",
"showanchors": "0",
"data": [
{
"value": "143860"
},
{
"value": "79427"
},
{
"value": "226052"
},
{
"value": "78655"
}
]
}
]
}
});
visitChart.render();
});