charts.js


<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Arduino Web Server</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="<?php echo base_url();?>/assets/css/bootstrap.min.css">
  </head>
<body>
    <div class="chart-container" style="position: relative; height:40vh; width:80vw">
        <canvas id="mychart"></canvas>
    </div>
    <script src="<?php echo base_url();?>/assets/jquery.min.js"></script>
    <script src="<?php echo base_url();?>/assets/js/bootstrap.min.js"></script>
    <script src="<?php echo base_url();?>/assets/charts/Chart.min.js"></script>
    <script>
      var isActive = true;

      $().ready(function () {
          //EITHER USE A GLOBAL VAR OR PLACE VAR IN HIDDEN FIELD
          //IF FOR WHATEVER REASON YOU WANT TO STOP POLLING
          pollServer();
      });

      function pollServer()
      {
          if (isActive)
          {
              window.setTimeout(function () {
                  $.ajax({
                      url      : "<?php echo base_url();?>charts/index",
                      cache    : false,
                      dataType : 'json',
                      type     : "POST",
                      success: function (result) {
                          //SUCCESS LOGIC
                          var data  = Array();
                          var waktu = Array();
                          data = result.data;
                          waktu = result.waktu;
                          console.log(waktu);
                          var ctx = $("#mychart");//document.getElementById('mychart').getContext('2d');
                          var chart = new Chart(ctx, {
                            type: 'line',

                            // The data for our dataset
                            data: {
                              //labels: ["Januari", "Februari", "Maret", "April", "Mei", "June", "July", "Agustus", "September", "OKtober", "November", "Desember"],
                              labels: waktu,
                              datasets: [
                                {
                                  label: "Data Penjualan",
                                  backgroundColor: 'rgb(0, 0, 255)',
                                  borderColor: 'rgb(0, 0, 255)',
                                  //data: [10000,50000,1000,6000,0,90,100,1000,9999,1000,0,2],
                                  data: data,
                                }
                              ]
                            },

                            // Configuration options go here
                            options: {
                              scales: {
                                yAxes: [{
                                  ticks: {
                                    beginAtZero:true
                                  }
                                }]
                              }
                            }
                          });/**/
                          pollServer();
                      },
                      error: function () {
                          //ERROR HANDLING
                          pollServer();
                      }});/**/
              }, 3000);//2,5 detik
          }
      }
    </script>
</body>
</html>