Here, we'll create a simple spark column chart to show the monthly revenue of a fictional company for one year.
The chart will look as under:
<chart palette="2" caption="Revenue" subcaption="12 months" numberPrefix="$" highColor="00CC33" lowColor="CC0000">
<dataset>
<set value="783000"/>
<set value="201000"/>
<set value="515000"/>
<set value="115900"/>
<set value="388000"/>
<set value="433000"/>
<set value="910000"/>
<set value="198000"/>
<set value="183300"/>
<set value="162000"/>
<set value="159400"/>
<set value="185000"/>
</dataset>
</chart>
{
"chart": {
"palette": "2",
"caption": "Revenue",
"subcaption": "12 months",
"numberprefix": "$",
"highcolor": "00CC33",
"lowcolor": "CC0000"
},
"dataset": [
{
"data": [
{
"value": "783000"
},
{
"value": "201000"
},
{
"value": "515000"
},
{
"value": "115900"
},
{
"value": "388000"
},
{
"value": "433000"
},
{
"value": "910000"
},
{
"value": "198000"
},
{
"value": "183300"
},
{
"value": "162000"
},
{
"value": "159400"
},
{
"value": "185000"
}
]
}
]
}In the above XML, we've:
- Created the <chart> element, which is the root element of each chart.
- Specified the caption & sub-caption, palette number, number prefix. We've also asked the chart to color the highest and lowest month columns using different colors. You can specify a lot more properties for the <chart> element, which have been discussed in next section.
- Thereafter, we've added the <dataset> element to contain data. Each spark column chart XML can have only one <dataset> element, under which individual data points can be specified using <set value='23400' />.
For detailed explanation on JSON data format click here.
When you now view the chart, you'll get something as under: