You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+37-54Lines changed: 37 additions & 54 deletions
Original file line number
Diff line number
Diff line change
@@ -19,32 +19,46 @@ The demo can be used as an example or a seed project. Local execution requires t
19
19
20
20
## Description
21
21
22
-
This example plots a million data points using progressive line series.
22
+
This example plots a million data points in an instant using line series.
23
23
24
-
## Progressive series
24
+
## Progressive data optimizations
25
25
26
-
Progressive series are highly optimized series for the rendering of high-volume and high-density data while keeping full interactivity.
27
-
These optimizations are enabled by selecting a ***DataPattern***, which needs to be specified during the creation of the series instance and cannot be changed further for performance related reasons.
26
+
By default, `LineSeries` can take list of XY coordinates in any order, connecting them with a line stroke.
27
+
However, in a lot of applications, the input data comes in a distinct order, for example, X coordinates describe a timestamp which increases between each consecutive data point. We refer to this as a *progressive data pattern*.
28
28
29
-
The ***DataPatterns***-collections object contains all different directions for progressive data patterns:
30
-
- Select ***DataPatterns.horizontalProgressive*** to handle horizontal progressive datasets efficiently.
31
-
- Select ***DataPatterns.horizontalRegressive*** to handle horizontal regressive datasets efficiently.
32
-
- Select ***DataPatterns.verticalProgressive*** to handle vertical progressive datasets efficiently.
33
-
- Select ***DataPatterns.verticalRegressive*** to handle vertical regressive datasets efficiently.
29
+
`LineSeries` is coupled together with highly sophisticated optimizations that can be enabled in applications where input data follows a *data pattern*. This example showcases the `'ProgressiveX'`*pattern*.
34
30
35
-
```javascript
36
-
// Create line series optimized for horizontally progressive data.
37
-
constseries=chart.addLineSeries(
38
-
// Using the DataPatterns object to select the certain pattern for the line series.
*Data pattern* must be specified when the *series* is created:
34
+
35
+
```typescript
36
+
// Create LineSeries with 'ProgressiveX' data pattern.
37
+
const series =ChartXY.addLineSeries({
38
+
dataPattern: {
39
+
// pattern: 'ProgressiveX' => Each consecutive data point has increased X coordinate.
40
+
pattern: 'ProgressiveX',
41
+
// regularProgressiveStep: true => The X step between each consecutive data point is regular (for example, always `1.0`).
42
+
regularProgressiveStep: true,
43
+
}
44
+
})
41
45
```
42
46
43
-
**NOTE #1:**
47
+
Available *data patterns* are:
48
+
-`'ProgressiveX'`: Each consecutive data point has increased X coordinate.
49
+
-`'ProgressiveY'`: Each consecutive data point has increased Y coordinate.
50
+
-`'RegressiveX'`: Each consecutive data point has decreased X coordinate.
51
+
-`'RegressiveX'`: Each consecutive data point has decreased Y coordinate.
52
+
53
+
The pattern of data can be identified even further with the optional `regularProgressiveStep` property.
54
+
This can be enabled when the *progressive step* (for example, `'ProgressiveX'` -> X step) between each data point is regular, leading to even more significant optimizations.
44
55
45
-
The series created based on specified ***DataPattern*** is highly optimized **only** for the selected pattern. We do not recommend to provide data that contradict with specified ***DataPattern***.
56
+
### Side-effects and good to know
46
57
47
-
**NOTE #2:**
58
+
When a series is configured with a *data pattern*, the rendering process makes logical deductions and ssumptions on the user input data, according to the *data pattern* specification. **If the supplied input data does not follow the specification, rendering errors or even crashes can occur.** If you run into strange issues, first see if disabling the *data pattern* helps, or if your input data is somehow invalid.
59
+
60
+
61
+
## Automatic Axis scrolling
48
62
49
63
The scrolling of data in progressive series can also be automated and optimized by specifying ***ScrollStrategy*** for both x-axis & y-axis to perform the scrolling efficiently.
50
64
@@ -54,43 +68,12 @@ The scrolling of data in progressive series can also be automated and optimized
54
68
- Select ***AxisScrollStrategies.regressive***. Automatically scrolls a scale to a negative direction.
55
69
- Pass ***undefined*** to disable automatic scrolling. Scale can then be manually set using *setInterval* method of ***Axis***
56
70
57
-
For this particular example and based on the selected ***DataPatterns***, the configuration of the axis can be either ***AxisScrollStrategies.progressive*** or ***AxisScrollStrategies.regressive***.
58
-
59
-
For example
60
-
-***DataPatterns.horizontalProgressive*** series is created. X-axis scrolling should be configured with ***AxisScrollStrategies.progressive***. Y-scrolling can be any.
-***DataPatterns.horizontalRegressive*** series is created. X-axis scrolling should be configured with***AxisScrollStrategies.regressive***. Y-scrolling can be any.
-***DataPatterns.verticalProgressive*** series is created. Y-axis scrolling should be configured with***AxisScrollStrategies.progressive***. X-scrolling can be any.
-***DataPatterns.verticalRegressive*** series is created. Y-axis scrolling should be configured with***AxisScrollStrategies.regressive***. X-scrolling can be any.
0 commit comments