Refresh pie chart - Javascript Chart.js

Javascript examples for Chart.js:Pie Chart

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

Description

Refresh pie chart

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>hp mp</title> 
      <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.3/Chart.min.js"></script> 
   </head> 
   <body onload="hpmpGraph()"> 
      <script>
     var myPieChart = null/*  ww w.  j  a  v  a 2s  .c om*/
        var config = {options:{},type:'pie'}
      function hpmpGraph() {
         var hp = document.hpmpForm.HP.value,
            mp = document.hpmpForm.MP.value,
            ctx = document.getElementById('hpmpratio').getContext('2d');
                        config.data = {
            labels: ["HP","MP"],
            datasets:
               [{
                  data: [hp,mp],
                  backgroundColor: ["#EF0000","#0000EF"],
                  hoverBackgroundColor: ["#FF0000","#0000FF"]
               }]
         };
         if(myPieChart == null){
                            myPieChart = new Chart(ctx, config);
                        }else{
                            myPieChart.update()
                        }
      }
   
      </script> 
      <form name="hpmpForm" method="post">
          HP : 
         <input type="text" name="HP" value="100">
         <br>
          MP : 
         <input type="text" name="MP" value="100">
         <br> 
         <button type="button" onclick="hpmpGraph();">Click</button> 
         <h2>Pie graph</h2> 
         <canvas id="hpmpratio" height="50"></canvas> 
      </form>  
   </body>
</html>

Related Tutorials