ChartJs canvas showing previous graph when changing Graph types for column chart - Javascript Chart.js

Javascript examples for Chart.js:Column Chart

  1. HOME
  2. Javascript
  3. Chart.js
  4. Column Chart

Description

ChartJs canvas showing previous graph when changing Graph types for column chart

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.js"></script> 
      <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script> 
      <script type="text/javascript">
    window.onload=function(){/*w ww  . ja  v  a 2  s . co m*/
var ctx = document.getElementById("myChart").getContext("2d");
ctx.canvas.width = 400;
ctx.canvas.height = 400;
var chart;
var data = {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [{
        label: "My First dataset",
        fillColor: "rgba(220,220,220,0.5)",
        strokeColor: "rgba(220,220,220,0.8)",
        highlightFill: "rgba(220,220,220,0.75)",
        highlightStroke: "rgba(220,220,220,1)",
        data: [65, 59, 80, 81, 56, 55, 40]
    }, {
        label: "My Second dataset",
        fillColor: "rgba(151,187,205,0.5)",
        strokeColor: "rgba(151,187,205,0.8)",
        highlightFill: "rgba(151,187,205,0.75)",
        highlightStroke: "rgba(151,187,205,1)",
        data: [28, 48, 40, 19, 86, 27, 90]
    }]
};
var updateChart = function() {
    var chartType = $("#chartType").val();
    chart && chart.destroy();
    chart = new Chart(ctx)[chartType](data, {});
};
$('#chartType').on('change', updateChart)
updateChart();
    }

      </script> 
   </head> 
   <body> 
      <canvas id="myChart"></canvas> 
      <select id="chartType"> 
         <option value="Bar">Bar</option> 
         <option value="Line">Line</option> 
      </select>  
   </body>
</html>

Related Tutorials