Kendo UI

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.

Getting Started

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)
})

Adding the Sparklines

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.

Sparkline

<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>

Adding a ButtonGroup

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:

Sparkline

<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

Summary

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.

Resources

Try Out Kendo UI for Yourself

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.

Start My Kendo UI Trial

Angular, React, and jQuery Versions

Looking for UI component to support specific frameworks? Check out Kendo UI for Angular, Kendo UI for React, or Kendo UI for jQuery.


Alberta Williams
About the Author

Alberta Williams

Alberta is a software developer and writer from New Orleans. Learn more about Alberta at github.com/albertaw.

Related Posts

Comments

Comments are disabled in preview mode.