Loading
Creating a Spark Column Chart
As an example, we will create a spark column chart that shows the monthly revenue.
A spark column chart that shows the monthly revenue looks like this:
FusionCharts will load here..
Given below is a brief description of the attribute used to create a simple spark column chart:
| Attribute Name | Description |
|---|---|
|
It is used to show the numerical value for a data plot on the spark column chart, e.g. 783000. This attribute belongs to the |
The data structure needed to render a spark column chart to show the monthly revenue is given below:
{
"chart": {
"theme": "fint",
"caption": "Revenue by Month",
"subcaption": "Last year",
"subCaptionFontSize": "11",
"numberPrefix": "$",
"highColor": "#6baa01",
"lowColor": "#e44a00",
"chartBottomMargin": "30"
},
"dataset": [
{
"data": [
{
"value": "783000"
},
{
"value": "601000"
},
{
"value": "515000"
},
{
"value": "315900"
},
{
"value": "388000"
},
{
"value": "433000"
},
{
"value": "910000"
},
{
"value": "798000"
},
{
"value": "483300"
},
{
"value": "562000"
},
{
"value": "359400"
},
{
"value": "485000"
}
]
}
]
}
{
"chart": {
"theme": "fint",
"caption": "Revenue by Month",
"subcaption": "Last year",
"subCaptionFontSize": "11",
"numberPrefix": "$",
"highColor": "#6baa01",
"lowColor": "#e44a00",
"chartBottomMargin": "30"
},
"dataset": [
{
"data": [
{
"value": "783000"
},
{
"value": "601000"
},
{
"value": "515000"
},
{
"value": "315900"
},
{
"value": "388000"
},
{
"value": "433000"
},
{
"value": "910000"
},
{
"value": "798000"
},
{
"value": "483300"
},
{
"value": "562000"
},
{
"value": "359400"
},
{
"value": "485000"
}
]
}
]
}There! You have now seen how you can create a simple spark column chart.