JavaScript charts performance comparison - line charts ...

[Pages:16]JavaScript Charts Performance Comparison / Line Charts

Test date May 5th, 2021

Foreword

This is a performance test / comparison of JavaScript charts. The tests are focusing on line charts' realtime performance, initial rendering delay, RAM consumption and JavaScript thread blocking time. The charts selected in this test, are the major manufacturers who claim their charts to be highperformance oriented or the fastest, and some open-source libraries. There are also other charts available, which are either end-of-life, not supported anymore, or simply don't work. They were excluded. We are confident we have selected all the fastest charts in the comparison, and if we did not, inform us to get it added in this test. The bias in this test is in progressive line charts, needed typically in medical applications (ECG / EEG / ExG), seismography, telemetry, industrial automation, vibration research and audio engineering, and real-time trading data applications.

1(16)

Test procedure

The test project is published as open-source project in Github.

The goal was to create a scrolling line chart. Data is appended to the tail of the line series, and X axis then scrolled to show the new data, and make the oldest data fall out. The tests were made according to examples and tutorials and contacting manufacturers' support teams whenever available. We strongly believe all of them have been made in optimal way for all of them, and if you notice any problem or wrong configuring of them, please contact us for a fix. The appearances of the chart were set to simplistic, and line series stroke widths were set to 2 pixels wide, which is a typical value for line charts.

2(16)

Test hardware setups

The test was carried out with the following setups. 1. Fast desktop PC: ? CPU: AMD Ryzen 9 5900X processor ? GPU: Nvidia GeForce RTX 3080 ? RAM 16 GB ? 2560 x 1440 resolution, 165 Hz 2. Low-end desktop PC: ? CPU: AMD Ryzen 5 2600 Six-core processor ? GPU: NVIDIA GeForce GTX 1050 Ti ? RAM: 8 GB ? 1920x1080 Full-HD resolution, 60 Hz

3. Low-end business laptop, with touch-screen, Lenovo Yoga ? CPU: Intel Core i7-8550U CPU 1,80 GHz ? GPU: Intel UHD Graphics 620 ? RAM: 8 GB ? 1920x1080 Full-HD resolution, 60 Hz

3(16)

Tested chart libraries (in no particular order)

? LightningChart? JS 3.0.0 ? AmCharts v.4 ? ZingChart 2.9.3 ? HighChart (Boost module enabled) v.9.1.0 ? DvxCharts v.5.0.0.0 ? Dygraphs v.2.1.0 ? ?Plot v.1.6.8 ? AnyChart v. 8.9.0 ? ECharts v.5 ? Plotly.js v.1.58.4 ? SciChart JS v.1.4.1578 ? Canvas.js v.3.2.16

What did we measure?

1. Initial rendering delay The required time for rendering the immediately displayed data set (full X axis view). It does not include time required for initializing chart or series. Smaller delay is better.

2. FPS Frames Per Second is the true performance indicator. How many times per second the chart refreshes. Higher the value, the more pleasant it is to the eye. Low frame rate causes stutter/twitching/jerking. Even with high frame rate, the twitching can be observed in most of the libraries, therefore high FPS + stable refresh interval provides the smoothest visual experience.

4(16)

3. Timeout delay The delay the chart updates is blocking the JavaScript event queue. Smaller the better.

4. Heap Size (MB) Memory requirement from Browser's heap. This can be important if having several charts in the same application, and memory is needed for other purposes.

Results

The results were output to Google Chrome browser Console, and constructed into CSV data, and imported to Excel. The green color represents good value, yellow mediocre, and red... it indicates either slowness or bright red a fail. The FPS rates are visualized with bars inside the cells, too.

5(16)

High-end desktop:

Test

Library

LightningChart? JS

Competitor A

Competitor B

Competitor C

Competitor D

1ch 1000 dp/s

Competitor E Competitor F

Competitor G

Competitor H

Competitor I

Competitor J

Competitor K

LightningChart? JS

