如何定期刷新谷歌图表？

Question

你好，我有一个用谷歌图表制作的时间线，我想做的是每隔一段时间更新一次，例如每 5 秒一次，我从 json 获取数据，我尝试过这种方式但没有为我工作：

setTimeout(function () {
            drawChart();
        }, 5000);

有什么办法吗？

google.load("visualization", "1", {packages: ["timeline"]});
    google.setOnLoadCallback(drawChart);

    // google.charts.setOnLoadCallback(drawChart);
    function drawChart() {
        $(".timeline").each(function () {
            var obje = {{ devicejson|safe }};
            var elem = $(this),
                id = elem.attr('id');
            var container = document.getElementById(id);
            var chart = new google.visualization.Timeline(container);
            var dataTable = new google.visualization.DataTable();
            dataTable.addColumn({type: 'string', id: 'Role'});
            dataTable.addColumn({type: 'string', id: 'Name'});
            dataTable.addColumn({type: 'date', id: 'Start'});
            dataTable.addColumn({type: 'date', id: 'End'});
            dataTable.addColumn({type: 'string', id: 'TimeEst'});
            dataTable.addColumn({type: 'string', role: 'style'});
            for (n = 0; n < obje.length; ++n) {
                if (obje[n].device_id == id) {
                    dataTable.addRows([
                        ['Department', obje[n].digitaloutput_user_description, new Date('"' + obje[n].startdatetime + '"'), new Date('"' + obje[n].enddatetime + '"'), obje[n].lighstate_user_description, obje[n].color],
                    ]);
                }
            }

            for (n = 0; n < obje.length; ++n) {
                if (obje[n].device_id == id) {
                    console.log(obje[n].color)

                }
            }

            var options = {
                chartArea: {
                    height: '90%',
                    width: '100%',
                    top: 36,
                    right: 12,
                    bottom: 2,
                    left: 12
                },
                height: 100,
                tooltip: {isHtml: true},
                timeline: {
                    showRowLabels: false,
                },
                avoidOverlappingGridLines: false,
                {#hAxis: {format: 'dd-MMM-yyyy HH:mm:ss'}#}

            };

            var formatTime = new google.visualization.DateFormat({
                pattern: 'yyyy-MM-dd HH:mm:ss a'
            });

            var view = new google.visualization.DataView(dataTable);
            view.setColumns([0, 1, {
                role: 'tooltip',
                type: 'string',
                calc: function (dt, row) {
                    // build tooltip
                    var dateBegin = dt.getValue(row, 2);
                    var dateEnd = dt.getValue(row, 3);
                    var oneHour = (60 * 1000);
                    var duration = (dateEnd.getTime() - dateBegin.getTime()) / oneHour;

                    var tooltip = '<div><div class="ggl-tooltip"><span>';
                    tooltip += dt.getValue(row, 0) + ':</span>&nbsp;' + dt.getValue(row, 1) + '</div>';
                    tooltip += '<div class="ggl-tooltip"><div>' + formatTime.formatValue(dateBegin) + ' - ';
                    tooltip += formatTime.formatValue(dateEnd) + '</div>';
                    tooltip += '<div><span>Duration: </span>' + duration.toFixed(0) + ' minutes</div>';
                    tooltip += '<div><span>Estate: </span>' + dt.getValue(row, 5) + '</div></div>';

                    return tooltip;
                },
                p: {html: true}
            }, 2, 3]);

            google.visualization.events.addListener(chart, 'ready', function () {
                var labels = container.getElementsByTagName('text');
                Array.prototype.forEach.call(labels, function (label) {
                    label.setAttribute('font-weight', 'normal');
                });
            });

            chart.draw(view.toDataTable(), options);


        })
        setTimeout(function () {
            drawChart();
        }, 5000);
    }

Answer 1

对于初学者，不应再使用旧版本的谷歌图表。

替换旧库...

<script src="https://www.google.com/jsapi"></script>

使用新库...

<script src="https://www.gstatic.com/charts/loader.js"></script>

这只会更改load 语句。
可以在下面的sn-p中找到...

---

接下来，您似乎正在从服务器加载数据，这里...

var obje = {{ devicejson|safe }};

JavaScript 在客户端上运行。
所以无论drawChart被调用多少次，
它将始终使用在第一个页面加载时从服务器接收到的相同数据。

相反，试试这个...

创建两个页面，一个返回数据，另一个绘制图表。
那么您就可以使用 AJAX 来获取数据并根据需要多次绘制图表。

创建一个新页面，在新页面中你真正需要的只是下面这行代码。

{{ devicejson|safe }}

除了任何标题信息以及您用于将数据获取到当前页面的现有代码。
但您不想将其分配给新页面中的变量。
只需使用上述语句将数据写入页面即可。

那么就可以使用AJAX来获取数据并绘制图表了。

function getData() {
    $.ajax({
      url: 'get_data.url',   // <-- use url to new page here
      dataType: 'JSON'
    }).done(function (data) {
      drawChart(data);
    });
}

然后，等待图表的就绪事件，然后再调用setTimeout。
因为我们不知道获取数据和绘制图表需要多长时间。
所以让我们等待第一个图表完成，然后再试一次。

看下面的sn-p...

google.charts.load('current', {
  packages:['timeline']
}).then(getData);            // <-- load google charts, then get the data

function getData() {
    $.ajax({
      url: 'get_data.url',   // <-- use url to new page here
      dataType: 'JSON'
    }).done(function (data) {
      drawChart(data);       // <-- draw chart with data from new page
    });
}


function drawChart(obje) {
    $(".timeline").each(function () {
        var elem = $(this),
            id = elem.attr('id');
        var container = document.getElementById(id);
        var chart = new google.visualization.Timeline(container);
        var dataTable = new google.visualization.DataTable();
        dataTable.addColumn({type: 'string', id: 'Role'});
        dataTable.addColumn({type: 'string', id: 'Name'});
        dataTable.addColumn({type: 'date', id: 'Start'});
        dataTable.addColumn({type: 'date', id: 'End'});
        dataTable.addColumn({type: 'string', id: 'TimeEst'});
        dataTable.addColumn({type: 'string', role: 'style'});
        for (n = 0; n < obje.length; ++n) {
            if (obje[n].device_id == id) {
                dataTable.addRows([
                    ['Department', obje[n].digitaloutput_user_description, new Date('"' + obje[n].startdatetime + '"'), new Date('"' + obje[n].enddatetime + '"'), obje[n].lighstate_user_description, obje[n].color],
                ]);
            }
        }

        for (n = 0; n < obje.length; ++n) {
            if (obje[n].device_id == id) {
                console.log(obje[n].color)

            }
        }

        var options = {
            chartArea: {
                height: '90%',
                width: '100%',
                top: 36,
                right: 12,
                bottom: 2,
                left: 12
            },
            height: 100,
            tooltip: {isHtml: true},
            timeline: {
                showRowLabels: false,
            },
            avoidOverlappingGridLines: false,
            {#hAxis: {format: 'dd-MMM-yyyy HH:mm:ss'}#}

        };

        var formatTime = new google.visualization.DateFormat({
            pattern: 'yyyy-MM-dd HH:mm:ss a'
        });

        var view = new google.visualization.DataView(dataTable);
        view.setColumns([0, 1, {
            role: 'tooltip',
            type: 'string',
            calc: function (dt, row) {
                // build tooltip
                var dateBegin = dt.getValue(row, 2);
                var dateEnd = dt.getValue(row, 3);
                var oneHour = (60 * 1000);
                var duration = (dateEnd.getTime() - dateBegin.getTime()) / oneHour;

                var tooltip = '<div><div class="ggl-tooltip"><span>';
                tooltip += dt.getValue(row, 0) + ':</span>&nbsp;' + dt.getValue(row, 1) + '</div>';
                tooltip += '<div class="ggl-tooltip"><div>' + formatTime.formatValue(dateBegin) + ' - ';
                tooltip += formatTime.formatValue(dateEnd) + '</div>';
                tooltip += '<div><span>Duration: </span>' + duration.toFixed(0) + ' minutes</div>';
                tooltip += '<div><span>Estate: </span>' + dt.getValue(row, 5) + '</div></div>';

                return tooltip;
            },
            p: {html: true}
        }, 2, 3]);

        google.visualization.events.addListener(chart, 'ready', function () {
            var labels = container.getElementsByTagName('text');
            Array.prototype.forEach.call(labels, function (label) {
                label.setAttribute('font-weight', 'normal');
            });

            setTimeout(getData, 5000);       // <-- get data and draw again in 5 seconds
        });

        chart.draw(view.toDataTable(), options);
    });
}