Google Charts из PHP и JavaScript

Question

Google Charts из PHP и JavaScript

я разрабатываю небольшой инструмент для создания динамических отчетов о системе отслеживания билетов. До сих пор я делаю отчеты вручную, но я хочу автоматизировать его.

в этих отчетах я хотел бы добавить некоторые графики, которые месяц за месяцем кормить и сформировать небольшой bigdata с историей работы и времени, потраченного на каждый проект, для каждого специалиста, который работает с нами и т.д.

Для выполнения несколько линейных графиков, я сделал функцию java script, работающую из php. Перешел к кодам

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>

ВЫЗОВ ИЗ 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>

и я добавляю их, как это окончательное осталось в html, так что вы можете увидеть формат, в котором вы передаете данные.

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

1

php javascript google-visualization funciones

Author: Rubén, 2016-06-17

Source

1 answers

score 0 · Accepted Answer

Решение

Я изменил свои функции и сумел заставить его работать, я оставляю им новое состояние:

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