Skip to main content

Google Charts desde PHP y JavaScript

Estoy desarrollando una pequeña herramienta para realizar reportes dinámicos sobre un sistema de seguimiento de tickets. Hasta el momento estoy realizando los reportes a mano, pero quiero automatizarlo.

En estos reportes me gustaría agregar algunos gráficos que mes a mes se alimenten y formar un pequeño bigdata con el historial del trabajo y tiempo invertido en cada proyecto, por cada técnico que trabaja con nosotros, etc.

Para realizar varios gráficos lineales, hice una función java script alimentada desde php. Pasó a los códigos

JAVASCRIPT

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
    google.charts.load("current", {"packages":["corechart"]});
    google.charts.setOnLoadCallback(drawChartLines);

    function drawChartLines(name, data, div) {
        var data = google.visualization.arrayToDataTable(data,false);

        var options = {
            title: name,
            curveType: "function",
            legend: { position: "bottom" }
        };

        var chart = new google.visualization.LineChart(document.getElementById(div));

        chart.draw(data, options);
    }

    window.onerror = function(msg, url, linenumber) {
        alert("Error message: "+msg+"\nURL: "+url+"\nLine Number: "+linenumber);
        return true;
    }
</script>

LLAMADA DESDE PHP

<div id="totalanual" style="width: 1000px; height: 300px"><script>
datos = ';
echo chart_anualtotales($id_proyecto, $id_usuario, $fecha_desde);
print ';<br>';
print 'drawChartLines("Resumen anual de tareas", datos, "totalanual");</script></div>

Y les agrego como queda esto final en el html para que se pueda ver el formato en que pasa los datos.

<script>
datos = ["Mes", "Abiertos", "Actualizados", "Cerrados"],["Apr", 0, 0, 0],["May", 0, 0, 0],["Jun", 0, 0, 0],["Jul", 0, 0, 0],["Aug", 0, 0, 0],["Sep", 0, 0, 0],["Oct", 0, 0, 0],["Nov", 0, 0, 0],["Dec", 3, 0, 3],["Jan", 2, 0, 0],["Feb", 34, 0, 10],["Mar", 80, 1, 63],["Apr", 166, 19, 144],["May", 204, 1, 194];
drawChartLines("Resumen anual de tareas", datos, "totalanual");</script>