Demos

Beginner's Guide

Charts / Gauges / Maps Guide

Customizing Charts

API

Integrating With Your Stack

Help

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" } ] } ] }
{
    "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

label

It is used to specify the label for a data item. The label is rendered on the x-axis. This attribute belongs to the category object, which in turn belongs to the categories object.

value

It is used to specify the value for a data item. This attribute belongs to the data object, which in turn belongs to the dataset object. The dataset object is an object array that can be used to make multiple datasets.

seriesName

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 dataset object. The dataset object is an object array that can be used to make multiple datasets.

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

Top