i am using the Chart Js to show bar char. the data that i need to use is different depending the drop down. my chart work fine except when the user select a different option from drop down and the canvas get reloaded with the new data, on the mouse over there is glitch and canvas jumping between the old selected data and the current one
i have look around to fix this issue, and found the following method
ChartJs showing old Data on mouse over but it did not work
The Code is
<html>
<head>
<script src=".4.2.min.js"></script>
<style type="text/css">
#ctx{max-width: 700px;
width:700px;
height: 350px;
max-height: 350px;}
</style>
</head>
<body>
Please select : <select id="mySelect" onchange="myFunction()">
<option value="Please Select">Please Select</option>
<option value="C001"> 001
<option value="C002"> 002
<option value="C003"> 003
</select>
<p id="demo"></p>
<script src=".js/2.6.0/Chart.min.js"></script>
<canvas id="ctx" ></canvas>
<script>
function myFunction() {
var x = document.getElementById("mySelect").value;
document.getElementById("demo").innerHTML = "You selected: " + x;
creatGraph(x);
}
function GetMyData(Id)
{
var data;
switch(Id) {
case "C001":// consultant 001
data = {labels: ['0 ', '1', '2', '3', '4', '5', '6', '7', '8', '9+'], // responsible for how many bars are gonna show on the chart
// create 12 datasets, since we have 12 items
// data[0] = labels[0] (data for first bar - 'Standing costs') | data[1] = labels[1] (data for second bar - 'Running costs')
// put 0, if there is no data for the particular bar
datasets: [{
label: ' Site 0',
data: [2056, 544, 122, 40, 50, 14,12, 12, 22, 28],
backgroundColor: '#22aa99'
}, {
label: ' Site 1',
data: [670, 228, 42, 8, 26, 10, 8,0 , 8, 18],
backgroundColor: '#994499'
}, {
label: ' Site 101',
data: [],
backgroundColor: '#316395'
}, {
label: ' Site 2',
data: [6, 4],
backgroundColor: '#b82e2e'
}, {
label: 'Site 3',
data: [],
backgroundColor: '#66aa00'
}, {
label: ' Site 4',
data: [],
backgroundColor: '#dd4477'
}]
};
break ;
break;
case "C002": // 002
data = {labels: ['0 ', '1', '2', '3', '4', '5', '6', '7', '8', '9+'], // responsible for how many bars are gonna show on the chart
// create 12 datasets, since we have 12 items
// data[0] = labels[0] (data for first bar - 'Standing costs') | data[1] = labels[1] (data for second bar - 'Running costs')
// put 0, if there is no data for the particular bar
datasets: [{
label: ' Site 0',
data: [558, 158, 82, 48, 8, 12, 14, 8, 12, 0],
backgroundColor: '#22aa99'
}, {
label: ' Site 1',
data: [306, 96, 28, 4, 14, 4, 2,2 , 0, 4],
backgroundColor: '#994499'
}, {
label: ' Site 101',
data: [],
backgroundColor: '#316395'
}, {
label: ' Site 2',
data: [2,,,4],
backgroundColor: '#b82e2e'
}, {
label: ' Site 3',
data: [],
backgroundColor: '#66aa00'
}, {
label: ' Site 4',
data: [],
backgroundColor: '#dd4477'
}]
};
break;
case "C003": // consultant 003
data = {labels: ['0 ', '1', '2', '3', '4', '5', '6', '7', '8', '9+'], // responsible for how many bars are gonna show on the chart
// create 12 datasets, since we have 12 items
// data[0] = labels[0] (data for first bar - 'Standing costs') | data[1] = labels[1] (data for second bar - 'Running costs')
// put 0, if there is no data for the particular bar
datasets: [{
label: ' Site 0',
data: [1046, 526, 138, 194, 72, 54, 20, 10, 8, 32],
backgroundColor: '#22aa99'
}, {
label: ' Site 1',
data: [742, 214, 56, 86, 18, 16, 8, 12, 10, 10],
backgroundColor: '#994499'
}, {
label: ' Site 101',
data: [],
backgroundColor: '#316395'
}, {
label: ' Site 2',
data: [8, 6, , , 2, , ,2],
backgroundColor: '#b82e2e'
}, {
label: ' Site 3',
data: [],
backgroundColor: '#66aa00'
}, {
label: ' Site 4',
data: [],
backgroundColor: '#dd4477'
}]
};
break;
default:// no data
data = {labels: ['0 ', '1', '2', '3', '4', '5', '6', '7', '8', '9+'], // responsible for how many bars are gonna show on the chart
// create 12 datasets, since we have 12 items
// data[0] = labels[0] (data for first bar - 'Standing costs') | data[1] = labels[1] (data for second bar - 'Running costs')
datasets: [{
label: ' Site 0',
data: [],
backgroundColor: '#22aa99'
}, {
label: ' Site 1',
data: [],
backgroundColor: '#994499'
}, {
label: ' Site 101',
data: [],
backgroundColor: '#316395'
}, {
label: ' Site 2',
data: [],
backgroundColor: '#b82e2e'
}, {
label: ' Site 3',
data: [],
backgroundColor: '#66aa00'
}, {
label: ' Site 4',
data: [],
backgroundColor: '#dd4477'
}]
};
}
return data;
}
function creatGraph(Consultant_Id)
{
var Data = GetMyData(Consultant_Id);
if (chart) chart.chart.destroy();
var chart = new Chart(ctx, {
type: 'bar',
data: Data,
options: {
responsive: true,
//maintainAspectRatio: false,
legend: {
position: 'right' // place legend on the right side of chart
},
scales: {
xAxes: [{
stacked: true // this should be set to make the bars stacked
}],
yAxes: [{
stacked: true // this also..
}]
}
}
});
}
</script>
</body>
</html>
i am using the Chart Js to show bar char. the data that i need to use is different depending the drop down. my chart work fine except when the user select a different option from drop down and the canvas get reloaded with the new data, on the mouse over there is glitch and canvas jumping between the old selected data and the current one
i have look around to fix this issue, and found the following method
ChartJs showing old Data on mouse over but it did not work
The Code is
<html>
<head>
<script src="http://code.jquery./jquery-1.4.2.min.js"></script>
<style type="text/css">
#ctx{max-width: 700px;
width:700px;
height: 350px;
max-height: 350px;}
</style>
</head>
<body>
Please select : <select id="mySelect" onchange="myFunction()">
<option value="Please Select">Please Select</option>
<option value="C001"> 001
<option value="C002"> 002
<option value="C003"> 003
</select>
<p id="demo"></p>
<script src="https://cdnjs.cloudflare./ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<canvas id="ctx" ></canvas>
<script>
function myFunction() {
var x = document.getElementById("mySelect").value;
document.getElementById("demo").innerHTML = "You selected: " + x;
creatGraph(x);
}
function GetMyData(Id)
{
var data;
switch(Id) {
case "C001":// consultant 001
data = {labels: ['0 ', '1', '2', '3', '4', '5', '6', '7', '8', '9+'], // responsible for how many bars are gonna show on the chart
// create 12 datasets, since we have 12 items
// data[0] = labels[0] (data for first bar - 'Standing costs') | data[1] = labels[1] (data for second bar - 'Running costs')
// put 0, if there is no data for the particular bar
datasets: [{
label: ' Site 0',
data: [2056, 544, 122, 40, 50, 14,12, 12, 22, 28],
backgroundColor: '#22aa99'
}, {
label: ' Site 1',
data: [670, 228, 42, 8, 26, 10, 8,0 , 8, 18],
backgroundColor: '#994499'
}, {
label: ' Site 101',
data: [],
backgroundColor: '#316395'
}, {
label: ' Site 2',
data: [6, 4],
backgroundColor: '#b82e2e'
}, {
label: 'Site 3',
data: [],
backgroundColor: '#66aa00'
}, {
label: ' Site 4',
data: [],
backgroundColor: '#dd4477'
}]
};
break ;
break;
case "C002": // 002
data = {labels: ['0 ', '1', '2', '3', '4', '5', '6', '7', '8', '9+'], // responsible for how many bars are gonna show on the chart
// create 12 datasets, since we have 12 items
// data[0] = labels[0] (data for first bar - 'Standing costs') | data[1] = labels[1] (data for second bar - 'Running costs')
// put 0, if there is no data for the particular bar
datasets: [{
label: ' Site 0',
data: [558, 158, 82, 48, 8, 12, 14, 8, 12, 0],
backgroundColor: '#22aa99'
}, {
label: ' Site 1',
data: [306, 96, 28, 4, 14, 4, 2,2 , 0, 4],
backgroundColor: '#994499'
}, {
label: ' Site 101',
data: [],
backgroundColor: '#316395'
}, {
label: ' Site 2',
data: [2,,,4],
backgroundColor: '#b82e2e'
}, {
label: ' Site 3',
data: [],
backgroundColor: '#66aa00'
}, {
label: ' Site 4',
data: [],
backgroundColor: '#dd4477'
}]
};
break;
case "C003": // consultant 003
data = {labels: ['0 ', '1', '2', '3', '4', '5', '6', '7', '8', '9+'], // responsible for how many bars are gonna show on the chart
// create 12 datasets, since we have 12 items
// data[0] = labels[0] (data for first bar - 'Standing costs') | data[1] = labels[1] (data for second bar - 'Running costs')
// put 0, if there is no data for the particular bar
datasets: [{
label: ' Site 0',
data: [1046, 526, 138, 194, 72, 54, 20, 10, 8, 32],
backgroundColor: '#22aa99'
}, {
label: ' Site 1',
data: [742, 214, 56, 86, 18, 16, 8, 12, 10, 10],
backgroundColor: '#994499'
}, {
label: ' Site 101',
data: [],
backgroundColor: '#316395'
}, {
label: ' Site 2',
data: [8, 6, , , 2, , ,2],
backgroundColor: '#b82e2e'
}, {
label: ' Site 3',
data: [],
backgroundColor: '#66aa00'
}, {
label: ' Site 4',
data: [],
backgroundColor: '#dd4477'
}]
};
break;
default:// no data
data = {labels: ['0 ', '1', '2', '3', '4', '5', '6', '7', '8', '9+'], // responsible for how many bars are gonna show on the chart
// create 12 datasets, since we have 12 items
// data[0] = labels[0] (data for first bar - 'Standing costs') | data[1] = labels[1] (data for second bar - 'Running costs')
datasets: [{
label: ' Site 0',
data: [],
backgroundColor: '#22aa99'
}, {
label: ' Site 1',
data: [],
backgroundColor: '#994499'
}, {
label: ' Site 101',
data: [],
backgroundColor: '#316395'
}, {
label: ' Site 2',
data: [],
backgroundColor: '#b82e2e'
}, {
label: ' Site 3',
data: [],
backgroundColor: '#66aa00'
}, {
label: ' Site 4',
data: [],
backgroundColor: '#dd4477'
}]
};
}
return data;
}
function creatGraph(Consultant_Id)
{
var Data = GetMyData(Consultant_Id);
if (chart) chart.chart.destroy();
var chart = new Chart(ctx, {
type: 'bar',
data: Data,
options: {
responsive: true,
//maintainAspectRatio: false,
legend: {
position: 'right' // place legend on the right side of chart
},
scales: {
xAxes: [{
stacked: true // this should be set to make the bars stacked
}],
yAxes: [{
stacked: true // this also..
}]
}
}
});
}
</script>
</body>
</html>
- Does this answer your question? Chartjs Bar Chart showing old data when hovering – Wai Ha Lee Commented May 13, 2020 at 5:55
1 Answer
Reset to default 9You can fix the issue by making var chart; global (put it right before your myFunction() call). Then your destroy should be if(chart) chart.destroy();