I am trying to build a web page that has a video and 2 graphs. When I am trying to show 2 graphs I get the following message: " Error: Canvas is already in use. Chart with ID '0' must be destroyed before the canvas can be reused.." I don't understand why I need to destroy the canvass if I am using different canvasses for different graphs on the same page. My code is:
<div class='FisrtChat'>
<canvas id="chart" width="300" height="50"></canvas>
</div>
<div class='SecondChart'>
<canvas id="chart_Multi" width="300" height="50"></canvas>
</div>
<script src="final_graph.js"></script>
<script src="final_graph.js"></script>
my final_grapg.js file containes:
async function chartIt() {
const data = await getData();
const ctx = document.getElementById('chart').getContext('2d');
const myChart = new Chart(ctx, {
type: 'line',
data: {
labels: data.xs,
datasets: [{
label: 'Finall Q_value throw time',
data: data.ys,
backgroundColor: ['rgba(255, 99, 132, 0.2)', ],
borderColor: ['rgba(255, 99, 132, 1)', ],
borderWidth: 1
}]
},
});
} my multi_head.js file contains:
async function chartIt() {
const data = await getData();
const ctx = document.getElementById('chart_MULTI').getContext('2d');
const myChart_H1 = new Chart(ctx, {
datasets: [{
label: 'Head 1',
data: data.ys1,
borderColor: 'red'
}]
},
});
Thank you in advance, Yael
You have to add the following block of code if your chart is getting created more than once.
let chartStatus = Chart.getChart("chart_MULTI");
if (chartStatus != undefined) {
chartStatus.destroy();
}
Full code - (you can do the same for another chart)
async function chartIt() {
const data = await getData();
const ctx = document.getElementById('chart_MULTI').getContext('2d');
let chartStatus = Chart.getChart("chart_MULTI");
if (chartStatus != undefined) {
chartStatus.destroy();
}
const myChart_H1 = new Chart(ctx, {
datasets: [{
label: 'Head 1',
data: data.ys1,
borderColor: 'red'
}]
},
});