Data Decimation Configuration Algorithms
- Largest Triangle Three Bucket (LTTB) Decimation: This algorithm is developed to reduce the number of data points by revealing the trends in the data using a sparse dataset. The most efficient use of the algorithm is in the scenarios where the simplified view of the data is intended to be displayed.
- Min/Max Decimation: This algorithm preserves the peak in the data while potentially requiring more points for each pixel. This algorithm is helpful when charts with noisy signals emphasize retaining the crucial data peaks for analysis.
CDN link
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.1.2/chart.umd.js"></script>
Example 1: In the below example, we are representing the Monthly Visitorâs data on w3wiki in Line Chart form. For the data reduction, we have set the plugins.decimation.algorithm
option set to âlttbâ. This option reduces the data points by selecting the key triangles in the data.
HTML
<!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" > < meta name = "viewport" content=" width = device -width, initial-scale = 1 .0"> < title >LTTB Decimation Example</ title > < script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js" > </ script > < script src = "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.1.2/chart.umd.js" > </ script > </ head > < body > < div > < h1 style = "color:green;" >w3wiki</ h1 > < h3 >Data Decimation Configuration - LTTB </ h3 > < div style = "width:80%;" > < canvas id = "lttbChart" ></ canvas > </ div > </ div > < script > const geeksData = { labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'], datasets: [{ label: 'Monthly Visitors', data: [120, 150, 80, 200, 130, 180, 110, 160, 90, 220, 170, 200], fill: false, borderColor: 'blue', tension: 0.4, }] }; const ctx = document.getElementById('lttbChart').getContext('2d'); const lttbChart = new Chart(ctx, { type: 'line', data: geeksData, options: { plugins: { decimation: { enabled: true, algorithm: 'lttb', } } } }); </ script > </ body > </ html > |
Output:
Example 2: In the below example, we have used the plugins.decimation.algorithm
to âmin-maxâ which preserves the peaks in the data by making it suitable for charts with noisy signals. This is used for critical data peaks and analysis.
HTML
<!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" > < meta name = "viewport" content=" width = device -width, initial-scale = 1 .0"> < title >Min/Max Decimation Example</ title > < script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js" > </ script > < script src = "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.1.2/chart.umd.js" > </ script > </ head > < body > < div > < h1 style = "color:green;" >w3wiki</ h1 > < h3 >Data Decimation Configuration - Min/Max </ h3 > < div style = "width:80%;" > < canvas id = "minMaxChart" ></ canvas > </ div > </ div > < script > const sampleData = { labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'], datasets: [{ label: 'Monthly Sales', data: [250, 200, 180, 300, 280, 220, 320, 270, 240, 200, 310, 290], fill: false, borderColor: 'green', tension: 0.4, }] }; const ctx = document.getElementById('minMaxChart') .getContext('2d'); const minMaxChart = new Chart(ctx, { type: 'line', data: sampleData, options: { plugins: { decimation: { enabled: true, algorithm: 'min-max', } } } }); </ script > </ body > </ html > |
Output:
Chart.js Data Decimation Configuration
Chart.js Data Decimation is the feature developed for line charts, allowing us to reduce the data points automatically. By this, the chartâs performance and visuals are optimized in proper clear form.
Syntax:
options: {
plugins: {
decimation: {
algorithm: 'lttb', or 'min-max'
// Other configuration options
}
}
}
Contact Us