How to feed a chart with a Kendo Grid?

[Perry]

I have a Kendo UI Grid on my page that is being fed from the server.  What is the best way to have a chart that uses the same data as the grid without having to do another trip to the server and have the chart update as the user changes numbers in the grid?  Examples are really appreciated.

[Alexander Valchev]

Hi Perry,

To achieve this I would suggest using a shared dataSource. Every time an item is edited, the dataSource change event will fire which will cause all widgets bound to that dataSource to rebind (refresh). You can see this approach in action at the following links:

• Shared dataSource demo
• JsFiddle example

Please note that autoBind property of the widgets (chart and grid) is set to false, this is done to avoid the extra network requests.

I hope this helps.

Regards,
Alexander Valchev
the Telerik team

[Perry]

That works great.  Thank you for the help.  I do have one more question, I need to sort the shared datasource differently for my graph than for my grid.  I attempted to do the following for my chart initialization but my chart is now blank.  Do you have any ideas?
 

$('#lfChart').kendoChart({

    title: {text: "LF Bump Steer"},

    dataSource: sharedDatasource.sort({ field: 'BumpL' }),

    series: [{

        type: "line",

        field: "ShockTravel",

        name: "Shock Travel (in.)"

    }],

    categoryAxis: { field: "BumpL" },

    legend: { position:"bottom" }

});

[Alexander Valchev]

Hi Perry,

I am afraid that this scenario is not possible - when the dataSource is shared, any data operations such as sorting, filtering, reading, updating, etc. will affect both on the chart and the grid.
The chart is blank, because you are using a unsupported syntax. if you want to sort the dataSource you have to do that:

•  in the configuration:

sharedDataSource: new kendo.data.DataSource({
    //....
    sort: { field: "FieldName", dir: "asc" }
})

• by referencing the dataSource object

$("#chart").data("kendoChart")
    .dataSource.sort({field: "FieldName", dir:"asc"})

Kind regards,
Alexander Valchev
the Telerik team

[Perry]

Fair enough.  Thanks for the help.