CODEWITHSUNDEEP
javascripthtmlcanvaschartshtml5-canvas
user2329803
user2329803

Reputation:

Remove pie chart from canvas and replace with another pie chart

Im using chart.js to create a doughnut chart in the canvas

Code: 

            var pieChartCanvas = $("#pieChart").get(0).getContext("2d");
            var pieChart = new Chart(pieChartCanvas);

            var PieData = [
              {
                  value: 700,
                  color: "#f56954",
                  highlight: "#f56954",
                  label: "Chrome"
              },
              {
                  value: 500,
                  color: "#00a65a",
                  highlight: "#00a65a",
                  label: "IE"
              },
              {
                  value: 400,
                  color: "#f39c12",
                  highlight: "#f39c12",
                  label: "FireFox"
              },
              {
                  value: 600,
                  color: "#00c0ef",
                  highlight: "#00c0ef",
                  label: "Safari"
              },
              {
                  value: 300,
                  color: "#3c8dbc",
                  highlight: "#3c8dbc",
                  label: "Opera"
              },
              {
                  value: 100,
                  color: "#d2d6de",
                  highlight: "#d2d6de",
                  label: "Navigator"
              }
            ];
            var pieOptions = {
                segmentShowStroke: true,
                segmentStrokeColor: "#fff",
                segmentStrokeWidth: 1,
                percentageInnerCutout: 50, 
                animationSteps: 100,
                animationEasing: "easeOutBounce",
                animateRotate: true,
                animateScale: false,
                responsive: true,
                maintainAspectRatio: false,
}

<canvas id="pieChart"></canvas>

I want to delete the current pie chart and replace it with a new one when i click on a list item. I have tried using the destroy() method but it has had no effect

<ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
     <li><a href="#" onclick="">Device</a></li>
</ul>

Can anyone help?

Upvotes: 0

Views: 471

Answers (2)

SalDev
SalDev

Reputation: 388

Use:

pieChartCanvas.clearRect(0, 0, canvasWidth, canvasHeight);

Of course you want to declare the canvasWidth and canvasHeight variables.

Upvotes: 0

Yogendra
Yogendra

Reputation: 2234

When you click on list first you can set innerHtml empty to remove the content of the chart element like 

document.getElementById('pieChart').innerHtml = '';

then draw a new chart into it.

Upvotes: 1

Related Questions