FusionCharts - Gallery Example - Multi-series line 2D Chart
Created using FusionCharts Suite XT - www.fusioncharts.com
by Soumya Dutta
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="http://static.fusioncharts.com/code/latest/fusioncharts.charts.js"></script>
<!-- Multi-series line chart -->
<div id="chartContainer">FusionCharts will render here</div>
JavaScript
FusionCharts.ready(function () {
var myChart = new FusionCharts({
"type": "msline",
"renderAt": "chartContainer",
"width": "500",
"height": "300",
"dataFormat": "xml",
"dataSource": "<chart connectNullData='1' caption='Sales of Liquor' xaxisname='Close Date' yaxisname='Sales (In USD)' numberprefix='$' palettecolors='#0075c2,#FF6600' bgcolor='#ffffff' useplotgradientcolor='0' legendborderalpha='0' legendshadow='1' plotfillalpha='60' showxaxisline='1' axislinealpha='25' showvalues='0' captionfontsize='14' subcaptionfontsize='14' subcaptionfontbold='0' divlinecolor='#999999' divlinedashed='1' divlinedashlen='1' divlinegaplen='1' showalternatehgridcolor='0' tooltipcolor='#ffffff' tooltipborderthickness='0' tooltipbgcolor='#000000' tooltipbgalpha='80' tooltipborderradius='2' tooltippadding='5' > <categories><category label='1' /> <category label='2' /> <category label='3'/> <category label='4' /> <category label='5' /> <category label='6' /> <category label='7'/> </categories><dataset seriesname='Q1 2016'><set value='0' /> <set value='10' /> <set value='10' /> <set value='25' /> <set value='25' /> <set value='25' /> <set value='25' /></dataset><dataset seriesname='Q2 2016'><set value='0' /> <set value='10'/> <set value='10' /> <set value='35' /> <set value='35' /> <set value='35' /> <set value='35' /> </dataset><dataset seriesname='Quota'><set value='2'/> <set /> <set /> <set /> <set /> <set /> <set value='39' /> </dataset><trendlines><line startValue='2' endValue='39' color='#0066CC' valueonright='1' displayvalue='Quota Amt' /></trendlines></chart>"
});
myChart.render();
});