Here, we'll see a simple example of creating a spark line chart. We'll use it to show the weekly stock price of Cisco for a particular year.
The chart will look as under:
<chart palette="2" caption="Cisco" setAdaptiveYMin="1">
<dataset>
<set value="27.26"/>
<set value="37.88"/>
<set value="38.88"/>
<set value="22.9"/>
<set value="39.02"/>
<set value="23.31"/>
<set value="30.85"/>
<set value="27.01"/>
<set value="33.2"/>
<set value="21.93"/>
<set value="34.51"/>
<set value="24.84"/>
<set value="39.32"/>
<set value="37.04"/>
<set value="27.81"/>
<set value="22.95"/>
<set value="24.73"/>
<set value="37.63"/>
<set value="29.75"/>
<set value="22.35"/>
<set value="34.35"/>
<set value="27.6"/>
<set value="27.97"/>
<set value="32.36"/>
<set value="22.56"/>
<set value="24.15"/>
<set value="24.93"/>
<set value="35.82"/>
<set value="23.45"/>
<set value="37.64"/>
<set value="26.99"/>
<set value="29.48"/>
<set value="36.63"/>
<set value="35.58"/>
<set value="32.19"/>
<set value="27.59"/>
<set value="26.94"/>
<set value="32.35"/>
<set value="22.63"/>
<set value="25.97"/>
<set value="25.28"/>
<set value="26.73"/>
<set value="23.47"/>
<set value="20.55"/>
<set value="34.58"/>
<set value="29.16"/>
<set value="34.97"/>
<set value="24.57"/>
<set value="20.7"/>
<set value="32.61"/>
</dataset>
</chart>
{
"chart": {
"palette": "2",
"caption": "Cisco",
"setadaptiveymin": "1"
},
"dataset": [
{
"data": [
{
"value": "27.26"
},
{
"value": "37.88"
},
{
"value": "38.88"
},
{
"value": "22.9"
},
{
"value": "39.02"
},
{
"value": "23.31"
},
{
"value": "30.85"
},
{
"value": "27.01"
},
{
"value": "33.2"
},
{
"value": "21.93"
},
{
"value": "34.51"
},
{
"value": "24.84"
},
{
"value": "39.32"
},
{
"value": "37.04"
},
{
"value": "27.81"
},
{
"value": "22.95"
},
{
"value": "24.73"
},
{
"value": "37.63"
},
{
"value": "29.75"
},
{
"value": "22.35"
},
{
"value": "34.35"
},
{
"value": "27.6"
},
{
"value": "27.97"
},
{
"value": "32.36"
},
{
"value": "22.56"
},
{
"value": "24.15"
},
{
"value": "24.93"
},
{
"value": "35.82"
},
{
"value": "23.45"
},
{
"value": "37.64"
},
{
"value": "26.99"
},
{
"value": "29.48"
},
{
"value": "36.63"
},
{
"value": "35.58"
},
{
"value": "32.19"
},
{
"value": "27.59"
},
{
"value": "26.94"
},
{
"value": "32.35"
},
{
"value": "22.63"
},
{
"value": "25.97"
},
{
"value": "25.28"
},
{
"value": "26.73"
},
{
"value": "23.47"
},
{
"value": "20.55"
},
{
"value": "34.58"
},
{
"value": "29.16"
},
{
"value": "34.97"
},
{
"value": "24.57"
},
{
"value": "20.7"
},
{
"value": "32.61"
}
]
}
]
}In the above data, we've:
- Created the <chart> element, which is the root element of each chart.
- Specified the caption, palette number and asked the chart to use adaptive y-axis lower limits. You can specify a lot more properties for the <chart> element, which have been discussed in the next section.
- Thereafter, we've added the <dataset> element to contain data. Each spark line chart XML can have only one <dataset> element, under which individual data points have been specified using <set value='23.54' />.
For detailed explanation on JSON data format click here.
When you now view the chart, you'll get something as under: