Demos

Beginner's Guide

Charts / Gauges / Maps Guide

Customizing Charts

API

Integrating With Your Stack

Help

FusionCharts Suite XT allows you to configure the cosmetic and functional aspects of a step line chart.

In this section, you will be shown how you can:

Hiding Vertical Lines from the Chart

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

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

FusionCharts will load here..
{ "chart": { "caption": "Revenue Vs Expense", "subcaption": "Last year", "xaxisname": "Month", "yaxisname": "Amount (In USD)", "showvalues": "0", "numberprefix": "$", "palettecolors": "#6baa01, #d35400", "drawVerticalJoins": "0", "theme": "fint" }, "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",
        "xaxisname": "Month",
        "yaxisname": "Amount (In USD)",
        "showvalues": "0",
        "numberprefix": "$",
        "palettecolors": "#6baa01, #d35400",
        "drawVerticalJoins": "0",
        "theme": "fint"
    },
    "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",
            "xaxisname": "Month",
            "yaxisname": "Amount (In USD)",
            "showvalues": "0",
            "numberprefix": "$",
            "palettecolors": "#6baa01, #d35400",
            //Without vertical joins
            "drawVerticalJoins": "0",
            "theme": "fint"
        },
        "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 attribute used to hide the vertical joins:

Attribute Name Description

drawVerticalJoins

It is used to specify whether the vertical joins that connect horizontal planes will be shown. Setting this attribute to 0 will hide the vertical lines, setting it to 1 (default) will show them.

Using 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.

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

FusionCharts will load here..
{ "chart": { "caption": "Revenue Vs Expense", "subcaption": "Last year", "xaxisname": "Month", "yaxisname": "Amount (In USD)", "showvalues": "0", "numberprefix": "$", "palettecolors": "#6baa01, #d35400", "useForwardSteps": "0", "theme": "fint" }, "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",
        "xaxisname": "Month",
        "yaxisname": "Amount (In USD)",
        "showvalues": "0",
        "numberprefix": "$",
        "palettecolors": "#6baa01, #d35400",
        "useForwardSteps": "0",
        "theme": "fint"
    },
    "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",
            "xaxisname": "Month",
            "yaxisname": "Amount (In USD)",
            "showvalues": "0",
            "numberprefix": "$",
            "palettecolors": "#6baa01, #d35400",
            //Use Forward steps
            "useForwardSteps": "0",
            "theme": "fint"
        },
        "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>

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

Given below is a brief description of the attribute used to enable/disable the forward progressive mode:

Attribute Name Description

useForwardSteps

It is used to specify whether the chart will be rendered in the forward progressive mode. Setting this attribute to 0 will disable the forward progressive mode, setting it to 1 (default) will enable it.

Top