Using data in HTML to display ChartJS Doughnut chart - Javascript Chart.js

Javascript examples for Chart.js:Doughnut Chart

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

Description

Using data in HTML to display ChartJS Doughnut chart

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>stack</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script> 
      <style id="compiled-css" type="text/css">

#myChart {/*from  w w w . jav a 2s  .  c  o m*/
   width: 400px !important;
   height: 300px !important;
}


      </style> 
      <script type="text/javascript">
    window.onload=function(){
var ctx = document.getElementById("myChart").getContext("2d");
var data = {
  labels: [
    "amount",
    "total"
  ],
  datasets: [
    {
      data: [0, 0],
      backgroundColor: [
        "#FF6384",
        "#36A2EB"],
      hoverBackgroundColor: [
        "#FF6384",
        "#36A2EB"
      ]
    }]
};
var total = document.getElementById("total").innerText;
var amount = document.getElementById("amount").innerText / total * 100;
var left = 100 - amount;
if ( amount && total ) {
   data.datasets[0].data = [amount, left];
}
var options = {
   legend:false,
  maintainAspectRatio: false
}
// And for a doughnut chart
var myDoughnutChart = new Chart(ctx, {
    type: 'doughnut',
    data: data,
    options:options
});
    }

      </script> 
   </head> 
   <body> 
      <h1>Chart</h1> 
      <canvas id="myChart"></canvas> 
      <h4> 
         <strong id="amount">15</strong>
          of 
         <span id="total">20 </span> 
      </h4>  
   </body>
</html>

Related Tutorials