Here, we'll create a simple spark win/loss chart to show the performance of Yankees this season.
The chart will look as under:
<chart caption="Yankees" subcaption="Current season">
<dataset>
<set value="W"/>
<set value="W"/>
<set value="D"/>
<set value="L"/>
<set value="W"/>
<set value="W"/>
<set value="L"/>
<set value="L"/>
<set value="W"/>
<set value="L"/>
<set value="W" scoreless="1"/>
<set value="L"/>
<set value="W"/>
<set value="W"/>
</dataset>
</chart>
{
"chart": {
"caption": "Yankees",
"subcaption": "Current season"
},
"dataset": [
{
"data": [
{
"value": "W"
},
{
"value": "W"
},
{
"value": "D"
},
{
"value": "L"
},
{
"value": "W"
},
{
"value": "W"
},
{
"value": "L"
},
{
"value": "L"
},
{
"value": "W"
},
{
"value": "L"
},
{
"value": "W",
"scoreless": "1"
},
{
"value": "L"
},
{
"value": "W"
},
{
"value": "W"
}
]
}
]
}In the above XML, we've:
- Created the <chart> element, which is the root element of each chart.
- Specified the caption & sub-caption. You can specify a lot more properties for the <chart> element, which have been discussed in the next section.
- Added the <dataset> element to contain data. Each spark win/loss chart XML can have only one <dataset> element, under which individual data points can be specified using <set value='W' />.
- Set value can be of 3 types:
- W - Indicating a win
- L - Indicating a loss
- D - Indicating a draw
For detailed explanation on JSON data format click here.
When you now view the chart, you'll get something as under:
See it live!
Next, we'll see how to configure the various aspects of this chart.