Benchmark: Highchart series setData vs update

HTML Preparation code:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="//code.highcharts.com/highcharts.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ramda/0.24.1/ramda.min.js"></script>
<div id="chart" style="width: 500px; height: 500px"></div>

Script Preparation code:

var data = R.range(10000);
var newData = R.range(10000, 20000);

var chart = new Highcharts.Chart({
  chart: {
    renderTo: "chart",
  },  
});

var series = chart.addSeries({
  name: "Test",
  data: data,
});

Tests:

update
series.update({ data: newData });
setData
series.setData(newData);

Historical Performance Data aggregated from 10 community runs

Desktop Results:

Chrome 10 runs

setData

1K/s

update

55/s

Fastest: setData (23.2x faster)

View exact numbers

✓ setData: 1,283 ops/sec
• update: 55 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
update
setData

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/138.0.0.0 Safari/537.36

Browser/OS: Chrome 138 on Mac OS X 10.15.7

View result in a separate tab

setData

1K/s

update

81/s

View exact numbers

Test name	Executions per second
✓ setData	1,440 Ops/sec
update	81 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

LLMs can make mistakes. Check important info.

Let's break down the benchmark and its test cases.

**Benchmark Description**

The provided JSON represents a JavaScript microbenchmark that measures the performance difference between two approaches: updating an existing series data using `series.update()` versus setting new data for the entire series using `series.setData()`. The benchmark is designed to simulate a real-world scenario where data needs to be updated in a Highcharts chart.

**Options Compared**

Two options are compared:

1. **series.update()**: This approach updates the existing data of an existing series. It's like modifying an existing array instead of replacing it with a new one.
2. **series.setData()**: This approach sets new data for the entire series, effectively replacing the existing data.

**Pros and Cons**

* **series.update()**
	+ Pros:
		- More efficient in terms of memory usage, as it doesn't create a new array.
		- May be faster due to fewer DOM mutations ( updates instead of replacement).
	+ Cons:
		- May not work correctly if the series data is very large or complex, leading to performance issues.
* **series.setData()**
	+ Pros:
		- Simple and easy to understand, as it's a straightforward replacement operation.
		- Works well with large datasets, as it avoids memory allocation issues.
	+ Cons:
		- Inefficient in terms of memory usage, as it creates a new array.
		- May be slower due to more DOM mutations (replacing instead of updating).

**Library: Ramda**

The `ramda` library is used in the HTML preparation code. Ramda is a functional programming library that provides a set of reusable functions for common tasks, such as data transformation and filtering. In this benchmark, Ramda's `R.range()` function is used to generate arrays for testing.

**Special JS Feature/Syntax**

None mentioned, but it's worth noting that the benchmark uses ES6-style syntax (`let`, `const`, arrow functions) and modern JavaScript features (e.g., template literals, `var` declaration).

**Alternative Approaches**

Other approaches could be considered:

1. **series.addPoint()**: Adding individual points to the series instead of updating or setting new data.
2. **series.reload()**: Reloading the entire series with new data, which might have different performance implications than updating or setting new data.

These alternative approaches would require additional test cases and considerations to evaluate their performance and practicality in this specific benchmark scenario.

Highchart series setData vs update (version: 0) Benchmark.js

Comparing performance of: `update vs setData`

Created: 9 years ago by: Guest

Go to the latest result

update

setData

Historical Performance Data aggregated from 10 community runs

Desktop Results:

Chrome 10 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

Highchart series setData vs update (version: 0) Benchmark.js

Comparing performance of: update vs setData

Created: 9 years ago by: Guest

Go to the latest result

update

setData

Historical Performance Data aggregated from 10 community runs

Desktop Results:

Chrome 10 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

Related benchmarks

Comparing performance of: `update vs setData`