Data Binding

You can populate the Kendo UI Chart with data by binding it to inline data and binding it to a data source.

Inline Data

You can specify the data points of the Charts as part of the series definitions. The type of the data points depends on the type of the series.

Binding the Chart to arrays of values is the fastest form of data binding where the values are provided as an array for each series. However, you are not allowed to add metadata to the data points and the array will contain only the values which will be plotted.

Binding the Chart to arrays of objects is a more flexible alternative which enables you to configure the fields for each series as they cannot be inferred as is the case with the simple arrays. The major benefit of this approach is that you can associate metadata with the series points. It is also possible to combine the data for many series in a single object.

Binding Categorical Series to Inline Data

Categorical series, such as Bar, Line, or Area, expect a data point of a numeric type. The category names are populated independently in the category axis.

To keep the Chart consistent, all series have to contain the same number of points in an order that matches the order of the categories which are declared in categoryAxis.

    <div id="chart"></div>
    <script>
    $("#chart").kendoChart({
        series: [{
            name: "Series 1",
            type: "column",
            data: [200, 450, 300, 125, 100]
        }, {
            name: "Series 2",
            type: "column",
            data: [210, null, 200, 100, null]
        }],
        categoryAxis: {
            categories: ["Mon", "Tue", "Wed", "Thu", "Fri"]
        }
    });
    </script>

Binding Scatter Series to Inline Data

Scatter series include the two-dimensional Scatter and ScatterLine series. Each data point in the series has to be an array which contains an X and a Y value.

    <div id="chart"></div>
    <script>
    $("#chart").kendoChart({
        series: [{
            name: "Example Series",
            type: "scatterLine",
            data:[[0, 0], [1, 1]]
        }]
    });
    </script>

Binding Categorical Series to Arrays of Objects

You can also supply the Chart with objects and specify fields to which the series will be bound. This approach allows you to access additional fields, for example, in tooltips.

    <div id="chart"></div>
    <script>
    var seriesData = [
        { day: "Mon", sales1: 200, sales2: 210 },
        { day: "Tue", sales1: 450 },
        { day: "Wed", sales1: 300, sales2: 200 },
        { day: "Thu", sales1: 125, sales2: 100 },
        { day: "Fri", sales1: 100 }
    ];

    $("#chart").kendoChart({
        series: [{
            name: "Series 1",
            type: "column",
            data: seriesData,
            field: "sales1"
        }, {
            name: "Series 2",
            type: "column",
            data: seriesData,
            field: "sales2"
        }],
        categoryAxis: {
            categoryField: "day"
        }
    });
    </script>

Binding Scatter Series to Arrays of Objects

To bind a scatter series to an array of objects, the data point has to be an array with X and Y values.

    <div id="chart"></div>
    <script>
    $("#chart").kendoChart({
        series: [{
            name: "Example Series",
            type: "scatterLine",
            data:[[0, 0], [1, 1]]
        }]
    });
    </script>

Data Source

The most powerful form of data binding is to use the Kendo UI DataSource component. The Data Source supports binding to both local and remote data in various formats and using various transport protocols such as JSON, XML, JSONP, and oData. The usage of the DataSource incurs a performance overhead. For more information, refer to the article on performance tips.

Setting the Data Source

The Chart accepts either a DataSource instance or an object with the DataSource options.

    <div id="chart"></div>
    <script>
        var seriesData = [
            { sales: 200 }, { sales: 450 },
            { sales: 300 }, { sales: 125 }
        ];

        $("#chart").kendoChart({
            dataSource:{
                data: seriesData
            },
            series: [{
                field: "sales"
            }]
        });
    </script>

The following example demonstrates how to set the DataSource instance.

    <div id="chart"></div>
    <script>
        var seriesData = [
            { sales: 200 }, { sales: 450 },
            { sales: 300 }, { sales: 125 }
        ];

        var ds = new kendo.data.DataSource({
             data: seriesData
        });

        $("#chart").kendoChart({
            dataSource: ds,
            series: [{
                field: "sales"
            }]
        });
    </script>

