How to feed a chart with a Kendo Grid?

5 posts, 0 answers
  1. Perry
    Perry avatar
    8 posts
    Member since:
    Apr 2012

    Posted 29 Jun 2012 Link to this post

    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.
  2. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2892 posts

    Posted 04 Jul 2012 Link to this post

    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!
  3. Perry
    Perry avatar
    8 posts
    Member since:
    Apr 2012

    Posted 04 Jul 2012 Link to this post

    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" }
    });
  4. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2892 posts

    Posted 06 Jul 2012 Link to this post

    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!
  5. Perry
    Perry avatar
    8 posts
    Member since:
    Apr 2012

    Posted 06 Jul 2012 Link to this post

    Fair enough.  Thanks for the help.
Back to Top