Competitor A

Competitor B

Competitor C

Competitor D

1ch 10000 dp/s

Competitor E Competitor F

Competitor G

Competitor H

Competitor I

Competitor J

Competitor K

LightningChart? JS

Competitor A

Competitor B

Competitor C

Competitor D

10ch 10000 dp/s Competitor E Competitor F

Competitor G

Competitor H

Competitor I

Competitor J

Competitor K

LightningChart? JS

Competitor A

Competitor B

Competitor C

Competitor D

10ch 100000 dp/s Competitor E Competitor F

Competitor G

Competitor H

Competitor I

Competitor J

Competitor K

LightningChart? JS

Competitor A

Competitor B

Competitor C

Competitor D

20ch 100000 dp/s Competitor E Competitor F

Competitor G

Competitor H

Competitor I

Competitor J

Competitor K

LightningChart? JS

Competitor A

Competitor B

Competitor C

Competitor D

10ch 500000 dp/s Competitor E Competitor F

Competitor G

Competitor H

Competitor I

Competitor J

Competitor K

LightningChart? JS

Competitor A

Competitor B

Competitor C

Competitor D

10ch

1000000

dp/s

Competitor Competitor

E F

Competitor G

Competitor H

Competitor I

Competitor J

Competitor K

Initial rendering delay (ms) FPS avg

Smaller is better

Bigger is better

28

66

16

32

57

10

26

10

28

53

219

224

23

65

42

61

89

42

49

31

46

119

305

485

34

61

167

150

288

58

94

143

153

539

555

1719

989

1934

FAIL

FAIL

2336

13949

FAIL

FAIL

FAIL

FAIL

FAIL

FAIL

FAIL

FAIL

FAIL

FAIL

FAIL

FAIL

FAIL

FAIL

FAIL

2136

2301

FAIL

FAIL

4020

FAIL

FAIL

FAIL

FAIL

FAIL

FAIL

FAIL

FAIL

FAIL

FAIL

FAIL

FAIL

FAIL

FAIL

FAIL

FAIL

1083

FAIL

FAIL

FAIL

FAIL

FAIL

FAIL

FAIL

FAIL

FAIL

FAIL

FAIL

FAIL

FAIL

FAIL

FAIL

FAIL

FAIL

FAIL

FAIL

FAIL

FAIL

FAIL

1174

FAIL

FAIL

FAIL

FAIL

FAIL

FAIL

FAIL

FAIL

FAIL

FAIL

FAIL

FAIL

FAIL

FAIL

FAIL

FAIL

FAIL

FAIL

FAIL

FAIL

FAIL

FAIL

Timeout delay avg (ms) Heap size avg (MB)

Smaller is better

Smaller is better

164.1

5

24

164.9

6

100

164

6

23

129.5

8

57

24.9

49

17

160.6

8

11

42.6

24

23

153.2

7

14

52.7

22

56

163.7

5

17

6.2

346

12

124.3

8

26

164.7

5

22

163.9

6

106

88.6

21

52

98.3

12

77

20.3

78

25

86.3

15

11

40.8

25

37

72.2

14

38

17.5

105

88

119.9

7

58

5

441

15

7.3

136

570

164.7

5

29

141

15

123

15.1

128

154

28.6

34

879

8.9

250

144

39.5

36

13

20.6

50

110

14.5

79

76

4.3

784

327

0.7

585

76

3

699

29

1.5

819

188

162.2

5

927

4.6

624

832

FAIL

FAIL

7.5

145

1413

12941

1972

FAIL

FAIL

FAIL

FAIL

FAIL

FAIL

FAIL

FAIL

FAIL

FAIL

FAIL

FAIL

FAIL

FAIL

154.4

5

1810

2

1368

1333

FAIL

FAIL

6

176

1806

FAIL

FAIL

FAIL

FAIL

FAIL

FAIL

FAIL

FAIL

FAIL

FAIL

FAIL

FAIL

FAIL

FAIL

