Menu
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.com/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.com/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>
370
You 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();
78
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
