Binding a chart to a DataSource object

A Kendo chart widget can be bound to a DataSource object. This DataSource object can be local or remoteDataSource. When using a DataSource object, the series and configurationAxis fields must be configured to refer to the fields in the DataSource object.

How to do it…

Let's first create a local DataSource object, which will then be used to construct the chart:

var chromeBrowser = [{
    'year': 2008,
    'percentage': 0
}, {
    'year': 2009,
    'percentage': 4
}, {
    'year': 2010,
    'percentage': 15
}, {
    'year': 2011,
    'percentage': 26
}, {
    'year': 2012,
    'percentage': 40
}, {
    'year': 2013,
    'percentage': 52
}, {
    'year': 2014,
    'percentage': 56
}];

The next step is to specify the preceding code as a DataSource reference when constructing the chart:

$("#chart").kendoChart({
    dataSource: {
        data: chromeBrowser
    },
    title: {
        text: 'Chrome Browser adoption',
        position: 'bottom'
    },
    theme...