Hello to all, welcome to the therichpost.com. In this I will tell you how to Solved : hovering over Chartjs Bar Chart showing old data? Chartjs is the very popular for barchart, line chart and many more. I was facing one problem during working with chartjs. When I change my chartjs bar chart event then hover again, It was showing me old data and this was the big issue for me but I am able to solved this and today I am sharing that code with all of you. Here is the code for solved hovering over Chartjs Bar Chart showing old data:
var ctxLine = document.getElementById("line-chart").getContext("2d");
if(window.bar != undefined)
window.bar.destroy();
window.bar = new Chart(ctxLine, {});
There are so many tricky code in Chartjs and I will let you know all. Please do comment if you any query related to this post. Thank you. Therichpost.com
Thanks Very Very much 🙂
It woks!
your welcome..
Thanks , solved my problem !
Thanks. Please tell me what does window.bar perform ?
If the variable is defined outside a function then its most immediate execution context is the global context which in web browsers is the window object;
// note that the following doesn’t throw an error
console.log(bar) // undefined
console.log(window.bar) // undefined
console.log(window.hasOwnProperty(‘bar’)) // true
I am using chart control and getting same error, can you tell me the way where to add this code of line in a function or in the render method
Thank You so much,,, it is really working.
you’re most welcome 🙂
Thank you So Much!
most welcome!!
does not work on me im using it on angular 6
HI Jayson, can you send me code, I need to check once..Angular code?
My Angular has no Idea what windows.bar should be and me either.
How I get it working?
I got it
check this:
https://therichpost.com/solved-hovering-over-chartjs-bar-chart-showing-old-data-in-angular
how did it worked ? I am facing the same issue and am using angular 6
Hi, Dharmansh, can you check this:
https://therichpost.com/solved-hovering-over-chartjs-bar-chart-showing-old-data-in-angular
======================
Tell me if it solve you issue.
i have same problem please help me
Please tell me the problem
I have two chats ( line chart and bar chart). for line chart, I have already used window.bar but for the bar chart window.bar does not work.
It will work and can you me show you code?
Same issue with me, how to make window.bar work for both the charts
how to use this code, i have initial data and ajax call data.
Same, when you will add your chart code then add above code.
Thanks Bro
Your welcome..
very very thanks more
I am also facing the same Problem of hovering and showing old data. I tried using your code but it shows the old data on hovering.
Below is my code
$(document).ready(function () {
$(‘#search’).on(‘click’, function () {
var district=$(‘#district’).val();
$.ajax({
url: “index.php?r=dashboard/groups&district1=”+district,
method: “GET”,
dataType: “json”,
success: function(data) {
console.log(data);
var district3 = [];
var groups3 = [];
for(var i in data) {
district3.push(” ” +data[i].District);
groups3.push(data[i].Groups);
}
var chartdata = {
labels: district3,
datasets : [
{
label: ‘Groups’,
backgroundColor: ‘skyblue’,
borderWidth:1,
data: groups3
}
]
};
var ctx = document.getElementById(“district_wise_group_1″);
var barGraph = new Chart(ctx, {
type: ‘bar’,
data: chartdata,
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true,
stepSize: 1
},
}],
xAxes: [{
barPercentage: 0.1
}]
},
title: {
display: true,
text: ‘District wise Groups’,
fontSize:15,
fontColor:”black”,
fontStyle:”bold”
}
},
});
if(window.bar != undefined)
window.bar.destroy();
window.bar = new Chart(ctx, {});
},
error: function(data) {
console.log(data);
}
});
});
$(‘#reset’).on(‘click’, function () {
$.ajax({
url: “index.php?r=dashboard/grouprecords”,
method: “GET”,
dataType: “json”,
success: function(data) {
console.log(data);
var district3 = [];
var groups3 = [];
for(var i in data) {
district3.push(” ” +data[i].District);
groups3.push(data[i].Groups);
}
var chartdata = {
labels: district3,
datasets : [
{
label: ‘Groups’,
backgroundColor: ‘skyblue’,
borderWidth:1,
data: groups3
}
]
};
var ctx = document.getElementById(“district_wise_group_1″);
var barGraph = new Chart(ctx, {
type: ‘bar’,
data: chartdata,
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true,
stepSize: 1
},
}],
xAxes: [{
barPercentage: 0.1
}]
},
title: {
display: true,
text: ‘District wise Groups’,
fontSize:15,
fontColor:”black”,
fontStyle:”bold”
}
},
});
},
error: function(data) {
console.log(data);
}
});
});
});
I think, you are you using it wrong way. Please check my code again carefully.
thank you
Thanks , solved my problem !
Hi Ajay Malhotra
I am using LIghtning component(Salesforce) and using
inside loop and getting same issue
and using ur code like below but solved 🙁
({
createGraph : function(cmp, temp, selectedObjectName, viewtype) {
var dataMap = {“chartLabels”: Object.keys(temp),
“chartData”: Object.values(temp)
};
var el = cmp.find(‘barChart’).getElement();
var ctx = el.getContext(‘2d’);
var myChart = new Chart(ctx, {
type: viewtype,
data: {
labels: dataMap.chartLabels,
datasets: [
{
label: selectedObjectName,
backgroundColor: “#3399ff”,
data: dataMap.chartData
}
]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true,
// label formate for y axes
// callback: function(value, index, values) {
// return “U$ ” + (value).toFixed(2).replace(/\d(?=(\d{3})+\.)/g, ‘$&,’);
// }
max: 80,
autoSkip: false,
stacked: true
}
}] ,
xAxes: [{
gridLines: {
offsetGridLines: true
},
ticks: {
beginAtZero: true,
// label formate for y axes
// callback: function(value, index, values) {
// return “U$ ” + (value).toFixed(2).replace(/\d(?=(\d{3})+\.)/g, ‘$&,’);
// }
max: 80,
autoSkip: false,
stacked: true
}
}]
}
},
});
var ctxLine = document.getElementById(“barChart”).getContext(“2d”);
if(window.bar != undefined)
window.bar.destroy();
window.bar = new Chart(ctxLine, {});
}
})
Inside loop and there are one chart or multiple charts?
thank you so much .
you are welcome.
hello bro i have same issue please me
Did you use my code?
Thank you! it worked like a charm but for anyone out there that wasn’t sure on how to use it, in my case I had a function that took data as a parameter from an ajax call and inside that function I created my chart(Doughnut) so I simply replaced my old code:
function loadTimelineEntriesCreatedByUserChart(data){
// I processed data here…
var ctx = $(“#timeline-created-by-user”).get(0).getContext(“2d”);
var myChart = new Chart(ctx, {
type: ‘doughnut’,
data: {
labels: theLabelsTop5,
datasets: [{
label: ‘# of Votes’,
data: theDataTop5,
backgroundColor: dynamicColors(),
borderColor: dynamicColors(),
borderWidth: 1
}]
},
options: {
responsive: false,
legend: {
position: ‘right’,
labels: {
boxWidth: 12
}
}
}
});
}
to :
function loadTimelineEntriesCreatedByUserChart(data){
// I processed data here…
var ctx = $(“#timeline-created-by-user”).get(0).getContext(“2d”);
if(this.chartTCBU != undefined){
window.chartTCBU.destroy();
}
window.chartTCBU = new Chart(ctx, {
type: ‘doughnut’,
data: {
labels: theLabelsTop5,
datasets: [{
label: ‘# of Votes’,
data: theDataTop5,
backgroundColor: dynamicColors(),
borderColor: dynamicColors(),
borderWidth: 1
}]
},
options: {
responsive: false,
legend: {
position: ‘right’,
labels: {
boxWidth: 12
}
}
}
});
}
Good job 🙂
Its not working for my code.
Anyone can help me?
Please tell me..
Thanks brother it’s reallly working
Welcome…
I don’t really understand why window.bar works instead of origin chart name. Maybe it’s correlated to the source code of Chart.js? But anyway it works perfectly. Thanks man!
You are welcome.
My intention is to update the chart on change of radio button. Can you help me where should I make the changes, as I followed your solution but not working. Here is the link to the code https://www.codepile.net/pile/G7rroN7Q
Hi I will check and update you.
Thanks
thank you so much, it works!!!!! I’m stuck 2 two days and many thanksss
Welcome and great.
Thank you so much.. really Nice…
Welcome.
Thanks a lot It works
Great.
Thank you so so much..it worked!!
Great and welcome.
hi ajay
my code is something different , in one dropdown onchange event I am binding the data, where there are 4 charts and i am dynamically handling using a tag.
for example i am sending 2 functions here..
getWSchartStandardData(tag:any){
const elem = document.getElementById(‘standardChart’);
const ctx:any = elem?.getContext(‘2d’);
const gradient = ctx.createLinearGradient(0, 0, 0, 200);
gradient.addColorStop(0, ‘#0098b8’);
gradient.addColorStop(1, ‘#40afc9’);
////let datarr: any = [];
//let levarr: any = [];
this.levarr = this.stdlabelVal;
this.datarr = this.stdDataArr;
const datamin = Math.min(…this.datarr);
let min = (datamin – 5 < 0) ? 0 : Math.floor(datamin – 5);
let labelTag='';
let labelString='';
let unit:any;
if(tag==1){
labelTag = "Network Availability (Standard Data)";
labelString = "Percentage (%)";
unit = "%";
}
if(tag==2){
labelTag = "Jitter (Standard Data)";
labelString = "Milliseconds (ms)";
unit = "ms";
}
if(tag==3){
labelTag = "Latency (Standard Data)";
labelString = "Milliseconds (ms)";
unit = "ms";
}
if(tag==4){
labelTag = "Packet Delivery (Standard Data)";
labelString = "Percentage (%)";
unit = "%";
}
console.log(this.levarr)
console.log(this.datarr)
this.chart = new Chart(ctx, {
type: 'bar', //this denotes tha type of chart
data: {// values on X-Axis
labels: this.levarr,
datasets: [
{
label: labelTag,
data: this.datarr,
backgroundColor: gradient
}
]
},
options: {
layout: {
padding: {
left: 0,
right: 0,
top: 0,
bottom: 0
}
},
legend: {
display: false
},
responsive: true,
maintainAspectRatio: false,
scales: {
yAxes: [{
ticks: {
// beginAtZero:true,
precision: 0,
min: min,
maxTicksLimit: Math.max(…this.datarr)
},
display: true,
scaleLabel: {
display: true,
labelString: labelString,
},
}],
xAxes: [
{
scaleLabel: {
display: true,
labelString: "Months",
},
},
],
}
}
});
}
getWSchartRealTime(tag:any){
const elem = document.getElementById(‘realtimeChart’);
const ctx:any = elem?.getContext(‘2d’);
const gradient = ctx.createLinearGradient(0, 0, 0, 200);
gradient.addColorStop(0, ‘#0098b8’);
gradient.addColorStop(1, ‘#40afc9’);
////let datarr: any = [];
//let levarr: any = [];
this.levarr = this.rTlabelVal;
this.datarr = this.rTDataArr;
const datamin = Math.min(…this.datarr);
let min = (datamin – 5 < 0) ? 0 : Math.floor(datamin – 5);
let labelTag='';
let labelString='';
let unit:any;
if(tag==1){
labelTag = "Network Availability (Real Time)";
labelString = "Percentage (%)";
unit = "%";
}
if(tag==2){
labelTag = "Jitter (Real Time)";
labelString = "Milliseconds (ms)";
unit = "ms";
}
if(tag==3){
labelTag = "Latency (Real Time)";
labelString = "Milliseconds (ms)";
unit = "ms";
}
if(tag==4){
labelTag = "Packet Delivery (Real Time)";
labelString = "Percentage (%)";
unit = "%";
}
this.chart = new Chart(ctx, {
type: 'bar', //this denotes tha type of chart
data: {// values on X-Axis
labels: this.levarr,
datasets: [
{
label: labelTag,
data: this.datarr,
backgroundColor: gradient
}
]
},
options: {
layout: {
padding: {
left: 0,
right: 0,
top: 0,
bottom: 0
}
},
legend: {
display: false
},
responsive: true,
maintainAspectRatio: false,
scales: {
yAxes: [{
ticks: {
// beginAtZero:true,
precision: 0,
min: min,
maxTicksLimit: Math.max(…this.datarr)
},
display: true,
scaleLabel: {
display: true,
labelString: labelString,
},
}],
xAxes: [
{
scaleLabel: {
display: true,
labelString: "Months",
},
},
],
}
}
});
}
i use ngdestroy
ngOnDestroy() {
if(this.chart!=undefined && this.chart!=null)
this.chart.destroy();
}
the destroy is not working properly … as no data is showing after that .
any help please..thank you
Hi I got your point. Your data is coming from API but your chart init first so it is showing no data.