Binding to Remote Data

You can bind the Chart to remote data by configuring the DataSource transport which defines the way the DataSource interacts with remote data.

The following example demonstrates how the following JSON string is returned from the /sales service.

[{ "year": "2000", "sales": 200 },
  { "year": "2001", "sales": 450 },
  { "year": "2002", "sales": 300 },
  { "year": "2003", "sales": 125 }]

The following example demonstrates how to bind the data source to this service and sort it by year.

<div id="chart"></div>
<script>
$("#chart").kendoChart({
    dataSource: {
        transport: {
            read: {
                url: "/sales",
                dataType: "json"
            }
        },
        sort: {
            field: "year",
            dir: "asc"
        }
    }
});
</script>

Binding to Grouped Data

The Chart enables you to bind it to grouped data and creates the categories depending on the first group.

All series must contain the same number of points. If a different number of points in the series.categoryField exists, use groups instead of categoryAxis.field.

    <div id="chart"></div>
    <script>
    var data =  [
          { "group": "Group 1", "value": 200, "category": "category 1" },
          { "group": "Group 2", "value": 400, "category": "category 1"  },
          { "group": "Group 3", "value": 500, "category": "category 1"  },
          { "group": "Group 1", "value": 300, "category": "category 2" },
          { "group": "Group 2", "value": 600, "category": "category 4" },
          { "group": "Group 3", "value": 500, "category": "category 2" },
          { "group": "Group 1", "value": 100, "category": "category 3" },
          { "group": "Group 3", "value": 200, "category": "category 4" }]

    $("#chart").kendoChart({
        dataSource: {
            data: data,
            group: {
                field: "group"
            },
            sort: {
                field: "category",
                dir: "asc"
            }
        },
        series: [{
            type: "column",
            field: "value",
            categoryField: "category"
        }]
    });
    </script>

Binding Categorical Series to a Value Field

You can bind categorical series to a value field. The category names are populated independently by binding the category axis.

All series must contain the same number of points in an identical to the category order.

    <div id="chart"></div>
    <script>
    var seriesData = [{
        year: "2000",
        sold: 100,
        produced: 200
    }, {
        year: "2001",
        sold: 250,
        produced: 280
    }];

    $("#chart").kendoChart({
        dataSource: {
            data: seriesData
        },
        series: [{
            name: "Sold",
            field: "sold"
        }, {
            name: "Produced",
            field: "produced"
        }],
        categoryAxis: {
            field: "year"
        }
    });
    </script>

Binding Categorical Series to a Category Field

Categorical series allow you to specify a category field. The category values from all series are concatenated and each point is mapped to its category. The point order is insignificant. Series points are aggregated to produce a single value per category.

    <div id="chart"></div>
    <script>
    var seriesData = [{
        year: "2000",
        sold: 100,
        product: "A"
    }, {
        year: "2001",
        sold: 150,
        product: "A"
    }, {
        year: "2000",
        sold: 200,
        product: "B"
    }];

    $("#chart").kendoChart({
        title: {
            text: "Sales summary"
        },
        dataSource: {
            data: seriesData
        },
        series: [{
            field: "sold",
            categoryField: "year",
            aggregate: "sum"
        }]
    });
    </script>

Binding Scatter Series to a Data Source

To bind the scatter series to a data source, use the fields that are specified as xField and yField.

    <div id="chart"></div>
    <script>
    var xyData = [{
        x: 10, y: 20,
    }, {
        x: 100, y: 200
    } ];

    $("#chart").kendoChart({
        dataSource: {
            data: xyData
        },
        series: [{
            type: "scatter",
            xField: "x",
            yField: "y"
        }]
    });
    </script>

See Also

In this article
Not finding the help you need? Improve this article