I have a multiple charts that I want to display on this blade file but it seems that only one chart can display..I need to display 4.. I’ve checked the developer console and there are no errors pertaining to this issue where might I be going wrong? I’m trying to use chartjs3.0.1
On chartjs 2 this seems to work but when I tried using later version this issue has come up
@section('scripts')
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.0.1/chart.js" integrity="sha512-HJ+fjW1Hyzl79N1FHXTVgXGost+3N5d1i3rr6URACJItm5CjhEVy2UWlNNmFPHgX94k1RMrGACdmGgVi0vptrw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.bundle.js" charset="utf-8"></script> -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.3/js/bootstrap-select.min.js" charset="utf-8"></script>
<!-------------- TOP 3 CROP COMMODITIES BY PRODUCTION VALUE --------------->
<script>
// Declaring variables for data to be used in graph as well as the url to pull from
const url = "{{url('top3cropcomms')}}";
const crop_sum = new Array();
const crop_comm = new Array();
// Create a document.ready function so the chart loads as soon as the page is opened
$(document).ready(function(){
// GET function for bringing the values from database into the variables listed above
$.get(url, function(response){
response.forEach(function(data){
crop_comm.push(data.commodity);
crop_sum.push(data.com_sum);
});
// setup
const data = {
labels: crop_comm,
datasets: [{
label: 'Weekly Sales',
data: crop_sum,
backgroundColor: [
'rgba(255, 26, 104, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)',
'rgba(0, 0, 0, 0.2)'
],
borderColor: [
'rgba(255, 26, 104, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)',
'rgba(0, 0, 0, 1)'
],
borderWidth: 1
}]
};
// config
const config = {
type: 'bar',
data,
options: {
indexAxis: 'y',
scales: {
y: {
beginAtZero: true
}
}
}
};
// render init block
const top3Crop_Chart = new Chart(
document.getElementById('top3cropcomm'),
config
);
});
});
</script>
<!-------------- TOP 3 LIVESTOCK COMMODITIES BY PRODUCTION VALUE --------------->
<script>
const ls_comms_url = "{{url('top3lscomms')}}";
const ls_sum = new Array();
const ls_comm = new Array();
$(document).ready(function(){
$.get(ls_comms_url, function(response){
response.forEach(function(data){
ls_comm.push(data.commodity);
ls_sum.push(data.com_sum);
});
// setup
const top3ls_data = {
labels: ls_comm,
datasets: [{
label: 'Weekly Sales',
data: ls_sum,
backgroundColor: [
'rgba(255, 26, 104, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)',
'rgba(0, 0, 0, 0.2)'
],
borderColor: [
'rgba(255, 26, 104, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)',
'rgba(0, 0, 0, 1)'
],
borderWidth: 1
}]
};
// config
const top3ls_config = {
type: 'bar',
top3ls_data,
options: {
indexAxis: 'y',
scales: {
y: {
beginAtZero: true
}
}
}
};
// render init block
const top3LS_Chart = new Chart(
document.getElementById('top3lscomm'),
top3ls_config
);
});
});
</script>
<!-------------- CROP TRADE DATA --------------->
<script>
const crop_trade_url = "{{url('croptradedata')}}";
const crop_total_value = new Array();
const year = new Array();
$(document).ready(function(){
$.get(crop_trade_url, function(response){
response.forEach(function(data){
crop_total_value.push(data.crop_total_value);
year.push(data.year);
});
// setup
const croptrade_data = {
labels: year,
datasets: [{
label: 'Weekly Sales',
data: crop_total_value,
backgroundColor: [
'rgba(255, 26, 104, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)',
'rgba(0, 0, 0, 0.2)'
],
borderColor: [
'rgba(255, 26, 104, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)',
'rgba(0, 0, 0, 1)'
],
borderWidth: 1
}]
};
// config
const croptrade_config = {
type: 'bar',
croptrade,
options: {
indexAxis: 'y',
scales: {
y: {
beginAtZero: true
}
}
}
};
// render init block
const top3LS_Chart = new Chart(
document.getElementById('croptrade'),
croptrade_config
);
});
});
</script>
@endsection
