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);
  3. // parseISODate returns a luxon date object to work with in the samples
  4. // We will create points every 30s starting from this point in time
  5. const start = Utils.parseISODate('2021-04-01T00:00:00Z').toMillis();
  6. const pointData = [];
  7. for (let i = 0; i < NUM_POINTS; ++i) {
  8. // Most data will be in the range [0, 20) but some rare data will be in the range [0, 100)
  9. const max = Math.random() < 0.001 ? 100 : 20;
  10. pointData.push({x: start + (i * 30000), y: Utils.rand(0, max)});
  11. }
  12. const data = {
  13. datasets: [{
  14. borderColor: Utils.CHART_COLORS.red,
  15. borderWidth: 1,
  16. data: pointData,
  17. label: 'Large Dataset',
  18. radius: 0,
  19. }]
  20. };
  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,
  8. interaction: {
  9. mode: 'nearest',
  10. axis: 'x',
  11. intersect: false
  12. },
  13. plugins: {
  14. decimation: decimation,
  15. },
  16. scales: {
  17. x: {
  18. type: 'time',
  19. ticks: {
  20. source: 'auto',
  21. // Disabled rotation for performance
  22. maxRotation: 0,
  23. autoSkip: true,
  24. }
  25. }
  26. }
  27. }
  28. };
  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. ];