FusionCharts - Step Line Chart with use of forword steps.
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>
<!--
A Multiseries StepLine Chart with use of forword steps. This attribute defines whether the step rises (falls) to the next value at the beginning of the step or at the end.
Attributes:
# useForwardSteps - Set to 0
-->
<div id="chart-container">FusionCharts will render here</div>
JavaScript
FusionCharts.ready(function() {
var comparisonChart = new FusionCharts({
type: 'msstepline',
renderAt: 'chart-container',
width: '700',
height: '400',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Revenue Vs Expense",
"subcaption": "Last year",
"xaxisname": "Month",
"yaxisname": "Amount (In USD)",
"numberprefix": "$",
//Use Forward steps
"useForwardSteps": "0",
"theme": "fusion"
},
"categories": [{
"category": [{
"label": "Jan"
},
{
"label": "Feb"
},
{
"label": "Mar"
},
{
"label": "Apr"
},
{
"label": "May"
},
{
"label": "Jun"
},
{
"label": "Jul"
},
{
"label": "Aug"
},
{
"label": "Sep"
},
{
"label": "Oct"
},
{
"label": "Nov"
},
{
"label": "Dec"
}
]
}],
"dataset": [{
"seriesname": "Revenue",
"linethickness": "3",
"anchorradius": "3",
"data": [{
"value": "374000"
},
{
"value": "350000"
},
{
"value": "380000"
},
{
"value": "340000"
},
{
"value": "398000"
},
{
"value": "326000"
},
{
"value": "448000"
},
{
"value": "379000"
},
{
"value": "355000"
},
{
"value": "374000"
},
{
"value": "348000"
},
{
...