Crear gráfica en PHP desde un CSV con google Charts

Son muchas las personas que me preguntan como hay que realizar para programar gráficas en php desde un csv y hoy voy a explicar como lo podemos realizar de una manera muy sencilla con las libreria de google Charts.

Para empezar voy a utilizar de ejemplo un csv con la temperatura media mes a me de la ciudad de Gijón.

Mes,Temperatura media
Enero,11.0
Febrero,10.8
Marzo,11.9
Abril,13.5
Mayo,15.6
Junio,18.2
Julio,20.5
Agosto,20.6
Septiembre,19.4
Octubre,16.9
Noviembre,13.5
Dicimebre,11.8	

Lo siguiente que vamos a hacer es crear el fichero logic.php donde utilizaremos la función array_map() para convertir el csv en un array y la función json_encode() para convertir el array en un json.

<?php
//convertimos csv en array
$array = array_map('str_getcsv', file('csv.csv'));
//convertimos array en json
$arrayToDataTable = json_encode($array, JSON_NUMERIC_CHECK);
?>

Y el siguiente paso es crear el fichero index.php que se encargara de mostrar la gráfica.

Al inicio incluimos el fichero logic.php para poder utilizar el json con el contenido del csv.

//Incluimos fichero php que carga el csv en un json
<?php include('logic.php'); ?>

A continuación cargamos la librería que vamos a utilizar de google charts.

<!-- Cargamos la libreria de google para mostrar graficas: https://developers.google.com/chart/interactive/docs/gallery/columnchart -->
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

Luego añadimos el script que se va encargar de mostrar la gráfica imprimiendo con un echo la variable arrayToDataTable que contiene el json necesario para el script.

<!-- script que genera la grafica-->
    <script type="text/javascript">
      google.charts.load('current', {
        'packages': ['bar']
      });
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
        //pasamos el json a la grafica
        var data = google.visualization.arrayToDataTable(<?php echo $arrayToDataTable ?>);

        var options = {

          bars: 'vertical',
          vAxis: {
            format: 'decimal'
          },
          height: 600,
          colors: ['#d95f02']
        };

        var chart = new google.charts.Bar(document.getElementById('chart_div'));

        chart.draw(data, google.charts.Bar.convertOptions(options));
      }
    </script>

Y por ultimo añadimos el div necesario para cargar la gráfica.

<!-- div donde se muestra la grafica-->
    <div id="chart_div"></div>

El resultado final seria este:

Lo podeis ver aqui en funcionamiento: http://programacionconphp.com/dev/chartsCSV/

Y desde github podeis conseguir el codigo: https://github.com/victorgarciasisi/chartsCSV

Deja un comentario