CODEWITHSUNDEEP
javascriptchart.js
Mattyas yahya
Mattyas yahya

Reputation: 53

how to show chart using chart js

i have js code for show chart using chart js, and in console does not display error messages, just show respon from api (json response), this is my code :

Json response

[{"id_barang":"0ca287da-9990-44db-a6f8-c6b05ec5d504","nama":"keju","jenis":"makanan","harga_beli":5000,"harga_jual":9000,"stok_awal":22,"transfer":0,"penjualan":14,"adjustment":0,"stok_akhir":8,"barang_laris":0,"uom":"pcs"},{"id_barang":"464e5c0e-4ed1-4382-958f-df8e4ec724cd","nama":"kornet","jenis":"makanan","harga_beli":8000,"harga_jual":12000,"stok_awal":90,"transfer":0,"penjualan":12,"adjustment":0,"stok_akhir":78,"barang_laris":0,"uom":"unit"},{"id_barang":"568ba244-dad5-4bbc-ad41-b38098c1da7a","nama":"baygon","jenis":"Lain_Lain","harga_beli":34000,"harga_jual":40000,"stok_awal":10,"transfer":0,"penjualan":6,"adjustment":0,"stok_akhir":4,"barang_laris":0,"uom":"unit"},{"id_barang":"5ef61405-6029-4f62-b2af-189f436e9315","nama":"sarden","jenis":"makanan","harga_beli":50000,"harga_jual":60000,"stok_awal":11,"transfer":0,"penjualan":5,"adjustment":0,"stok_akhir":6,"barang_laris":0,"uom":"unit"},{"id_barang":"76f27deb-d16c-41e3-b87f-0b23d0675c39","nama":"hit","jenis":"Lain_Lain","harga_beli":14000,"harga_jual":20000,"stok_awal":12,"transfer":0,"penjualan":8,"adjustment":0,"stok_akhir":4,"barang_laris":0,"uom":"unit"}]


var ctx = document.getElementById("canvas"); var chartdata = {
  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: []
  }]
};
var getData = function() {
  $.ajax({
    url: 'http://localhost:1111/BarangAll',
    success: function(data) {
      console.log(data);
      chartdata.labels.push(data.nama);
      chartdata.labels.push(data.stok_awal);
      chartdata.update();
    }
  });
};
getData();

Upvotes: 0

Views: 164

Answers (1)

tuhin47
tuhin47

Reputation: 6068

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>

Upvotes: 1

Related Questions