JSFiddle - React, Tailwind, and code Playground
HTML
<script src="//cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>
<script src="//code.jquery.com/jquery-2.2.2.min.js"></script>
<form id="form">
<button type="submit">
Submit
</button>
</form>
<canvas id="lineChart"></canvas>
JavaScript
$( document ).ready(function() {
var lineData = {
labels: ["Lap 1", "Lap 2", "Lap 3", "Lap 4", "Lap 5"],
datasets: [{
fillColor: "rgba(255,255,255,0)",
strokeColor: "rgba(63,169,245,1)",
pointColor: "rgba(63,169,245,1)",
pointStrokeColor: "#fff",
data: [10, 20, 30, 40, 55] // need to swap this with race1Data array
}, {
fillColor: "rgba(255,255,255,0)",
strokeColor: "rgba(102,45,145,1)",
pointColor: "rgba(102,45,145,1)",
pointStrokeColor: "#fff",
data: [97, 87, 55, 72, 66]
}]
}
var lineOptions = {
responsive: true,
animation: true,
pointDot: true,
scaleOverride : false,
scaleShowGridLines : false,
scaleShowLabels : true,
scaleSteps : 4,
scaleStepWidth : 25,
scaleStartValue : null
};
//Create Line chart
var ctx = document.getElementById("lineChart").getContext("2d");
myNewChart = new Chart(ctx).Line(lineData, lineOptions);
$('#form').submit(function(e){
e.preventDefault();
e.stopPropagation();
lineData.datasets.forEach(function(set){
set.data.forEach(function(){
myNewChart.removeData();
console.log('called');
});
})
})
});