get a value from function and print it to the chart - Javascript Chart.js

Javascript examples for Chart.js:Chart Configuration

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

Description

get a value from function and print it to the chart

Demo Code

ResultView the demo in separate window 

<html>
   <head>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>   
      <title>Hello!</title> 
   </head> 
   <body> 
      <canvas id="chart" width="100" height="100"></canvas> 
      <span id="akurasi"></span>  
      <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.bundle.js"></script> 
      <script type="text/javascript">
 $(document).ready(function(){
           // ...
           document.getElementById("akurasi").innerText = 35;
           var chart = setupChart();
           // you can do whatever you want with this chart here...
 });// www . j  a  v a2  s.  c o  m
 function setupChart(){
    return new Chart(document.getElementById("chart"), {
        type: 'polarArea',
        data: {
          labels: ["Data Training (%)", "Data Testing (%)"],
          datasets: [
            {
              label: "jumlah ",
              backgroundColor: ["#3e95cd", "#ff4137"],
              data: [+document.getElementById("akurasi").innerText,100]
            }
          ]
        },
        options: {
          legend: { display: false },
          title: {
            display: true,
            text: 'Data Training'
          }
        }
    });
 }

      </script> 
   </body>
</html>

Related Tutorials