Loading
Creating a Step Line Chart
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:
Given below is a brief description of the attributes used to create a step line chart:
| Attribute Name | Description |
|---|---|
|
It is used to specify the label for a data item. The label is rendered on the x-axis. This attribute belongs to the |
|
It is used to specify the value for a data item. This attribute belongs to the |
|
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 |
The data structure needed to create the above multi-series step line chart is given below:
{
"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": "$",
"drawverticaljoints": "1",
"useforwardsteps": "0",
"xAxisLineThickness": "1",
"xAxisLineColor": "#999999",
"canvasBgColor": "#ffffff",
"divlineAlpha": "100",
"divlineColor": "#999999",
"divlineThickness": "1",
"divLineIsDashed": "1",
"divLineDashLen": "1",
"divLineGapLen": "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"
}
]
}
]
}The data structure above is similar to that of any multi-series chart in the FusionCharts Suite XT, except for the type attribute.
There! You have now seen how you can create a step line chart.