Step Line Chart

This chart type belongs to PowerCharts XT.

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.

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.

Let's create our first step line chart where we will compare the revenue earned with the expense incurred in the last year. The step-like composition of the data segments gives an accurate representation of the revenue and expense for each month.

To create a multi-series step line chart follow the steps given below:

In the JSON data, set the attributes and their corresponding values in "<attributeName>": "<value>" format.
Specify the chart type using the type attribute. To render a step-line chart, set msstepline.
Set the container object using renderAt attribute.
Specify the dimension of the chart using width and height attributes.
Set the type of data (JSON/XML) you want to pass to the chart object using dataFormat attribute.

For a detailed list of attributes, refer to the chart attributes page of step-line chart.

A multi-series step line chart looks like this:

CHART
JSON
XML
HTML

{
    "chart": {
        "theme": "fusion",
        "caption": "Revenue Vs Expense",
        "subCaption": "Last year",
        "xaxisname": "Month",
        "yaxisname": "Amount (In USD)",
        "showXAxisLine": "1",
        "numberprefix": "$",
        "drawverticaljoints": "1",
        "useforwardsteps": "0",
        "divlineAlpha": "100"
    },
    "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"
                }
            ]
        }
    ]
}

<chart theme="fusion" caption="Revenue Vs Expense" subcaption="Last year" xaxisname="Month" yaxisname="Amount (In USD)" showxaxisline="1" numberprefix="$" drawverticaljoints="1" useforwardsteps="0" divlinealpha="100">
    <categories>
        <category label="Jan" />
        <category label="Feb" />
        <category label="Mar" />
        <category label="Apr" />
        <category label="May" />
        <category label="Jun" />
        <category label="Jul" />
        <category label="Aug" />
        <category label="Sep" />
        <category label="Oct" />
        <category label="Nov" />
        <category label="Dec" />
    </categories>
    <dataset seriesname="Revenue" linethickness="3" anchorradius="3">
        <set value="374000" />
        <set value="350000" />
        <set value="380000" />
        <set value="340000" />
        <set value="398000" />
        <set value="326000" />
        <set value="448000" />
        <set value="379000" />
        <set value="355000" />
        <set value="374000" />
        <set value="348000" />
        <set value="402000" />
    </dataset>
    <dataset seriesname="Expense" linethickness="3" anchorradius="3">
        <set value="100000" />
        <set value="115000" />
        <set value="135000" />
        <set value="150000" />
        <set value="110000" />
        <set value="98000" />
        <set value="118000" />
        <set value="197000" />
        <set value="228000" />
        <set value="249000" />
        <set value="229000" />
        <set value="208000" />
    </dataset>
</chart>

<html>
<head>
	<title>My first chart using FusionCharts Suite XT</title>
	<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
	<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js"></script>
	<script type="text/javascript">
		FusionCharts.ready(function(){
			var chartObj = new FusionCharts({
    type: 'msstepline',
    renderAt: 'chart-container',
    width: '680',
    height: '390',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "theme": "fusion",
            "caption": "Revenue Vs Expense",
            "subCaption": "Last year",
            "xaxisname": "Month",
            "yaxisname": "Amount (In USD)",
            "showXAxisLine": "1",
            "numberprefix": "$",
            "drawverticaljoints": "1",
            "useforwardsteps": "0",
            "divlineAlpha": "100"
        },
        "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"
            }]
        }]
    }

}
);
			chartObj.render();
		});
	</script>
	</head>
	<body>
		<div id="chart-container">FusionCharts XT will load here!</div>
	</body>
</html>

The data structure above is similar to that of any multi-series chart in the FusionCharts Suite XT, except for the type attribute.

Click here to edit the step line chart.

Hide the Vertical Lines#

By default, the step line chart displays the vertical joins - vertical lines that run through the edges of the horizontal planes thereby joining them in different steps. However, you can also disjoin the horizontal segments by hiding the vertical lines from the chart.

To hide the vertical lines in your chart, set the drawVerticalJoins attribute to 0.

Refer to the code given below:

{
    "chart": {
        "drawVerticalJoins": "0"
    }
}

A step line chart rendered without the vertical joins looks like this:

Click here to edit the step line chart.

Use Forward Steps#

For a step line chart, you can configure the direction of progression of the line segments. By default, the chart is rendered in the forward progressive mode - the line plots are horizontally depicted, and then vertical lines are drawn to connect the data plots. To disable the forward progressive mode, set the useForwardSteps attribute to 0.

Refer to the code given below:

{
    "chart": {
        "useForwardSteps": "0"
    },
}

A step line chart rendered with the forward progressive mode disabled looks like this:

Click here to edit the step line chart.

Compare this chart with the step line chart shown above and see the difference in how each is rendered.