7. 最新の何点かだけ表示したい

7.1. 完了イメージ

スライダーを動かして、より新しいデータだけを拡大できます。

7.2. 手順1

メニューバーをクリック

7.3. 手順2

「Flow Editor」をクリック

7.4. 手順3

「フロー2」タブをクリック

7.5. 手順4

「function」ノードを新規作成

7.6. 手順5

「slider」ノードを新規作成し、先ほど追加したfunctionノードと線で結ぶ

7.7. 手順6

「inject」ノードを新規作成し、先ほど追加したsliderノードと線で結ぶ

7.8. 手順7

追加したinjectノードをダブルクリック

7.9. 手順8

「名前」欄に「initialize」と入力。「msg.topic」は×をクリックして削除。

7.10. 手順9

「msg.payload」右横のプルダウンを展開し、「数値」をクリック

7.11. 手順10

「100」を入力。さらに、チェックボックスにチェックを入れる。

7.12. 手順11

「完了」をクリック

7.13. 手順12

「slider」ノードをダブルクリック

7.14. 手順13

プロパティを編集（赤枠内と同じ状態にする）

7.15. 手順14

下にスクロールし、「Topic」横のプルダウンを展開して「文字列」をクリック

7.16. 手順15

「Topic」欄に「slider」、「Name」欄に「slider 0」と入力

7.17. 手順16

「完了」をクリック

7.18. 手順17

「function」ノードをダブルクリック

7.19. 手順18

コード2行目「return msg;」を削除

7.20. 手順19

以下をコピーし、コード欄にペースト

const maxSlider = 100; //スライダーの最大値
let slider;
let chartData;
let chartSeries;

// sliderノードからmsgが来た時
if (msg.topic == 'slider'){
    // スライダーの値をコンテキストに保存
    context.set('slider', msg.payload);

// functionノードからmsgが来た時
} else {
    // msg.payload = [{series: ..., data: ...}] の時
    if(msg.payload.length != 0){
        // データをコンテキストに保存
        context.set('series', msg.payload[0].series);
        context.set('data', msg.payload[0].data);
    // msg.payload = [] の時
    }else{
        context.set('series', []);
        context.set('data', []);
    }
}

//スライダーの値を取得
slider = context.get('slider') || maxSlider;

//コンテキストからデータを取得
const tmp = context.get('data') || [];
//一番古いタイムスタンプを取得
let stUnixTime = tmp.filter(elem => elem.length != 0).map(elem => {
    const firstData = elem[0];
    return firstData.x;
}).reduce((preVal, curVal) => {
    if(curVal < preVal){
        preVal = curVal;
    }
    return preVal;
}, Number.MAX_VALUE);
//一番新しいタイムスタンプを取得
let edUnixTime = tmp.filter(elem => elem.length != 0).map(elem => {
    let lastData = elem[elem.length - 1];
    return lastData.x
}).reduce((preVal, curVal) => {
    if(preVal < curVal){
        preVal = curVal;
    }
    return preVal;
}, Number.MIN_VALUE);

//スライダーの割合だけ、データを残す
let limit = stUnixTime + (edUnixTime - stUnixTime) * (1 - slider / maxSlider);
chartData = tmp.map(elem =>{
    if(elem.length != 0){
        return elem.filter(e => e.x > limit);
    }else{
        return elem;
    }
});

//return
chartSeries = context.get('series') || [];
if(chartSeries.length == 0){
    //系列未選択時
    return {payload: []};
}else{
    return {
        payload: [
            {
                series: chartSeries,
                data: chartData,
            }
        ]
    };
}

7.21. 手順20

「完了」をクリック

7.22. 手順21

「chart0」ノードの直前に、下図のように配置する

注釈

他のグラフにもスライダーを追加するには、「Chart1」や「Chart2」ノードの前にスライダーを追加すればよい。ただし、手順13のGroup選択をスライダーを追加するChartに合わせること。

7.23. 手順22

「デプロイ」をクリック

7.24. 手順23

可視化画面のレイアウトが崩れる場合があるので、マニュアル項目「画面レイアウト（パーツの配置）を変えたい」を参考に、レイアウトを整える。