Chart js shows old data on mouse hover

Admin 1
Viewed 8679

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??.

chart.js charts jquery javascript
5 Answers

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.

user_80237280

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>');
user_56807300

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>;
user_55071850

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 , {});`
user_179213820
Related