chart showing all data points, grid showing pages

[Wyatt]

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

[T. Tsonev]

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