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);

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: 29 days ago)

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

Browser/OS: Chrome 127 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
update	89.6 Ops/sec
setData	2055.6 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated 2 months 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.

Related benchmarks:

Highchart series setData vs update (version: 0)

Comparing performance of: update vs setData

Created: 7 years ago by: Guest

Jump to the latest result

update

setData

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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