Data Decimation

This example shows how to use the built-in data decimation to reduce the number of points drawn on the graph for improved performance.

Data Decimation - 图1

No decimation (default)min-max decimationLTTB decimation (50 samples)LTTB decimation (500 samples)

decimation data setup actions

  1. const decimation = {
  2.   enabled: false,
  3.   algorithm: 'min-max',
  4. };
  1. const NUM_POINTS = 100000;
  2. Utils.srand(10);
  4. // parseISODate returns a luxon date object to work with in the samples
  5. // We will create points every 30s starting from this point in time
  6. const start = Utils.parseISODate('2021-04-01T00:00:00Z').toMillis();
  7. const pointData = [];
  9. for (let i = 0; i < NUM_POINTS; ++i) {
  10.   // Most data will be in the range [0, 20) but some rare data will be in the range [0, 100)
  11.   const max = Math.random() < 0.001 ? 100 : 20;
  12.   pointData.push({x: start + (i * 30000), y: Utils.rand(0, max)});
  13. }
  15. const data = {
  16.   datasets: [{
  17.     borderColor: Utils.CHART_COLORS.red,
  18.     borderWidth: 1,
  19.     data: pointData,
  20.     label: 'Large Dataset',
  21.     radius: 0,
  22.   }]
  23. };
  1. const config = {
  2.   type: 'line',
  3.   data: data,
  4.   options: {
  5.     // Turn off animations and data parsing for performance
  6.     animation: false,
  7.     parsing: false,
  9.     interaction: {
  10.       mode: 'nearest',
  11.       axis: 'x',
  12.       intersect: false
  13.     },
  14.     plugins: {
  15.       decimation: decimation,
  16.     },
  17.     scales: {
  18.       x: {
  19.         type: 'time',
  20.         ticks: {
  21.           source: 'auto',
  22.           // Disabled rotation for performance
  23.           maxRotation: 0,
  24.           autoSkip: true,
  25.         }
  26.       }
  27.     }
  28.   }
  29. };
  1. const actions = [
  2.   {
  3.     name: 'No decimation (default)',
  4.     handler(chart) {
  5.       chart.options.plugins.decimation.enabled = false;
  6.       chart.update();
  7.     }
  8.   },
  9.   {
  10.     name: 'min-max decimation',
  11.     handler(chart) {
  12.       chart.options.plugins.decimation.algorithm = 'min-max';
  13.       chart.options.plugins.decimation.enabled = true;
  14.       chart.update();
  15.     },
  16.   },
  17.   {
  18.     name: 'LTTB decimation (50 samples)',
  19.     handler(chart) {
  20.       chart.options.plugins.decimation.algorithm = 'lttb';
  21.       chart.options.plugins.decimation.enabled = true;
  22.       chart.options.plugins.decimation.samples = 50;
  23.       chart.update();
  24.     }
  25.   },
  26.   {
  27.     name: 'LTTB decimation (500 samples)',
  28.     handler(chart) {
  29.       chart.options.plugins.decimation.algorithm = 'lttb';
  30.       chart.options.plugins.decimation.enabled = true;
  31.       chart.options.plugins.decimation.samples = 500;
  32.       chart.update();
  33.     }
  34.   }
  35. ];

Docs