CODEWITHSUNDEEP
chartschart.js
Satish
Satish

Reputation: 401

ChartJS showing old values when mouse over on Doughnut after updating values

When I update existing Doughnut chart values, it looks working(updated with new values).

But when mouse-over on updated Doughnut chart, it shows Old Doughnut. When mouse-leave, it shows updated Doughnut chart.

Default values

var pieData = [{
  value: 300,
  color: "#F7464A",
  highlight: "#FF5A5E",
  label: "Red"
}, {
  value: 50,
  color: "#46BFBD",
  highlight: "#5AD3D1",
  label: "Green"
}];

var pieOptions = {
  segmentShowStroke: true,
  segmentStrokeColor: "#fff",
  segmentStrokeWidth: 2,
  percentageInnerCutout: 50,
  animationSteps: 100,
  animationEasing: "easeOutBounce",
  animateRotate: true,
  animateScale: false,
  responsive: true,
  maintainAspectRatio: true,

}

Updated with following:

$('#updateButton').click(function() {
  
  pieData = [{
    value: 100,
    color: "#F7464A",
    highlight: "#FF5A5E",
    label: "Red"
  }, {
    value: 150,
    color: "#46BFBD",
    highlight: "#5AD3D1",
    label: "Green"
  }];
  pieChart.Pie(pieData, pieOptions);
});

My code snippet HERE

Where I missing is not understand.

Upvotes: 0

Views: 1121

Answers (1)

ɢʀᴜɴᴛ
ɢʀᴜɴᴛ

Reputation: 32869

This is because, you are creating a new instance of chart on update button click, and the old one never gets removed.

So, to make the doughnut chart show updated values properly on mouse-over, you need to destroy the previous instance of chart, when the update button is clicked.

To accomplish so ...

First, store the chart instance to a variable, as such :

var pieChart_instance = pieChart.Doughnut(pieData, pieOptions);

Then, on update button click, destroy it, before creating a new instance :

$('#updateButton').click(function() {
    pieChart_instance.destroy();
    ...

ᴡᴏʀᴋɪɴɢ ᴇxᴀᴍᴘʟᴇ ⧩

var pieData = [{
   value: 300,
   color: "#F7464A",
   highlight: "#FF5A5E",
   label: "Red"
}, {
   value: 50,
   color: "#46BFBD",
   highlight: "#5AD3D1",
   label: "Green"
}];

var pieOptions = {
   segmentShowStroke: true,
   segmentStrokeColor: "#fff",
   segmentStrokeWidth: 2,
   percentageInnerCutout: 50,
   animationSteps: 100,
   animationEasing: "easeOutBounce",
   animateRotate: true,
   animateScale: false,
   responsive: true,
   maintainAspectRatio: true,

};


var pie_ctx = document.getElementById("pie-chart-area").getContext("2d");

var pieChart = new Chart(pie_ctx);

var pieChart_instance = pieChart.Doughnut(pieData, pieOptions);


$('#updateButton').click(function() {
	pieChart_instance.destroy(); //destroy previous instance of chart
   
   pieData = [{
      value: 100,
      color: "#F7464A",
      highlight: "#FF5A5E",
      label: "Red"
   }, {
      value: 150,
      color: "#46BFBD",
      highlight: "#5AD3D1",
      label: "Green"
   }];
   
   pieChart_instance = pieChart.Doughnut(pieData, pieOptions);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.js"></script>
<input type="button" id="updateButton" value="Update Values" />
<div style="width: 300px;">
   <canvas id="pie-chart-area" width="300" height="300" />
</div>
<div id="legend"></div>

Upvotes: 2

Related Questions