Back edit Edit This Example

1 Million Points Line Trace

This example plots a million data points using progressive line series.

Progressive series

Progressive series are highly optimized series for the rendering of high-volume and high-density data while keeping full interactivity.
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.

The DataPatterns-collections object contains all different directions for progressive data patterns:

  • Select DataPatterns.horizontalProgressive to handle horizontal progressive datasets efficiently.
  • Select DataPatterns.horizontalRegressive to handle horizontal regressive datasets efficiently.
  • Select DataPatterns.verticalProgressive to handle vertical progressive datasets efficiently.
  • Select DataPatterns.verticalRegressive to handle vertical regressive datasets efficiently.
// Create line series optimized for horizontally progressive data.
const series = chart.addLineSeries(
    // Using the DataPatterns object to select the certain pattern for the line series.
    {  dataPattern: DataPatterns.horizontalProgressive  }
)

NOTE #1:

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.

NOTE #2:

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.

  • Select AxisScrollStrategies.expansion. Automatically increases a scale if some points are out of scale. Retains progressivity/regressivity of used scale.
  • Select AxisScrollStrategies.fitting. Automatically increases a scale if some points are out of scale and reduces it if there is too much empty space. Retains progressivity/regressivity of used scale.
  • Select AxisScrollStrategies.progressive. Automatically scrolls a scale in a positive direction.
  • Select AxisScrollStrategies.regressive. Automatically scrolls a scale to a negative direction.
  • Pass undefined to disable automatic scrolling. Scale can then be manually set using setInterval method of Axis

For this particular example and based on the selected DataPatterns, the configuration of the axis can be either AxisScrollStrategies.progressive or AxisScrollStrategies.regressive.

For example

  • DataPatterns.horizontalProgressive series is created. X-axis scrolling should be configured with AxisScrollStrategies.progressive. Y-scrolling can be any.

    // Configure axis to have progressive scrolling.
    axisX.setScrollStrategy( AxisScrollStrategies.progressive )
  • DataPatterns.horizontalRegressive series is created. X-axis scrolling should be configured with AxisScrollStrategies.regressive. Y-scrolling can be any.

    // Configure axis to have regressive scrolling.
    axisX.setScrollStrategy( AxisScrollStrategies.regressive )
  • DataPatterns.verticalProgressive series is created. Y-axis scrolling should be configured with AxisScrollStrategies.progressive. X-scrolling can be any.

    // Configure axis to have progressive scrolling.
    axisY.setScrollStrategy( AxisScrollStrategies.progressive )
  • DataPatterns.verticalRegressive series is created. Y-axis scrolling should be configured with AxisScrollStrategies.regressive. X-scrolling can be any.

    // Configure axis to have regressive scrolling.
    axisY.setScrollStrategy( AxisScrollStrategies.regressive )

© Arction Ltd 2009-2020. All rights reserved.