1๐
โ
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>
Source:stackexchange.com