Question

  <!doctype html>
<html>

<head>
    <title>Machine Learning Data Dashboard</title>
    <link rel="stylesheet" href='../static/style.css'/>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <style>
        body {
            text-align: center;
        }
        #g1,
        #g2,
        #g3,
        #g4 {
            width: 350px;
            height: 260px;
            display: inline-block;
            margin: 4em;
        }
    </style>
</head>

<body>
    <h1>Machine Learning Data Dashboard</h1>
    <div id="g1"></div>
    <div id="g2"></div>
    <div id="g3"></div>
    <div id="g4"></div>
    <hr>
    <h3> Last Sensors Reading: {{ time }} ==> <a href="/"class="button">REFRESH</a></h3>    
    <hr>
    <h3> HISTORICAL DATA </h3>
        <p> Enter number of samples to retrieve:
        <form method="POST">
            <input name="numSamples" value= {{numSamples}}>
            <input type="submit">
        </form></p>
        <hr>
        <img src="/plot/temp" alt="Image Placeholder" width="22%">
        <img src="/plot/hum" alt="Image Placeholder" width="22%">
        <img src="/plot/nois" alt="Image Placeholder" width="22%">
        <img src="/plot/pres" alt="Image Placeholder" width="22%">
    <p> @2018 Developed by MJRoBot.org</p>

    <script src="../static/raphael-2.1.4.min.js"></script>
    <script src="../static/justgage.js"></script>
    <script>
        var g1, g2, g3, g4;
        document.addEventListener("DOMContentLoaded", function(event) {
            g1 = new JustGage({
                id: "g1",
                value: {{temp}},
                valueFontColor: "yellow",
                titleFontColor: "yellow",
                pointer: true,
                min: -10,
                max: 50,
                pointer: true,
                    pointerOptions: {
                      stroke_width: -1,
                      stroke_linecap: 'round'
                    },
                title: "Temperature",
                label: "°C"
            });
            g2 = new JustGage({
                id: "g2",
                value: {{hum}},
                valueFontColor: "yellow",
                titleFontColor: "yellow",
                donut: true,
                pointer: true,
                    gaugeWidthScale: 0.4,
                min: 0,
                max: 100,
                title: "Humidity",
                label: "%"
            });
            g3 = new JustGage({
                id: "g3",
                value: {{nois}},
                valueFontColor: "yellow",
                titleFontColor: "yellow",
                donut: true,
                pointer: true,
                    gaugeWidthScale: 0.4,
                min: 0,
                max: 100,
                title: "Noise",
                label: "dB"
            });
            g4 = new JustGage({
                id: "g4",
                value: {{pres}},
                valueFontColor: "yellow",
                titleFontColor: "yellow",
                min: 0,
                max: 100,
                pointer: true,
                    pointerOptions: {
                      toplength: 8,
                      bottomlength: -20,
                      bottomwidth: 6,
                      stroke_width: 3,
                      stroke_linecap: 'round'
                    },
                gaugeWidthScale: 0.1,
                title: "Pressure",
                label: "Pa"
            });

            setInterval(function() {
                  g1.refresh();
                  g2.refresh;
                  g3.refresh;
                  g4.refresh;
                }, 2500);



        });
    </script>
</body>

</html>

我正在尝试让项目中的gage值自动更新，而不是通过单击当前的REFRESH按钮进行更新。

有一个Justgage示例显示自动刷新，如下面的代码：

 setInterval(function() {
      g1.refresh(getRandomInt(50, 100));
      g2.refresh(getRandomInt(50, 100));
      g3.refresh(getRandomInt(0, 50));
      g4.refresh(getRandomInt(0, 50));
    }, 2500);

这里使用随机数，但我的4个变量是由数据库的数据更新的，所以我不需要随机部分。

任何人都可以建议我应该如何编写这部分代码来自动刷新量具？

的setInterval？ setTimeout的？还是需要Ajax？

我的Javascript很差，谢谢。

自动刷新Justgage中的值

0 个答案: