This is a migrated thread and some comments may be shown as answers.

How to feed a chart with a Kendo Grid?

4 Answers 174 Views
Charts
This is a migrated thread and some comments may be shown as answers.
Perry
Top achievements
Rank 1
Perry asked on 29 Jun 2012, 06:31 PM
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.

4 Answers, 1 is accepted

Sort by
0
Alexander Valchev
Telerik team
answered on 04 Jul 2012, 08:45 AM
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:
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Perry
Top achievements
Rank 1
answered on 04 Jul 2012, 12:31 PM
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" }
});
0
Alexander Valchev
Telerik team
answered on 06 Jul 2012, 11:28 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Perry
Top achievements
Rank 1
answered on 06 Jul 2012, 01:39 PM
Fair enough.  Thanks for the help.
Tags
Charts
Asked by
Perry
Top achievements
Rank 1
Answers by
Alexander Valchev
Telerik team
Perry
Top achievements
Rank 1
Share this question
or