JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://mourner.github.io/simplify-js/simplify.js"></script>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<label>Select Tollerence Level</label> <select id="tolleranceValue">
<option value="0">0</option>
<option value="1">2</option>
<option value="2">4</option>
<option value="3">6</option>
<option value="4">8</option>
<option value="5">10</option>
</select>
<div id="chartContainer" style="height: 360px; width: 100%;"></div>
JavaScript
var tolleranceValueDom = document.getElementById("tolleranceValue");
var dataPoints = randomDataGenerator(500);
var chart = new CanvasJS.Chart("chartContainer",{
title: {
text: "Integrating simplify.js with CanvasJS"
},
theme: "light2",
zoomEnabled: true,
data: [{
type: "line",
dataPoints: dataPoints
}]
});
simplifyDataPointsAndRender();
function simplifyDataPointsAndRender() {
chart.options.data[0].dataPoints = simplify(dataPoints, parseInt(tolleranceValueDom.value), true);
chart.render();
}
function randomDataGenerator(limit) {
var yVal = 100;
var dps = [];
for (var i = 0; i < limit; i += 1) {
yVal = yVal + Math.round(5 + Math.random() *(-5-5));
dps.push({
x: i,
y: yVal
});
}
return dps;
}
tolleranceValueDom.addEventListener("change", simplifyDataPointsAndRender);