Buscar

Generar gráficas en Laravel 5.2

Keli Zorrilla
16 sept 2016
2 Min. de lectura

Hola para generar gráficas en Laravel hay varias librerías que podemos usar, entre ellas esta la que nos proporciona el mismo Laravel que es Lavacharts, también esta highcharts y la Google Chart, de esta ultima les explicare como generar gráficas de una forma muy sencilla, nada de engorrarse, ni nada de estrés, bueno a mi me dio mucho estrés porque no conseguía material pero hoy se los expondré a ustedes de la forma mas sencilla que pueda.

Lo primero que vamos a hacer es crear una ruta para llamar a la vista desde el controlador en la que vamos a generar las gráficas:

Route::resource('estadisticas_clientes', 'EstadisticasClientesController@index');

Luego, en la función index del controlador desde el que estamos llamando en la ruta colocamos la consulta de los datos que queremos mostrar en la grafica:

$pastel = DB::select("SELECT count('credencial') as total, estado as ubicacion FROM customers INNER JOIN states ON customers.estadof_id=states.id GROUP BY ubicacion");

En este caso, yo estoy relacionando dos tablas, en las que voy a mostrar cuantos clientes hay un estado.

Ahora, en la vista incluimos el archivo de Google chart, y creamos la funcion para generar la grafica

<script type="text/javascript" src="graficas/googlechart.js"></script>

<script type="text/javascript"> google.charts.load('current', {'packages':['corechart']}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['Productos', 'mes'], @foreach ($pastel as $pastels) ['{{ $pastels->ubicacion}}', {{ $pastels->total}}], @endforeach ]); var options = { title: 'Representación grafica de clientes por ubicacion' }; var chart = new google.visualization.PieChart(document.getElementById('piechart')); chart.draw(data, options); } </script>

Aquí estamos indicando que mientras hallan clientes por estados valla generando la gráfica en forma de torta y lo imprimimos en un div.

<div id="piechart" style="width: 900px; height: 500px;"></div>

Pueden ver la demostración de estas gráficas en el portafolio de esta pagina y/o en el vídeo de abajo el cual es un sistema de ventas, pedidos e inventario. Allí muestro gráficas realizadas con esta librería explicada aquí y otras en forma de columnas, de tortas y lineales.