Loading
Creating a Spark Line Chart
As an example, we will create a spark line chart that shows the stock price fluctuations.
A spark chart created to show the stock price looks like this:
Given below is a brief description of the attribute used to create a simple spark line chart:
| Attribute Name | Description |
|---|---|
|
It is used to show the numerical value for a point on the spark line chart, e.g. 40.67. This attribute belongs to the |
The data structure needed to create a spark line chart is given below:
{
"chart": {
"caption": "Stock Price",
"subcaption": "Last month",
"canvasleftmargin": "145",
"canvasBottomMargin": "50",
"showBorder": "0",
"bgColor": "#ffffff",
"captionPadding": "7",
"valuePadding": "7",
"numberPrefix": "$"
},
"dataset": [
{
"data": [
{
"value": "38.42"
},
{
"value": "41.43"
},
{
"value": "34.78"
},
{
"value": "40.67"
},
{
"value": "44.12"
},
{
"value": "38.45"
},
{
"value": "40.71"
},
{
"value": "49.90"
},
{
"value": "40.12"
},
{
"value": "34.91"
},
{
"value": "42.02"
},
{
"value": "35.21"
},
{
"value": "43.31"
},
{
"value": "40.21"
},
{
"value": "40.54"
},
{
"value": "40.90"
},
{
"value": "54.21"
},
{
"value": "41.90"
},
{
"value": "33.43"
},
{
"value": "46.73"
},
{
"value": "50.42"
},
{
"value": "40.74"
},
{
"value": "42.31"
},
{
"value": "50.39"
},
{
"value": "51.10"
},
{
"value": "44.84"
},
{
"value": "51.64"
},
{
"value": "47.62"
},
{
"value": "39.61"
},
{
"value": "35.13"
}
]
}
]
}
{
"chart": {
"caption": "Stock Price",
"subcaption": "Last month",
"canvasleftmargin": "145",
"canvasBottomMargin": "50",
"showBorder": "0",
"bgColor": "#ffffff",
"captionPadding": "7",
"valuePadding": "7",
"numberPrefix": "$"
},
"dataset": [
{
"data": [
{
"value": "38.42"
},
{
"value": "41.43"
},
{
"value": "34.78"
},
{
"value": "40.67"
},
{
"value": "44.12"
},
{
"value": "38.45"
},
{
"value": "40.71"
},
{
"value": "49.90"
},
{
"value": "40.12"
},
{
"value": "34.91"
},
{
"value": "42.02"
},
{
"value": "35.21"
},
{
"value": "43.31"
},
{
"value": "40.21"
},
{
"value": "40.54"
},
{
"value": "40.90"
},
{
"value": "54.21"
},
{
"value": "41.90"
},
{
"value": "33.43"
},
{
"value": "46.73"
},
{
"value": "50.42"
},
{
"value": "40.74"
},
{
"value": "42.31"
},
{
"value": "50.39"
},
{
"value": "51.10"
},
{
"value": "44.84"
},
{
"value": "51.64"
},
{
"value": "47.62"
},
{
"value": "39.61"
},
{
"value": "35.13"
}
]
}
]
}<chart caption="Stock Price" subcaption="Last month" canvasleftmargin="145" canvasbottommargin="50" showborder="0" bgcolor="#ffffff" captionpadding="7" valuepadding="7" numberprefix="$">
<dataset>
<set value="38.42" />
<set value="41.43" />
<set value="34.78" />
<set value="40.67" />
<set value="44.12" />
<set value="38.45" />
<set value="40.71" />
<set value="49.90" />
<set value="40.12" />
<set value="34.91" />
<set value="42.02" />
<set value="35.21" />
<set value="43.31" />
<set value="40.21" />
<set value="40.54" />
<set value="40.90" />
<set value="54.21" />
<set value="41.90" />
<set value="33.43" />
<set value="46.73" />
<set value="50.42" />
<set value="40.74" />
<set value="42.31" />
<set value="50.39" />
<set value="51.10" />
<set value="44.84" />
<set value="51.64" />
<set value="47.62" />
<set value="39.61" />
<set value="35.13" />
</dataset>
</chart>There! You have now seen how you can create a simple spark line chart