FusionCharts - Displaying line series values in Pareto Chart
Created using FusionCharts Suite XT - www.fusioncharts.com
by FusionCharts
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>
<!-- Customizing the line dataset in Pareto 2D chart showing employee late arrivals analysis in a pareto chart using attributes:
# lineThickness - Set to 2
# lineColor - Set to #8e0000
# lineAlpha - Set to 80
# lineDashed - Set to 1
# lineDashLen - Set to 5
# lineDashGap - Set to 3
-->
<div id="chart-container">FusionCharts will render here</div>
JavaScript
FusionCharts.ready(function() {
var revenueChart = new FusionCharts({
type: 'pareto2d',
renderAt: 'chart-container',
width: '700',
height: '400',
dataFormat: 'json',
dataSource: {
"chart": {
"theme": "fusion",
"caption": "Employee late arrivals by reported cause",
"subCaption": "Last month",
"xAxisName": "Reported Cause",
"pYAxisName": "No. of Occurrence",
"sYAxisname": "Cumulative Percentage",
"showValues": "0",
"showXAxisLine": "1",
//Line dataset customizing attributes
//Changing thickness
"lineThickness": "2",
//Changing color
"lineColor": "#8e0000",
//Changing alpha
"lineAlpha": "80",
//Setting line to a dashed line
"lineDashed": "1",
//Setting dash length
"lineDashLen": "5",
//Setting gap between two dash
"lineDashGap": "3"
},
"data": [{
"label": "Traffic",
"value": "5680"
},
{
"label": "Family Engagement",
"value": "1036"
},
{
"label": "Public Transport",
"value": "950"
},
{
"label": "Weather",
"value": "500"
},
{
"label": "Emergency",
"value": "140"
},
{
"label": "Others",
"value": "68"
}
]
}
}).render();
});