New to Kendo UI for jQuery? Download free 30-day trial

Apply the Same Data on Different Chart Instances


Product Progress® Kendo UI® DataSource for jQuery


How can I have a single POST from a data source, retrieve all possible data, and then filter the data in different ways for each Kendo UI Chart? When I apply filters or sorting on the data source, they get applied to all charts and other widgets that are attached to the same data source. How can I make those operations independent?


  1. Fetch the data with your own call (for example, $.ajax()).
  2. When you have the data, instantiate the actual widgets and set a new instance of a Kendo UI Data Source to their dataSource field.
  3. Provide the array of data you got from the service to the data field of the data source.
  4. Individually set the desired filters, grouping, or sorting on each data source.
<div id="chart1"></div>
<div id="chart2"></div>
        url: "/myActualEndpoint"
    }).always(function(realData) { //this uses always for the demo, use real code

        // In a real use-case scenario, you will get the real data here. This example hardcodes some
        // to demonstrate how to have independent data sources in the Charts based on remote data from a controller.

        var myData = [{
            field1: 10,
            field2: 3
        }, {
            field1: 20,
            field2: 7
        }, {
            field1: 15,
            field2: 6


    function createCharts(theData) {

            dataSource: new{
                data: theData,
                sort: [{ // apply desired data source operations
                        field: "field1",
                        dir: "desc"
            series: [{
                field: "field1"

            dataSource: new{
                data: theData,
                filter: { // apply desired data source operations
                    filters: [{
                        field: "field2",
                        operator: "gt",
                        value: 5
            series: [{
                field: "field2"
In this article