如何将变量添加到javascripts chart.js到实时图形中

时间:2019-04-24 14:06:36

标签: javascript php chart.js real-time

我在PHP代码中有两个变量,其中包含数据int,数据每秒都会更改。

这是php代码中的变量:

<?php
$jarak = $_GET["id"];
$jarak2 = $_GET["id2"];
?>

所以我想将该变量插入到javascript图表代码中,以使用该变量制作实时图表

这是图表的javascript代码:

(function($) {

    'use strict';

    $(document).ready(function() {

        // Draws a realtime Rickshaw Chart
        (function() {
            var container = '#rickshaw-realtime';

            var seriesData = [
                [],
                [],
                []
            ];
            var random = new Rickshaw.Fixtures.RandomData(100);
            for (var i = 0; i < 50; i++) {
                random.addData(seriesData);
            }
            var graph = new Rickshaw.Graph({
                element: document.querySelector(container),
                height: 500,
                width: $(container).width(),
                renderer: 'area',
                padding: {
                    top: 0.5
                },
                series: [{
                    data: seriesData[0],
                    color: $.Pages.getColor('success-light', .5), // Get Pages contextual color
                    name: 'DB Server'
                }, {
                    data: seriesData[1],
                    color: $.Pages.getColor('master-light'), // Get Pages contextual color
                    name: 'Web Server'
                }]
            });

            var y_axis = new Rickshaw.Graph.Axis.Y({
                graph: graph,
                orientation: 'right',
                tickFormat: Rickshaw.Fixtures.Number.formatKMBT,
                element: document.getElementById('rickshaw-realtime_y_axis'),
            });

            var hoverDetail = new Rickshaw.Graph.HoverDetail({
                graph: graph
            });

            // Update the graph with realtime data. 
            setInterval(function() {
                random.removeData(seriesData);
                random.addData(seriesData);
                graph.update();
            }, 1000);

            d3.selectAll('#rickshaw-realtime_y_axis .tick.major line').attr('x2', '7');
            d3.selectAll('#rickshaw-realtime_y_axis .tick.major text').attr('x', '12');

            $(window).resize(function() {
                graph.configure({
                    width: $(container).width(),
                    height: 500
                });
                graph.render()
            });
            $(container).data('chart', graph);

        })();
    });
})(window.jQuery);

这是带有随机数据的图表:

enter image description here

0 个答案:

没有答案