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

by

0👍

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

Leave a comment