HighStock vs jqChart

Benchmark created by shawjia on November 30, 2012

Preparation HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
<script src="//code.highcharts.com/stock/highstock.js">
</script>
<script src="//www.jqchart.com/samples/Scripts/jquery-ui-1.8.20.custom.min.js">
</script>
<script src="//www.jqchart.com/samples/Scripts/jquery.jqRangeSlider.min.js">
</script>
<script src="//www.jqchart.com/samples/Scripts/jquery.jqChart.min.js">
</script>
<link rel="stylesheet" type="text/css" href="http://www.jqchart.com/samples/Content/jquery.jqChart.css">
<link rel="stylesheet" type="text/css" href="http://www.jqchart.com/samples/Content/jquery.jqRangeSlider.css">
<link rel="stylesheet" type="text/css" href="http://www.jqchart.com/samples/Content/themes/le-frog/jquery-ui-1.8.20.css">
<!--[if IE]>
  <script lang="javascript" type="text/javascript" src="/samples/Scripts/excanvas.js">
  </script>
<![endif]-->
<div id="chart1">
</div>
<div id="chart2">
</div>

Setup

function round(d) {
      return Math.round(100 * d) / 100;
    }
    
    var ohlcData = [];
    var ohlcData2 = [];
    
    var volumeData = [];
    
    var date = new Date(2010, 0, 1);
    
    var high = Math.random() * 40;
    var close = high - Math.random();
    var low = close - Math.random();
    var open = (high - low) * Math.random() + low;
    
    ohlcData.push([date, round(high), round(low), round(open), round(close)]);
    
    var volume = 100 + 15 * Math.random();
    volumeData.push([date, round(volume)]);
    
    for (var day = 2; day <= 60; day++) {
    
      date = new Date(2010, 0, day);
    
      high = open + Math.random();
    
      close = high - Math.random();
      low = close - Math.random();
      var oldOpen = open;
      open = (high - low) * Math.random() + low;
    
      if (low > oldOpen) {
        low = oldOpen;
      }
    
      ohlcData.push([date, round(high), round(low), round(open), round(close)]);
    
      ohlcData2.push([+date, round(open), round(high), round(low), round(close)])
    
      volume = volume + 10 * Math.random() - 5;
    
      volumeData.push([date, round(volume)]);
    }

Test runner

$(function() {
  new Highcharts.StockChart({
    chart: {
      renderTo: 'chart1'

    },
    series: [{
      type: 'candlestick',
      name: 'K线图',
      data: ohlcData2,
      id: 'stock_candle',
    }]

  });
});

$(function() {
  $('#chart2').jqChart({
    series: [{
      title: 'Price Index',
      type: 'candlestick',
      data: ohlcData,
      priceUpFillStyle: 'white',
      priceDownFillStyle: 'black',
      strokeStyle: 'black'
    }]
  });
});

Revisions

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

• Revision 1: published by shawjia on November 30, 2012