1

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>
2
  • 2
    ¿Cuál es la pregunta? Commented el 17 jun. 2016 a las 12:50
  • Me da dos errores: Cannot read property 'arrayToDataTable' of Undefined y después un Uncaught Not An Array Commented el 17 jun. 2016 a las 13:40

1 respuesta 1

0

SOLUCION

Modifiqué mis funciones y logré hacerlo funcionar, les dejo el estado nuevo:

JAVASCRIPT

google.charts.setOnLoadCallback(function() {

            var opciones = {
                title: "Resumen anual de tickets",
                curveType: "function",
                legend: { position: "bottom" },
                vAxis: { viewWindow:{min:0} }
            };

            var data_totalanual = '.chart_anualtotales($id_proyecto, $id_usuario, $fecha_desde).'

            drawChart("LineChart", "totalanual", data_totalanual, opciones);
        });

        function drawChart(chartType, containerID, dataArray, options) {

            var data = google.visualization.arrayToDataTable(dataArray);
            var containerDiv = document.getElementById(containerID);
            var chart = false;

            if (chartType.toUpperCase() == "BARCHART") {
                chart = new google.visualization.BarChart(containerDiv);
            }
            else if (chartType.toUpperCase() == "COLUMNCHART") {
                chart = new google.visualization.ColumnChart(containerDiv);
            }
            else if (chartType.toUpperCase() == "PIECHART") {
                chart = new google.visualization.PieChart(containerDiv);
            }
            else if (chartType.toUpperCase() == "TABLECHART")
            {
                chart = new google.visualization.Table(containerDiv);
            }
            else if (chartType.toUpperCase() == "LINECHART")
            {
                chart = new google.visualization.LineChart(containerDiv);
            }

            chart.draw(data, options);

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

            if (chart == false) {
                return false;
            }
        }

HTML

google.charts.setOnLoadCallback(function() {

    var opciones = {
        title: "Resumen anual de tickets",
        curveType: "function",
        legend: { position: "bottom" },
        vAxis: { viewWindow:{min:0} }
    };

    var data_totalanual = [["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]]

    drawChart("LineChart", "totalanual", data_totalanual, opciones);
});

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.