Creating a Step Line Chart
A step line chart is used to visualize trends for a particular event which is not continuous in nature. For a given set of data, a step line chart enables you to compare the magnitude and change in values at different points of the same series. It also helps you discern the intermittent pattern of the trend at the same time.
In this section, you will be shown how you can create a simple step line chart.
As an example, we will create a step line chart to compare the revenue earned with the expenses incurred for the last year.
The step line chart thus created looks like this:
FusionCharts will load here..
{
"chart": {
"caption": "Revenue Vs Expense",
"subCaption": "Last year",
"captionFontSize": "14",
"subcaptionFontSize": "14",
"subcaptionFontBold": "0",
"baseFontColor": "#333333",
"baseFont": "Helvetica Neue,Arial",
"xaxisname": "Month",
"yaxisname": "Amount (In USD)",
"usePlotGradientColor": "0",
"bgColor": "#ffffff",
"palettecolors": "#6baa01, #d35400",
"showBorder": "0",
"showPlotBorder": "0",
"showValues": "0",
"showShadow": "0",
"showAlternateHGridColor": "0",
"showCanvasBorder": "0",
"showXAxisLine": "1",
"numberprefix": "$",
"xAxisLineThickness": "1",
"xAxisLineColor": "#999999",
"canvasBgColor": "#ffffff",
"divlineAlpha": "100",
"divlineColor": "#999999",
"divlineThickness": "1",
"divLineIsDashed": "1",
"divLineDashLen": "1",
"legendBorderAlpha": "0",
"legendShadow": "0",
"toolTipColor": "#ffffff",
"toolTipBorderThickness": "0",
"toolTipBgColor": "#000000",
"toolTipBgAlpha": "80",
"toolTipBorderRadius": "2",
"toolTipPadding": "5"
},
"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"
},
{
"value": "402000"
}
]
},
{
"seriesname": "Expense",
"linethickness": "3",
"anchorradius": "3",
"data": [
{
"value": "100000"
},
{
"value": "115000"
},
{
"value": "135000"
},
{
"value": "150000"
},
{
"value": "110000"
},
{
"value": "98000"
},
{
"value": "118000"
},
{
"value": "197000"
},
{
"value": "228000"
},
{
"value": "249000"
},
{
"value": "229000"
},
{
"value": "208000"
}
]
}
]
}<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js?cacheBust=56"></script>
<script type="text/javascript">
FusionCharts.ready(function(){
var fusioncharts = new FusionCharts({
type: 'msstepline',
renderAt: 'chart-container',
width: '550',
height: '350',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Revenue Vs Expense",
"subCaption": "Last year",
"captionFontSize": "14",
"subcaptionFontSize": "14",
"subcaptionFontBold": "0",
"baseFontColor": "#333333",
"baseFont": "Helvetica Neue,Arial",
"xaxisname": "Month",
"yaxisname": "Amount (In USD)",
"usePlotGradientColor": "0",
"bgColor": "#ffffff",
"palettecolors": "#6baa01, #d35400",
"showBorder": "0",
"showPlotBorder": "0",
"showValues": "0",
"showShadow": "0",
"showAlternateHGridColor": "0",
"showCanvasBorder": "0",
"showXAxisLine": "1",
"numberprefix": "$",
"xAxisLineThickness": "1",
"xAxisLineColor": "#999999",
"canvasBgColor": "#ffffff",
"divlineAlpha": "100",
"divlineColor": "#999999",
"divlineThickness": "1",
"divLineIsDashed": "1",
"divLineDashLen": "1",
"legendBorderAlpha": "0",
"legendShadow": "0",
"toolTipColor": "#ffffff",
"toolTipBorderThickness": "0",
"toolTipBgColor": "#000000",
"toolTipBgAlpha": "80",
"toolTipBorderRadius": "2",
"toolTipPadding": "5"
},
"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"
}, {
"value": "402000"
}]
}, {
"seriesname": "Expense",
"linethickness": "3",
"anchorradius": "3",
"data": [{
"value": "100000"
}, {
"value": "115000"
}, {
"value": "135000"
}, {
"value": "150000"
}, {
"value": "110000"
}, {
"value": "98000"
}, {
"value": "118000"
}, {
"value": "197000"
}, {
"value": "228000"
}, {
"value": "249000"
}, {
"value": "229000"
}, {
"value": "208000"
}]
}]
}
}
);
fusioncharts.render();
});
</script>
</head>
<body>
<div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>Given below is a brief description of the attributes used to create a step line chart:
| Attribute Name | Description |
|---|---|
|
It is used to specify the label for a data item. The label is rendered on the x-axis. This attribute belongs to the |
|
It is used to specify the value for a data item. This attribute belongs to the |
|
It is used to specify a name for the dataset. This name is shown in the legend box rendered below the chart. This attribute belongs to the |
The data structure above is similar to that of any multi-series chart in the FusionCharts Suite XT, except for the type attribute.