Kendo chart performance issue

Question

I am working on kendo chart. I am loading 30k data on the chart. You can see in the code I have attached that, when I zoom in and out with mouse scroll, the process becomes very slow. Is it possible to reduce time of execution for each processes? And also first time loading of the chart is also very slow.

I want to know that is 30k data on Kendo chart should be loaded? Is there any limit that Kendo has set for data loading on the chart?

var Chartdata = [];

function createChart() {
  $("#chart").kendoChart({
    dataSource: {
      data: Chartdata
    },
    series: [{
      type: "scatterLine",
      xField: "date",
      yField: "close"
    }, {
      type: "scatterLine",
      xField: "date",
      yField: "volume"
    }, {
      type: "scatterLine",
      xField: "date",
      yField: "high"
    }, {
      type: "scatterLine",
      xField: "date",
      yField: "low"
    }, {
      type: "scatterLine",
      xField: "date",
      yField: "open"
    }, {
      type: "scatterLine",
      xField: "date",
      yField: "symbol"
    }],
    xAxis: {
      name: "Date",
      baseUnit: "minutes",
      BaseUnitSteps: {
        second: [1]
      },
      labels: {
        visible: true,
        step: 50,
        font: "8px Arial,Helvetica,sans-serif",
        template: "#= kendo.toString(new Date(value), 'MM/dd/yyyy HH:mm:ss') #"
      },
      majorUnit: 1,
      majorTickType: "none",
      majorGridLines: {
        step: 5,
      },
      minorGridLines: {
        visible: true,
        step: 1,
      },
      minorTickType: "none",
      majorTickType: "none",
    },
    yAxis: {
      majorUnit: 25,
      majorTickType: "none",
      majorGridLines: {
        step: 1,
      },
      minorGridLines: {
        visible: true,
        step: 1,
      },
      minorTickType: "none",
      majorTickType: "none",
    },
    transitions: false,
    zoomable: {
      mousewheel: {
        lock: "y"
      },
      selection: {
        lock: "y"
      }
    },
    zoom: setRange,
  }).data("kendoChart");
}

function setRange(e) {
  var chart = e.sender;
  var options = chart.options;
  e.originalEvent.preventDefault();
  var xRange = e.axisRanges.Date;
  if (xRange) {
    var xMinonzoom = xRange.min;
    var xMaxonzoom = xRange.max;
    var dMaxonzoom = new Date(xMaxonzoom.getYear(), xMaxonzoom.getMonth(), xMaxonzoom.getDay(), xMaxonzoom.getHours(), xMaxonzoom.getMinutes(), xMaxonzoom.getSeconds());
    var dMinonzoom = new Date(xMinonzoom.getYear(), xMinonzoom.getMonth(), xMinonzoom.getDay(), xMinonzoom.getHours(), xMinonzoom.getMinutes(), xMinonzoom.getSeconds());
    var diff = dMaxonzoom - dMinonzoom;
    if (xMaxonzoom - xMinonzoom < 10) {
      return;
    }
    options.xAxis.min = xMinonzoom;
    options.xAxis.max = xMaxonzoom;
    chart.refresh();
  }
}

$(document).ready(function() {
  $.ajax({
    type: "GET",
    cache: true,
    url: "https://api.myjson.com/bins/1uan0",
    async: false
  }).success(function(result) {
    var dataresult = result;
    $(dataresult).each(function(e, data) {
      Chartdata.push({
        "date": new Date(Date.parse(data.date)),
        "close": data.close,
        "volume": data.volume,
        "high": data.high,
        "low": data.low,
        "open": data.open,
        "symbol": data.symbol
      });
    });
    createChart();
  });
});

#chart circle {
  display: none;
}

<link href="http://cdn.kendostatic.com/2015.1.318/styles/kendo.mobile.all.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2015.1.318/styles/kendo.common.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://kendochart.webashlar.com/kendochart/Javascripts/kendo.all.min.js"></script>


<div id="chart"></div>

Thank you

Answer 1

I have created a dojo for you so hopefully this points you to the right direction.

Chart Dojo

All I have done is added in some simple filtering so that based on the min and max zoom you have selected for the grid it will only call those items into the datasource for you rather than the entire dataset.

This is achieved via this bit of code:

 var datasource = chart.dataSource; 
    console.log("DataSource Total before Filtering is:: " + datasource.total());
    datasource.filter(); 
    datasource.filter([{field:"date", operator:"gte",value : xMinonzoom }, {field:"date", operator: "lte", value:xMaxonzoom}]); 
    console.log("DataSource Total after Filtering is:: " + datasource.total());

So this shows you the effect the filtering is having on the data source you are returning back.

If you wanted to speed things up further you could potentially look at grouping for larger data sets i.e. when you first load the grid up as the data to me at that point is just noise (in my opinion) and is not really meaningful to me (but it maybe in your use case).

Think how mapping works with instances zoomed out summarized as a number rather than trying to show all the individual data points until you start zooming in and seeing the data individually.

If you need more info then let me know and I will expand the answer/ provide more info if I can.