Kendo vs SyncFusion vs HighCharts (v4)

Revision 4 of this benchmark created by Dan Liliedahl on January 31, 2015

Description

Preparation HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="//cdn.kendostatic.com/2014.2.716/js/kendo.all.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/globalize/0.1.1/globalize.min.js"></script>
<script src="http://cdn.syncfusion.com/12.1/js/ej.widgets.all.min.js"></script>
<script src="//code.highcharts.com/highcharts.js"></script>

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

Setup

function fibonacciSequenceSF(n) {
      var data = new Array(n);
      data[0] = {
        x: 0,
        y: 1
      };
      data[1] = {
        x: 1,
        y: 1
      };
      for (var i = 2; i < n; i++) {
        data[i] = {
          x: i,
          y: data[i - 1].y + data[i - 2].y
        };
      }
      return data;
    }
    
    function fibonacciSequenceK(n) {
      var data = [1, 1];
      for (var i = 2; i < n; i++) {
        data.push(data[i - 1] + data[i - 2]);
      }
      return data;
    }
    
    function randomPtsK(n, range) {
      var data = [];
      for (var i=0; i<n; i++) {
        data.push(Math.random() * range );
      }
      return data;
    }
    
    function randomPtsSF(n, range) {
      var data = new Array(n);
      for (var i=0; i<n; i++) {
        data[i] = { x: i, y: Math.random() * range }
      }
      return data;
    }
    var ptsK = randomPtsK(2500, 1000);
    var ptsSF = randomPtsSF(2500, 1000);

Test runner

function createChart() {
  $("#chart").kendoChart({
    title: {
      text: "2500 Random Pts"
    },
    series: [{
      data: ptsK
    }],
    tooltip: {
      visible: true
    },
    valueAxis: {
      type: "log",
      minorGridLines: {
        visible: true
      }
    }
  });
}

$(document).ready(createChart);

var model = {
  series: [{
    animation: false,
    name: '2500 Random Pts',
    points: ptsSF,
    type: 'line'
  }],
  title: {
    text: "Chart Test"
  }
};

function createChart() {
  $("#chart").ejChart(model);
};

$(document).ready(createChart);

function createChart() {
  $('#chart').highcharts({
    chart: {
      type: 'line'
    },
    title: {
      text: '2500 Random Pts'
    },
    series: [{
      name: '2500 Random Pts',
      data: ptsK
    }]
  });
};

$(document).ready(createChart);
 

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.

• Revision 2: published on January 30, 2015
• Revision 3: published by Dan Liliedahl on January 30, 2015
• Revision 4: published by Dan Liliedahl on January 31, 2015