FusionCharts - Gallery Example - Multi-Series Line Chart
Created using FusionCharts Suite XT - www.fusioncharts.com
by Venkatesan S
HTML
<script src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.zune.js"></script>
<!-- A simple implementation of Multi-Series Line 2D chart showing sales report of smartphones users worldwide for last 5 years-->
<div id="chart-container">FusionCharts will render here</div>
JavaScript
FusionCharts.ready(function() {
var salesChart = new FusionCharts({
type: 'msline',
renderAt: 'chart-container',
width: '600',
height: '400',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Ticket Arrival Pattern by day of week",
"subcaption": "Feb 2017 - May 2017",
"numberSuffix": "%",
"xAxisName": "Days",
"yAxisName": "Tickets Opened (%)",
"showYAxisValues": "0",
"xAxisNameFontSize": "11",
"xAxisNameFontColor": "#4d4d4d",
"xAxisNameFontBold": "1",
"xAxisNameFontItalic": "1",
"yAxisNameFontSize": "11",
"yAxisNameFontColor": "#4d4d4d",
"yAxisNameFontBold": "1",
"yAxisNameFontItalic": "1",
"connectNullData": "1",
"paletteColors": "#0075c2",
"bgColor": "#ffffff",
"showLabel": "1",
"showborder": "1",
"showCanvasBorder": "0",
"canvasBgAlpha": "0",
"usePlotGradientColor": "0",
"plotBorderAlpha": "10",
"numDivlines": "0",
"numVDivLines": "0",
"showAlternateHGridColor": "0",
"exportEnabled": "1",
"exportFileName": "AMS DD - Feb 2017 to May 2017_arrivalByDoW",
"captionFontSize": "14",
"captionFontColor": "#4d4d4d",
"captionFontBold": "1",
"subcaptionFontSize": "11",
"subcaptionFontColor": "#4d4d4d",
"subcaptionFontBold": "1",
"subcaptionFontItalic": "1",
...