top of page

Tambien puedes ver mi resumen curricular aqui

Generar gráficas en Laravel 5.2

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.

Articulos recientes
Archive
bottom of page