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