A sparkline is a small graphic with no axis, title, or legend. It can be used inline to quickly give an overview of data while taking up minimal space. Let's see how we can add it to our apps.
In the previous post, we learned how to create a candlestick chart using Kendo UI for Vue. In this post, we will create a sparkline.
Sparklines are small graphics that have no axis, title, or legend. With Kendo UI you can create a sparkline that is a line, bar, column, area, pie, or bullet chart. These charts can be used as inline elements within content to give an overview of the data while taking up minimal space. For example, sparklines can appear within other components like a grid, within a paragraph, or by themselves. Coming up, we will create a couple of sparklines that show stock data.
First, we will initialize our project using the Vue webpack-simple template. We will install the Kendo UI package and a theme. We need to install the charts package to use the Sparklines
component. We will install the DataSource
package because we will be using an API to retrieve our data. The following commands install our packages.
npm install --save @progress/kendo-ui
npm install --save @progress/kendo-theme-default
npm install --save @progress/kendo-charts-vue-wrapper
npm install --save @progress/kendo-datasource-vue-wrapper
In the main.js
file, we import all of the packages. The Chart
and DataSource
are registered globally and added to the component list. The following is the updated file.
import Vue from 'vue'
import App from './App.vue'
import '@progress/kendo-ui'
import '@progress/kendo-theme-default/dist/all.css'
import { Chart, ChartInstaller } from '@progress/kendo-charts-vue-wrapper'
import { DataSource, DataSourceInstaller } from '@progress/kendo-datasource-vue-wrapper'
Vue.use(ChartInstaller)
Vue.use(DataSourceInstaller)
new Vue({
el: '#app',
components: {
Chart,
DataSource
},
render: h => h(App)
})
The data we will be using comes from IEX. We will retrieve one month of stock data for Apple. We will create a sparkline for a column chart and a line chart. We will use a column chart to graph the volume and a line chart to graph the closing price. The DataSource
component will be given a name for the Sparkline
components to reference, a URL which is our API endpoint, and a data type which will be JSON.
Next, we will create two Sparkline
components that include a reference to the data source and a series. In the App.vue
file, the DataSource
and Sparkline
components are added to the template. Last, the series for the sparklines are defined in the data. They are given a type and field.
<template>
<div id="app">
<kendo-datasource
ref="dataSource"
:transport-read-url="'https://api.iextrading.com/1.0/stock/aapl/chart/1m'"
:transport-read-data-type="'json'">
</kendo-datasource>
<p>
Volume
<kendo-sparkline
:data-source-ref="'dataSource'"
:series="seriesA">
</kendo-sparkline>
</p>
<p>
Close
<kendo-sparkline
:data-source-ref="'dataSource'"
:series="seriesB">
</kendo-sparkline>
</p>
</div>
</template>
<script>
export default {
name: 'app',
data () {
return {
seriesA: [{
type: 'column',
field: 'volume'
}],
seriesB: [{
type: 'line',
field: 'close'
}]
}
}
}
</script>
<style>
#app {
font-family: 'helvetica';
margin-top: 60px;
}
</style>
Next, we will add a button group to our page so we can see the one-month, three-month, and six-month data for our stock. When selecting a button the sparklines will update both graphs to show the new data. First, we will install the buttons package so we can use the button group.
npm install --save @progress/kendo-buttons-vue-wrapper
Then, we import the package in the main.js
file, register the component globally, and add it to the component list. This is the updated file:
import Vue from 'vue'
import App from './App.vue'
import '@progress/kendo-ui'
import '@progress/kendo-theme-default/dist/all.css'
import { Chart, ChartInstaller } from '@progress/kendo-charts-vue-wrapper'
import { DataSource, DataSourceInstaller } from '@progress/kendo-datasource-vue-wrapper'
import { ButtonGroup, ButtonGroupButton, ButtonsInstaller } from '@progress/kendo-buttons-vue-wrapper'
Vue.use(ChartInstaller)
Vue.use(DataSourceInstaller)
Vue.use(ButtonsInstaller)
new Vue({
el: '#app',
components: {
Chart,
DataSource,
ButtonGroup,
ButtonGroupButton
},
render: h => h(App)
})
In the App.vue
file, we add three DataSource
components to the template with the reference names dataSource0
, dataSource1
, and dataSource2
. We change the Sparkline
components to reference the dataSource
property that we add to the data. We add a ButtonGroup
to the template with three buttons, initialize the first button to be selected, and add a select event. This is the updated template:
<template>
<div id="app">
<kendo-datasource
ref="dataSource0"
:transport-read-url="'https://api.iextrading.com/1.0/stock/aapl/chart/1m'"
:transport-read-data-type="'json'">
</kendo-datasource>
<kendo-datasource
ref="dataSource1"
:transport-read-url="'https://api.iextrading.com/1.0/stock/aapl/chart/3m'"
:transport-read-data-type="'json'">
</kendo-datasource>
<kendo-datasource
ref="dataSource2"
:transport-read-url="'https://api.iextrading.com/1.0/stock/aapl/chart/6m'"
:transport-read-data-type="'json'">
</kendo-datasource>
<kendo-buttongroup
:index="0"
@select="onSelect">
<kendo-buttongroup-button>1M</kendo-buttongroup-button>
<kendo-buttongroup-button>3M</kendo-buttongroup-button>
<kendo-buttongroup-button>6M</kendo-buttongroup-button>
</kendo-buttongroup>
<p>
Volume
<kendo-sparkline
:data-source-ref="dataSource"
:series="seriesA">
</kendo-sparkline>
</p>
<p>
Closing Price
<kendo-sparkline
:data-source-ref="dataSource"
:series="seriesB">
</kendo-sparkline>
</p>
</div>
</template>
In the data, we add the property dataSource
and initialize it to dataSource0
. The ButtonGroup
is responsible for changing the value of the dataSource
property. We add an onSelect
method for the ButtonGroup
component to the list of methods in the script. This method has the logic to change the value of the dataSource
property based on the selected button. When the first button is selected, we will use the data source with the name dataSource0
. When the second button is selected, we will use the dataSource1
component. And when the third button is selected, we will use the dataSource2
component. This is the updated script:
<script>
export default {
name: 'app',
data () {
return {
dataSource: 'dataSource0',
seriesA: [{
type: 'column',
field: 'volume'
}],
seriesB: [{
type: 'line',
field: 'close'
}]
}
},
methods: {
onSelect: function(e) {
if(e.indices == 0) {
this.dataSource = 'dataSource0'
}
else if(e.indices == 1) {
this.dataSource = 'dataSource1'
} else {
this.dataSource = 'dataSource2'
}
}
}
}
</script>
If you want to take a closer look, this is a link to the project’s repo: https://github.com/albertaw/kendoui-sparkline
A sparkline is a miniature version of a chart. We created two sparklines using data from an API by creating a data source that both sparklines shared and by defining a series for each sparkline. The series needed a chart type and a field to use from the data. Then we added a button group to toggle between different data sources. We created two additional dataSource
components and used the button group’s select event to change which data source the sparklines referenced.
In the next post, we will put together many of the components we have seen to build a dashboard.
Want to start taking advantage of the more than 70+ ready-made Kendo UI components, like the Grid or Scheduler? You can begin a free trial of Kendo UI for Vue today and start developing your apps faster.
Looking for UI component to support specific frameworks? Check out Kendo UI for Angular, Kendo UI for React, or Kendo UI for jQuery.
Alberta is a software developer and writer from New Orleans. Learn more about Alberta at github.com/albertaw.