基本的な折れ線グラフ

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

FAKE( linspace(0, 360, 100))
// |   0
// +-> x
// |
MAPVALUE(1, sin((value(0)/180)*PI))
// |   0   1
// +-> x   sin(x)
// |
CHART(
    chartOption({
        xAxis: {
            type: "category",
            data: column(0)
        },
        yAxis: {},
        series: [
            {
                type: "line",
                data: column(1)
            }
        ]
    })
)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20

SCRIPT({
    for( x = 0; x < 360; x+=3.6) {
        $.yield(x, Math.sin(x/180*Math.PI));
    }
})
CHART(
    chartOption({
        xAxis: {
            type: "category",
            data: column(0)
        },
        yAxis: {},
        series: [
            {
                type: "line",
                data: column(1)
            }
        ]
    })
)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

FAKE( arrange(1, 100, 1))
// |   0
// +-> seq
// |
MAPVALUE(1, sin((2*PI*value(0)/100)))
// |   0       1
// +-> seq     value
// |
MAPVALUE(0, timeAdd("now-100s", strSprintf("+%.fs", value(0))))
// |   0       1
// +-> time    value
// |
PUSHVALUE(0, "chart-line")
// |   0       1       2
// +-> name    time    value
// |
APPEND(table("example"))

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

SCRIPT({
    const { arrange } = require("mathx");
    now = (new Date()).getTime() - 100 * 1000; // 現在時刻の100秒前。
    for(x of arrange(1, 100, 1)) {
        y = Math.sin(x/100*2*Math.PI)
        ts = new Date(now + x * 1000); // 1秒加算
        $.yield("chart-line", ts, y);
    }
})
APPEND(table("example"))

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

SQL(`select time, value from example where name = 'chart-line'`)
SCRIPT({
    $.yield([$.values[0], $.values[1]])
})
CHART(
    chartOption({
        xAxis: { type: "time" },
        yAxis: {},
        tooltip: { trigger:"axis" },
        series: [
            {
                type: "line",
                data: column(0)
            }
        ]
    })
)

 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

SCRIPT({
    const {Client} = require("machcli");
    var db, conn, rows;
    var data = [];
    const conf = { user: 'sys', password: 'manager' };
    try {
        db = new Client(conf);
        conn = db.connect();
        rows = conn.query(`select time, value from example where name = ?`, 'chart-line')
        for( r of rows) {
            data.push([r.time, r.value]);
        }
    } catch( e ) {
        console.println("ERROR", e.message);
    } finally {
        rows && rows.close();
        conn && conn.close();
        db && db.close();
    }
    $.yield({
        xAxis: { type: "time" },
        yAxis: {},
        tooltip: { trigger:"axis" },
        series: [
            {
                type: "line",
                data: data,
            }
        ]
    })
})
CHART()

 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

SQL(`select time, value from example where name = 'chart-line'`)
SCRIPT({
    data = [];
}, {
    data.push([$.values[0], $.values[1]]);
}, {
    $.yield(data); 
})
HTML(template({
    <span>
        <script src="/web/echarts/echarts.min.js"></script>
        <div id='xyz' style="width:600px;height:400px;"></div>
        <script>
            var data = {{ .Values }};
            var chartDom = document.getElementById('xyz');
            var myChart = echarts.init(chartDom);
            var option = {
                xAxis: { type: "time" },
                yAxis: {},
                tooltip: { trigger:"axis" },
                series: [
                    {type: 'line',  data: data[0], symbol:"none"}
                ]
            };
            option && myChart.setOption(option);
        </script>
    </span>
}))