Using the RadGrid component in combination with RadHTMLChart component

2 posts, 0 answers
  1. Sjoerd
    Sjoerd avatar
    1 posts
    Member since:
    Apr 2015

    Posted 19 Apr 2015 Link to this post

    Dear Telerik,

    For the company I am working for I am looking for a simple and good performing solution for a problem.

    We want to display a grid with filtering next to a chart which displays one or more series based on the data in the grid.

    When the filter is altered the data in the grid, but also the data in the chart should be updated.

    Is it possible to simply connect your RadGrid to RadHTMLChart to get this behaviour?

    And how/can the data be shared between those two components and if so are there limitations?

    I did read that your RadGrid support EntityDataSource and your own ClientDataSource, but I did not see anything about this in the RadHTMLChart component documentation.

    For example if I want to fill the grid with data about cars with these columns: "Brand", "Year" and "Price".
    And next to the grid I wanted to display two charts:
    A pie chart with the number of cars per brand
    A bar graph with the cumulative prices per year per brand.

    Could this be achieved quite easily by setting the data source of the grid to the charts and setting up the series/axis correctly?
    Or is it required to create queries specific for the chart?
    For example for the pie chart of the example should "Brand" and "Number of cars" be selected?

    Hopefully you can answer these questions for me (and have I posted this in the correct forum)

    With kind regards,

    Sjoerd van Loon
    Senior Software Engineer
    Infoland BV
    The Netherlands

  2. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1490 posts

    Posted 22 Apr 2015 Link to this post

    Hi Sjoerd van Loon,

    Generally such an integration is not supported out of the box and should be handled manually. For example attach to a particular event of the grid where you can collect the necessary data and then bind it to the chart. This can be done on the server-side or on the client-side. The chart also supports EntityDataSource as well as client-side data binding. More information on the matter is available in the following demos:
       - http://demos.telerik.com/aspnet-ajax/htmlchart/examples/clientsidedatabinding/defaultcs.aspx
       - http://demos.telerik.com/aspnet-ajax/htmlchart/examples/databinding/entitydatasource/defaultcs.aspx

    You may also find useful this integration of RadHtmlChart with RadPivotGrid (http://demos.telerik.com/aspnet-ajax/pivotgrid/examples/applicationscenarios/chartintegration/defaultcs.aspx) as well as the this blog post (http://blogs.telerik.com/aspnet-ajax/posts/13-12-11/zoom-and-scroll-data-over-time-with-radhtmlchart-for-asp.net-ajax) where are integrated chart, grid and tabstrip controls.

    Regards,
    Danail Vasilev
    Telerik
     

    See What's Next in App Development. Register for TelerikNEXT.

     
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top