Google Charts from PHP and JavaScript

Question

Google Charts from PHP and JavaScript

Navigation

#1 by (0 votes)

1

I am developing a small tool to perform dynamic reports on a ticket tracking system. So far I'm doing the reports by hand, but I want to automate it.

In these reports I would like to add some graphs that feed each month and form a small big data with the work history and time invested in each project, for each technician that works with us, etc.

To make several line graphs, I made a java script function fed from php. Passed to the codes

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>

CALL FROM 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>

And I add how is this final in the html so that you can see the format in which you pass the data.

<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>

javascript php funciones google-visualization

asked by Sebastián Labonia 17.06.2016 в 05:35

source

1 answer

I do not work the buttons in the activity connect to virtual box using RDP [closed]

score 0 · Accepted Answer

SOLUTION

I modified my functions and I managed to make it work, I leave the new status:

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);
});