DEV Community

FlyingAndFly
FlyingAndFly

Posted on

What are the methods for data sampling in VChart charts?

Problem Description

May I ask if there are any data sampling configurations in vchart to improve performance when the amount of data in the line chart is large?

Solution

VChart line chart, since the 1.6.0version supports data sampling method configuration.

The downsampling strategy for line charts when the data volume is much larger than the pixel points can effectively optimize the drawing efficiency of the chart when turned on. It is turned off by default, that is, all drawings without filtering Data Points. Optional values for samplingconfiguration:

  • 'Lttb': Using Largest-Triangle-Three-Bucket algorithm, it can maximize the trend, shape and extreme value of the sampled line.
  • 'Min': Take the minimum value of the filter point
  • 'Max': take the maximum value of the filter point
  • 'Sum': take the sum of the filter points
  • 'Average': Take the average of the filter points

The sampling effect can be adjusted through the samplingFactor configuration.

sampling: 'lttb',
samplingFactor: 0.1,
Enter fullscreen mode Exit fullscreen mode

Code Example

https://visactor.io/vchart/demo/line-chart/line-sampling

Results

Quote

Image of Docusign

Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more

Top comments (0)

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more