score:0

Accepted answer

i have successfully build a bar chart. here is the code. you can run in the snippet but make sure your http://localhost:1111/barangall provides the data without any cross-origin issue.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/2.8.0/chart.bundle.js"></script>
<canvas id="mychart" width="400" height="400"></canvas>
<script>
  var ctx = document.getelementbyid('mychart').getcontext('2d');
  var dataset = {
    type: 'bar',
    data: {
      labels: [],
      datasets: [{
        label: 'data barang',
        backgroundcolor: 'rgba(200, 200, 200, 0.75)',
        bordercolor: 'rgba(200, 200, 200, 0.75)',
        hoverbackgroundcolor: 'rgba(200, 200, 200, 1)',
        hoverbordercolor: 'rgba(200, 200, 200, 1)',
        data: []
      }]
    },
    options: {
      scales: {
        yaxes: [{
          ticks: {
            beginatzero: true
          }
        }]
      }
    }
  }

  var getdata = function(chartdata) {
    $.ajax({
      url: 'https://api.myjson.com/bins/ovkgh',//http://localhost:1111/barangall
      success: function(data) {
        //console.log(data);
        data.foreach((el, i) => {
          chartdata.data.labels.push(el.nama);
          chartdata.data.datasets[0].data.push(el.stok_awal);
        });
        var mychart = new chart(ctx, chartdata);

      }
    });
  };
  getdata(dataset);
</script>


Related Query

More Query from same tag