CODEWITHSUNDEEP
javascriptjquerychartschart.js
user8203594
user8203594

Reputation:

Chart js shows old data on mouse hover

How can I fix the chart js bug like it shows old data when I move the mouse on the chart.

My Js file

   $('#select-question').change(function(){
   var questionId = $("option:selected",this).val();
   $.ajax({
          type : "GET",
          dataType:"JSON",
          url : '/get-percentage',
          data : 
                {
                  'questionId' : questionId
                },
                success: function(data)
                {
                   
                    console.log(data)
                    if(data == '')
                    {
                      alert('No Data')
                    }
                    var option = [];
                    var label = [];
                     for(var i=0;i < data.example.length; i++)
                     {
                    option.push(data.example[i]);
                    label.push(data.labels[i]);
                    
                }

                var chartdata = {
                labels: label,
                datasets : [
                {
                        label: 'FeedBack Report Graph',
                        backgroundColor: [
                            'rgba(255, 99, 132, 0.2)',
                            'rgba(54, 162, 235, 0.2)',
                            'rgba(255, 206, 86, 0.2)',
                            'rgba(75, 192, 192, 0.2)',
                            'rgba(153, 102, 255, 0.2)',
                            'rgba(255, 159, 64, 0.2)'
                        ],
                        borderColor: [
                            'rgba(255,99,132,1)',
                            'rgba(54, 162, 235, 1)',
                            'rgba(255, 206, 86, 1)',
                            'rgba(75, 192, 192, 1)',
                            'rgba(153, 102, 255, 1)',
                            'rgba(255, 159, 64, 1)'
                        ],
                        hoverBackgroundColor: 'rgba(200, 200, 200, 1)',
                        hoverBorderColor: 'rgba(200, 200, 200, 1)',
                        data: option
                        }
                      ]
             };

        var ctx = $("#mycanvas");
                var myChart = new Chart(ctx, { type: 'pie', data: chartdata, options:{
                                   legend: {
                                   display: true
                              }
                            }  });
                myChart.destroy();    
       
        var barGraph = new Chart(ctx, {
                            type: 'pie',
                            data: chartdata,
                            options: {
                                   legend: {
                                   display: true
                              }
                            }
            });
          } 
   })
  
 })

I can able to display data from JSON response in chart js but the problem with it shows previous values when I just move the mouse on the chart.

I have tried to destroy method but it did not work. How to prevent this problem??.

Upvotes: 5

Views: 9789

Answers (5)

Pratap Reddy
Pratap Reddy

Reputation: 1

I too had flickering issue when mouse hover on chart. I've two graphs and when I use below code, first graph is not appearing.

    var ctx = document.getElementById("bar-chart").getContext("2d");  
    //Destroy the previous chart;
    if(window.bar != undefined)
    window.bar.destroy();
    window.bar = new Chart(ctx , {});

After changing above code as below it is working.

Graph 1:    
    var ctx = document.getElementById("bar-chart").getContext("2d");  
    //Destroy the previous chart;
    if(window.bar != undefined)
     window.bar.destroy();
    window.bar = new Chart(ctx , {});

Graph 2:

    var ctx1 = document.getElementById("line-chart").getContext("2d");  
    //Destroy the previous chart;
    if(window.barline != undefined)
     window.barline .destroy();
    window.barline = new Chart(ctx1 , {});`

Upvotes: 0

SantoshK
SantoshK

Reputation: 1877

There is the best concept to empty the div and append the canvas through your JavaScript function. it will help you to re-plot your updated data

$('#DetailedGraphMain').empty().append('<canvas id="DetailedGraphMainChart" height="300"></canvas>');

Upvotes: 2

Priyanka Ahire
Priyanka Ahire

Reputation: 502

Using Javascript we can empty the contain of the div and append the canvas once again

document.getElementById('pieChartContainer').innerHTML = "";
  document.getElementById('pieChartContainer').innerHTML = <canvas #pieCanvas style="height:40vh; width:80vw" id="pieCanvas"></canvas>;

Upvotes: 1

Kishore Padmanaban
Kishore Padmanaban

Reputation: 117

Above solution worked for me but when I have two charts on the same page, Only one is showing. Other charts are becoming empty. Here is the solution for that.

  var ctx = document.getElementById("bar-chart").getContext("2d");  

  //Destroy the previous chart;
  //Rename the "bar" according to your component
  if(window.bar != undefined)
  window.bar.destroy();
  window.bar = new Chart(ctx , {});

if you don't change the "bar", only one chart will show in your page.

Upvotes: 2

ɢʀᴜɴᴛ
ɢʀᴜɴᴛ

Reputation: 32869

First off, why are you creating two same type of chart, with same data? There is no need!

You indeed need to use destroy method, but the reason it­'s not working is because, you haven't declared the chart variable in global scope. In order to destroy any instance of chart, the chart instance must be available in global scope (meaning, the chart variable should be globally accessible).

So, in your case, you should define the chart variable as :

myChart = new Chart(...);

or,

window.myChart = new Chart(...);

also, you need to destroy the previous instance of chart, before creating a new one, as such :

...
 if (myChart) myChart.destroy();
 myChart = new Chart(...);
...

Upvotes: 16

Related Questions