Highcharts update vs new chart (v10)

Revision 10 of this benchmark created on

Preparation HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="//code.highcharts.com/highcharts.js"></script>
<script src="//code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="height: 400px"></div>

Setup

var empty_data = [{
          name: 'mnf1',
          data: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
        }, {
          name: 'mnf2',
          data: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
        }, {
          name: 'mnf3',
          data: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
        }, {
          name: 'mnf4',
          data: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
        }, {
          name: 'mnf5',
          data: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
        }, {
          name: 'mnf6',
          data: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
        }, {
          name: 'mnf7',
          data: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
        }, {
          name: 'mnf8',
          data: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
        }, {
          name: 'mnf9',
          data: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
        }, {
          name: 'mnf10',
          data: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
        }, {
          name: 'mnf11',
          data: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
        }, {
          name: 'mnf12',
          data: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
        }, {
          name: 'mnf13',
          data: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
        }];
    
    
    
        var options = {
          chart: {
            renderTo: 'container',
            type: 'spline',
            backgroundColor: 'transparent'
          },
          animation: {
            enabled: false
          },
          title: {
            text: null
          },
          credits: {
            enabled: false
          },
          legend: {
            enabled: false
          },
          tooltip: {
            enabled: true
          },
          exporting: {
            enabled: false
          },
          yAxis: {
            labels: {
              enabled: true,
              formatter: function() {
                return this.value / 1000000 + ' M€';
              }
            },
            title: {
              text: null
            }
          },
          series: empty_data
        };
        var chart;

Teardown


    chart.destroy();

Test runner

Ready to run.

Testing in
TestOps/sec
new chart
chart = new Highcharts.Chart(options);
chart.destroy();
options.series[0].data = b;
options.series[1].data = a;
chart = new Highcharts.Chart(options);
ready
update
chart = new Highcharts.Chart(options);

for (i = 0; i < chart.series.length; i++) {
  chart.series[i].setData(empty_data[i].data);
  chart.series[i].update({
    name: empty_data[i].name
  }, false);
}

chart.redraw();
ready

Revisions

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