All Components

Data Binding

The Chart populates its data through binding to local, remote, and grouped data.

Binding to Local Data Arrays

The Chart provides built-in data binding capabilities for displaying data from a local data storage through the data-source property of the Chart.

<div id="vueapp" class="vue-app">
    <kendo-chart :data-source="dataSourceArray"
                 :series="series"
                 :theme="'sass'">
    </kendo-chart>
</div>
Vue.use(ChartInstaller);

new Vue({
    el: "#vueapp",
    data: function() {
        return {
            dataSourceArray: [{
                price: 10
            }, {
                price: 20
            }, {
                price: 30
            }],
            series: [{ field: "price" }]
        }
    }
})

Binding to Remote Data Services

To initialize and populate the Chart with data by binding it to a remote data service:

  1. Specify a remote endpoint or web service (REST) which returns data in a JSON/JSONP format.
  2. Utilize the Kendo UI Data Source component between the Chart and the underlying data.

To make the connection to the remote endpoint and process the data properly, the DataSource requires the following information:

  • URLs of the web service.
  • Request type.
  • Response data type.
  • Structure (schema) of the response (if more complex than a plain array of objects).
<div id="vueapp" class="vue-app">
    <kendo-datasource ref="datasource"
                      :transport-read-data-type="'jsonp'"
                      :transport-read-url="'https://demos.telerik.com/kendo-ui/service/stockdata'">
    </kendo-datasource>
    <kendo-chart :data-source-ref="'datasource'"
                 :series="series"
                 :theme="'sass'">
    </kendo-chart>
</div>
Vue.use(ChartInstaller);
Vue.use(DataSourceInstaller);

new Vue({
    el: "#vueapp",
    data: function() {
        return {
            series: [{ field: "Volume" }]
        }
    }
})

Binding to Grouped Data

You can also bind the Chart to grouped data by using the Kendo UI Data Source as a mediator.

<div id="vueapp" class="vue-app">
    <kendo-datasource ref="datasource"
                      :data="dataSourceArray"
                      :group-field="'category'">
    </kendo-datasource>
    <kendo-chart :data-source-ref="'datasource'"
                 :series="series"
                 :theme="'sass'">
    </kendo-chart>
</div>
Vue.use(ChartInstaller);
Vue.use(DataSourceInstaller);

new Vue({
    el: "#vueapp",
    data: function() {
        return {
            dataSourceArray: [
                { value: 1, category: 'One', title: 'Series One' },
                { value: 2, category: 'Two', title: 'Series Two' }
            ],
            series: [{
                field: 'value',
                name: "Category: #: group.items[0].title #"
            }]
        }
    }
})
In this article