chart showing all data points, grid showing pages

2 posts, 0 answers
  1. Wyatt
    Wyatt avatar
    22 posts
    Member since:
    Aug 2012

    Posted 20 Feb 2015 Link to this post

    I have a large set of data I want to show in a scatter graph 20,000+ records. I also show a grid of the values to the side.  Currently I am bringing all the records back to the client side and binding them to the chart and grid.  I have a need to only bring back 10 records at a time and use paging on the grid for performance.

    What is the best way to bring back (show) all the data points on the chart, but only a subset for the grid to maintain the best client performance.

    Or do I need to switch to ASP.NET Ajax or MVC controls?

    Thanks
    Wyatt
  2. T. Tsonev
    Admin
    T. Tsonev avatar
    2817 posts

    Posted 24 Feb 2015 Link to this post

    Hi,

    The solution will depend on whether you need to edit the data on the client.
    The scenario with read-only data allows for the some optimizations.

    My suggestion is to get all the data on the client using a simple $.ajax call.
    The series can be bound directly to the incoming array in order to avoid the overhead of creating observable objects.
    $.ajax("url").done(function(data) {
      createChart(data);
      createGrid(data);
    });


    function createChart(data) {
    $("#chart").kendoChart({
      // Slight performance boost, but will reduce interactivity
      renderAs: "canvas",

      series: [{
        data: data,
        ...
      }]
    });
    }


    The Grid can then define its own data source based on the same data, but with paging enabled:
    function createChart(data) {
    $("#grid").kendoGrid({
      dataSource: {
        data: data,
        pageSize: 10,
        ...
      }
    });
    }


    Using a back-end, be it MVC or WebForms won't make any difference as the chart will still be rendered on the client.
    It would matter if you generate the chart server-side, but this is not within the scope of the Kendo UI widgets.

    I hope this helps.

    Regards,
    T. Tsonev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top