Configuring a Step Line Chart
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"
}
]
}
]
}<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 |
|---|---|
|
It is used to specify whether the vertical joins that connect horizontal planes will be shown. Setting this attribute to |
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"
}
]
}
]
}<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 |
|---|---|
|
It is used to specify whether the chart will be rendered in the forward progressive mode. Setting this attribute to |