FAIL

FAIL

144.6

6

1271

FAIL

FAIL

FAIL

FAIL

FAIL

FAIL

FAIL

FAIL

FAIL

FAIL

FAIL

FAIL

FAIL

FAIL

FAIL

FAIL

FAIL

FAIL

FAIL

FAIL

FAIL

FAIL

70.2

20

1333

FAIL

FAIL

FAIL

FAIL

FAIL

FAIL

FAIL

FAIL

FAIL

FAIL

FAIL

FAIL

FAIL

FAIL

FAIL

FAIL

FAIL

FAIL

FAIL

FAIL

FAIL

FAIL

6(16)

FPS rates of different charts with different data rates, high-end desktop. Empty bar means: unable to render, fail.

7(16)

Low-end desktop:

Test

Library

1ch 1000 dp/s 1ch 10000 dp/s 10ch 10000 dp/s 10ch 100000 dp/s 20ch 100000 dp/s

LightningChart? JS Competitor A Competitor B Competitor C Competitor D Competitor E Competitor F Competitor G Competitor H Competitor I Competitor J Competitor K LightningChart? JS Competitor A Competitor B Competitor C Competitor D Competitor E Competitor F Competitor G Competitor H Competitor I Competitor J Competitor K LightningChart? JS Competitor A Competitor B Competitor C Competitor D Competitor E Competitor F Competitor G Competitor H Competitor I Competitor J Competitor K LightningChart? JS Competitor A Competitor B Competitor C Competitor D Competitor E Competitor F Competitor G Competitor H Competitor I Competitor J Competitor K LightningChart? JS Competitor A Competitor B Competitor C Competitor D Competitor E Competitor F Competitor G Competitor H Competitor I Competitor J Competitor K

Initial rendering delay FPS avg

Timeout delay avg (ms) Heap size avg (MB)

(ms)

Bigger is better

Smaller is better

Smaller is better

Smaller is better

47

60.1

5

19

70

60.1

7

94

23

60.2

6

16

60

59

10

35

76

29.7

42

12

51

60

6

4

35

48.8

21

12

19

59.8

7

8

45

42.1

29

43

104

59.7

6

13

109

19.8

118

8

367

57.9

14

21

43

60.3

5

17

81

60.3

9

104

77

55.8

21

41

109

54.6

17

45

138

21.3

94

24

34

59.8

10

5

60

48.2

20

23

55

56.4

18

22

77

12.1

194

74

210

15.3

27

56

226

10.2

196

10

733

3.1

391

52

74

60.2

5

181

70

49.8

40

119

308

8.5

213

131

273

16.3

60

42

482

5.3

525

111

113

31.9

49

8

159

17.9

57

73

206

9.3

125

67

261

2.2

1441

252

980

FAIL

797

108

663

2.8

682

35

2849

1.5

738

73

2520

55.1

6

907

1424

1.9

1465

765

FAIL

FAIL

FAIL

FAIL

3340

4.3

275

1031

FAIL

FAIL

FAIL

FAIL

FAIL

FAIL

FAIL

FAIL

FAIL

FAIL

FAIL

FAIL

FAIL

FAIL

FAIL

FAIL

FAIL

FAIL

FAIL

FAIL

FAIL

FAIL

FAIL

FAIL

FAIL

FAIL

FAIL

FAIL

FAIL

FAIL

FAIL

FAIL

4812

49

20

1409

2500

0.8

3209

1246

FAIL

FAIL

FAIL

FAIL

FAIL

FAIL

FAIL

FAIL

FAIL

FAIL

FAIL

FAIL

FAIL

FAIL

FAIL

FAIL

FAIL

FAIL

FAIL

FAIL

FAIL

FAIL

FAIL

FAIL

FAIL

FAIL

FAIL

FAIL

FAIL

FAIL

FAIL

FAIL

FAIL

FAIL

FAIL

FAIL

FAIL

FAIL

FAIL

FAIL

8(16)

 ................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download