How to fetch data from DB on Chart.js using Laravel? - laravel

Question

I want to show data from database on chart and I have shown return response I need to fetch on chart but I don't know how to do that does anyone have an idea?
Return response:
[
"Joylinkhk: 13,",
"HorizonTechnologies: 2,",
"Alahazrat: 9,",
"j2w: 0,"
]
Chart script:
<script>
var barChartData = {
labels: ['Joylinhk', 'HorizonTechnologies','Alahazrat','j2w'],
datasets: [{
label: "",
backgroundColor: window.chartColors.blue,
data: [13, 2,9,0],
}
]
};
window.onload = function() {
var ctx = document.getElementById('canvas').getContext('2d');
window.myBar = new Chart(ctx, {
type: 'bar',
data: barChartData,
options: {
title: {
display: true,
text: 'Project Report Chart'
}
,
tooltips: {
mode: 'index',
intersect: false
}
,
responsive: true,
scales: {
xAxes: [{
stacked: true,
}
],
yAxes: [{
stacked: true
}
]
}
}
}
);
};
</script>

Answer 1

I do This more than one time
first of all you should Include Google Chart in Your Blade File
Let's See The controller function that return data to the chart
I make a function called getAreaChart()
public function getAreaChart():array {
$data = DB::table('companies')->get();
$array[]=['area','counts'];
foreach ($data as $key=>$da):
$array[++$key] = [Area::find($da->area)->area,intVal($da->count)];
endforeach;
return $array;
}
for the function that return data to view and displayed in chart, I call the function and don't forget to json_encode the result
public function home()
{
$array = $this->getAreaChart();
return view('admin.home')->with('companies', json_encode($array));;
}
in the blade file , I make a div with id pie_chart
<div id="pie_chart" style="width:510px; height:408px;background: transparent">
and the script should be like this
<script type="text/javascript">
var analytics = <?php echo $companies; ?>
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart()
{
var data = google.visualization.arrayToDataTable(analytics);
var options = {
title : ''
};
var chart = new google.visualization.PieChart(document.getElementById('pie_chart'));
chart.draw(data, options);
}
</script>
You can change the chart by change the value corechart see google chart doc
this is example that I follow
Google Charts Docs
google.charts.load('current', {'packages':['corechart']});
and this is the google charts types
Google Charts Types
I hop that helpful ;)
happy code