Update Gauge

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

FAKE(linspace(0, 1, 1))
CHART(
    chartOption({
        tooltip: {
            formatter: "{a} <br/>{b} : {c}%"
        },
        series: [
            {
                name: "Pressure",
                type: "gauge",
                progress: {
                    show: true
                },
                detail: {
                    valueAnimation: true,
                    formatter: "{value}"
                },
                data: [
                    {
                        value: 0,
                        name: "RANDOM"
                    }
                ]
            }
        ]
    }),
    chartJSCode({
        function updateGauge() {
            fetch("/db/tql", {
                method: "POST",
                body: `
                    FAKE(linspace(0, 1, 1))
                    MAPVALUE(0, floor(random() * 100))
                    JSON()
                `
            }).then(function(rsp){
                return rsp.json()
            }).then(function(obj){
                _chartOption.series[0].data[0].value = obj.data.rows[0][0]
                _chart.setOption(_chartOption)
                if (document.getElementById(_chartID) != null) {
                    setTimeout(updateGauge, 1000)
                }
            }).catch(function(err){
                console.warn("data fetch error", err)
            });
        };
        setTimeout(updateGauge, 10)
    })
)