Introduction to Step Line Chart
A step line chart is used to visualize trends for a particular event which is not continuous in nature. It is a specialized line chart which, unlike the usual line charts, does not use the shortest distance to connect two data points; instead it uses vertical and horizontal lines to connect the data points in a series to form a step-like progression.
In this section, you will be introduced to the basics of a step line chart.
Basics of a Step Line Chart
Essentially, trends are quite apparent from the general slope of a line chart. However, when the lines take distorted shapes for a specific segment of data points, it becomes very difficult to determine the drift. This is where the significance of a step line chart comes in. For a given set of data, where a line chart shows the generic deviation of the data points, a step line chart not only enables you to compare the magnitude and change in values at different points of the same series but also helps you discern the intermittent pattern of the trend at the same time.
A multi-series step line chart 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>In the chart above, we have compared the revenue earned with the expense incurred in the last year. The step-like composition of the data segments gives an accurate representation for the revenue and expense for each month.