Vega-liteで温度測定グラフを描いてみた

ここ数日はVegaにハマっています。
IoTシステムでよく使う稼働状況グラフは表示できたので次に測定結果をグラフにすることにチャレンジしました。Node-REDのDashboardを使えば簡単に表示できますが、同じことをVega-liteで出来るようにしてみました。

mark: lineのTips

折れ線グラフはVega-liteのサンプルにもあるので簡単に表示できましたが、以下2点がちょっと不満なのであれこれと格闘してみました。

• 表示範囲にちょっと余白を持ちたい
• Vegaではデータからグラフの表示範囲（domain）を自動的に計算してくれるのですが、数値軸の場合は0から最大値までとなり、時間軸の場合はデータの時間範囲になります。
  domainを指定することでその範囲を指定することが可能ですが、データの値を元に指定したい。さらに、domainを最小値と最大値に設定すると上下（あるいは左右）に余白がなくなってグラフとしてちょっと見辛いという問題がありました。

• 時間軸の表示方法をHH:MMとしたい
• 時間軸の場合timeUnitをhoursminutesに設定すると軸ラベルはHH:MMで表示してくれるようになりますが、データも分単位に集約されてジャギーなグラフになってしまいます。測定が１秒毎のデータを表示しつつラベル表示はHH:MMとしたい時にどうしたら良いかでちょっとハマリました。

Dashboardでは何気に配慮してくれているので見やすいグラフに仕上がっています。

結果は以下のようになりました、Vega-Editorで確認してください。
ポイントはtransformのcalculateを使って軸データから上下（あるいは左右）の余白分を加減算した列を追加してdomainで指定することです。

{
    "description": "Line Chart Sample",
    "width": 600,
    "height": 600, 
    "data": {
		"values": [
			{"machine_id":"machine01","unit_address":"FC:F5:C4:1A:53:64","sensor_number":2,"sensor_type":"BME280","data":{"T":22.35,"P":980.094,"H":33.53},"sensed_at":"2021-04-21T01:35:38.000Z"},
			{"machine_id":"machine01","unit_address":"FC:F5:C4:1A:53:64","sensor_number":2,"sensor_type":"BME280","data":{"T":22.35,"P":980.096,"H":33.53},"sensed_at":"2021-04-21T01:35:43.000Z"},
			{"machine_id":"machine01","unit_address":"FC:F5:C4:1A:53:64","sensor_number":2,"sensor_type":"BME280","data":{"T":22.35,"P":980.105,"H":33.53},"sensed_at":"2021-04-21T01:35:48.000Z"},
			{"machine_id":"machine01","unit_address":"FC:F5:C4:1A:53:64","sensor_number":2,"sensor_type":"BME280","data":{"T":22.35,"P":980.116,"H":33.531},"sensed_at":"2021-04-21T01:35:53.000Z"},
			{"machine_id":"machine01","unit_address":"FC:F5:C4:1A:53:64","sensor_number":2,"sensor_type":"BME280","data":{"T":22.36,"P":980.099,"H":33.531},"sensed_at":"2021-04-21T01:35:58.000Z"},
			{"machine_id":"machine01","unit_address":"FC:F5:C4:1A:53:64","sensor_number":2,"sensor_type":"BME280","data":{"T":22.36,"P":980.138,"H":33.52},"sensed_at":"2021-04-21T01:36:03.000Z"},
			{"machine_id":"machine01","unit_address":"FC:F5:C4:1A:53:64","sensor_number":2,"sensor_type":"BME280","data":{"T":22.36,"P":980.133,"H":33.52},"sensed_at":"2021-04-21T01:36:08.000Z"},
			{"machine_id":"machine01","unit_address":"FC:F5:C4:1A:53:64","sensor_number":2,"sensor_type":"BME280","data":{"T":22.36,"P":980.152,"H":33.52},"sensed_at":"2021-04-21T01:36:13.000Z"},
			{"machine_id":"machine01","unit_address":"FC:F5:C4:1A:53:64","sensor_number":2,"sensor_type":"BME280","data":{"T":22.36,"P":980.138,"H":33.52},"sensed_at":"2021-04-21T01:36:18.000Z"},
			{"machine_id":"machine01","unit_address":"FC:F5:C4:1A:53:64","sensor_number":2,"sensor_type":"BME280","data":{"T":22.37,"P":980.143,"H":33.509},"sensed_at":"2021-04-21T01:36:23.000Z"},
			{"machine_id":"machine01","unit_address":"FC:F5:C4:1A:53:64","sensor_number":2,"sensor_type":"BME280","data":{"T":22.37,"P":980.118,"H":33.509},"sensed_at":"2021-04-21T01:36:28.000Z"},
			{"machine_id":"machine01","unit_address":"FC:F5:C4:1A:53:64","sensor_number":2,"sensor_type":"BME280","data":{"T":22.38,"P":980.124,"H":33.51},"sensed_at":"2021-04-21T01:36:33.000Z"},
			{"machine_id":"machine01","unit_address":"FC:F5:C4:1A:53:64","sensor_number":2,"sensor_type":"BME280","data":{"T":22.38,"P":980.14,"H":33.509},"sensed_at":"2021-04-21T01:36:38.000Z"},
			{"machine_id":"machine01","unit_address":"FC:F5:C4:1A:53:64","sensor_number":2,"sensor_type":"BME280","data":{"T":22.38,"P":980.126,"H":33.51},"sensed_at":"2021-04-21T01:36:43.000Z"},
			{"machine_id":"machine01","unit_address":"FC:F5:C4:1A:53:64","sensor_number":2,"sensor_type":"BME280","data":{"T":22.38,"P":980.16,"H":33.51},"sensed_at":"2021-04-21T01:36:48.000Z"},
			{"machine_id":"machine01","unit_address":"FC:F5:C4:1A:53:64","sensor_number":2,"sensor_type":"BME280","data":{"T":22.38,"P":980.126,"H":33.51},"sensed_at":"2021-04-21T01:36:53.000Z"},
			{"machine_id":"machine01","unit_address":"FC:F5:C4:1A:53:64","sensor_number":2,"sensor_type":"BME280","data":{"T":22.38,"P":980.116,"H":33.51},"sensed_at":"2021-04-21T01:36:58.000Z"},
			{"machine_id":"machine01","unit_address":"FC:F5:C4:1A:53:64","sensor_number":2,"sensor_type":"BME280","data":{"T":22.38,"P":980.144,"H":33.51},"sensed_at":"2021-04-21T01:37:03.000Z"},
			{"machine_id":"machine01","unit_address":"FC:F5:C4:1A:53:64","sensor_number":2,"sensor_type":"BME280","data":{"T":22.39,"P":980.128,"H":33.486},"sensed_at":"2021-04-21T01:37:08.000Z"},
			{"machine_id":"machine01","unit_address":"FC:F5:C4:1A:53:64","sensor_number":2,"sensor_type":"BME280","data":{"T":22.38,"P":980.11,"H":33.51},"sensed_at":"2021-04-21T01:37:13.000Z"},
			{"machine_id":"machine01","unit_address":"FC:F5:C4:1A:53:64","sensor_number":2,"sensor_type":"BME280","data":{"T":22.38,"P":980.11,"H":33.51},"sensed_at":"2021-04-21T01:37:18.000Z"},
			{"machine_id":"machine01","unit_address":"FC:F5:C4:1A:53:64","sensor_number":2,"sensor_type":"BME280","data":{"T":22.38,"P":980.094,"H":33.497},"sensed_at":"2021-04-21T01:37:23.000Z"}
		]
    },
    "transform": [
        {"calculate": "datum.data.T-0.01", "as": "minY"},
        {"calculate": "datum.data.T+0.01", "as": "maxY"}
    ],
    "mark": {"type":"line", "clip": true},
    "encoding": {
        "x": {
            "field": "sensed_at",
            "timeUnit": "hoursminutesseconds",
            "axis": { "format": "%H:%M" }
        },
        "y": {
            "field": "data.T",
            "type": "quantitative",
            "scale": {
                "domain": {"data": "data_0", "fields": ["minY", "maxY"]}
            }
        }
    }
  }

Vega-liteで稼働状況グラフを作成してみた

現在ESP32とRaspberry Piを使ってNC工作機械の稼働監視を行おうとしています。
稼働監視その物はESP32のNC工作機械主軸の電流を計測することで可能なのですが、問題はその稼働状況をグラフ化するところになります。

データはRaspberry Pi上でNode-redを動かしているのでDashboardを使えば可視化はある程度できましすが、よく見かける稼働監視グラフ（横方向の積み上げグラフあるいはガントチャートの応用）を表示しようとしてつまづきました。
Dashboardそのものはchartでグラフ化は可能ですが、積み上げグラフには対応していないようです。

node-red-node-ui-vega

ライブラリを検索しているとnode-red-node-ui-vegaというノードを発見しました。
Vega（「可視化を記述する言語」を目指した物で描画ライブラリとしてはD3を使用しているようです）及びVega-lite（Vegaの文法を簡略化した物でVega用の定義ファイルを出力して描画はVegaで行います）をNode-redから使えるようにしてくれるノードのようです。非常に高機能なグラフ化ツールのようです。積み上げグラフを表示する程度ならVega-liteで十分なようです。

サンプルも豊富に用意されていますが、残念ながらx軸を時間でとった横方向の積み上げグラフのサンプルはありませんでした。（横方向の積み上げ棒グラフのサンプルはありました）
これを修正して横軸を時間にできれば出来そうです。

ところがこれでハマってしまいました。Vegaに関する日本語の解説本もなく情報が少ない上にVegaの概念がちょっと複雑なのが原因です。基本的にはデータをチャネルという概念でデータ変換（データドメインから表示ドメインへ変換）して表示用の修飾を行って可視化（グラフ表示）するという考え方のようです。

Vega-liteによる稼働状況グラフ

結局数日かけた結果が以下のソースになります。Vega-Editorをブラウザで表示してコピペをするとどのように表示されるか見ることが出来ます。
このサイトを使えば自分で表示したいグラフのテストが簡単に出来るので開発もスムーズに出来ます。

{
  "config": {
      "legend": { "disable": true }
  },
  "width": 600,
  "height": 100,
  "data": {
    "values": [
      {"machine": "machine01", "start": "2021-04-01 08:30:00", "end": "2021-04-01 10:00:00", "color": "#ff0000"},
      {"machine": "machine01", "start": "2021-04-01 10:00:00", "end": "2021-04-01 11:15:00", "color": "#00ff00"},
      {"machine": "machine01", "start": "2021-04-01 12:00:00", "end": "2021-04-01 13:00:00", "color": "#ff00ff"},
      {"machine": "machine01", "start": "2021-04-01 14:00:00", "end": "2021-04-01 16:42:00", "color": "#0000ff"}
    ]
  },
  "mark": "bar",
  "encoding": {
    "y": {"field": "machine", "title": null},
    "x": {
      "field": "start",
      "timeUnit": "hoursminutes",
      "scale": {
        "domain": [{"hours": 8}, {"hours": 19}]
      },      
      "title": null
    },
    "x2": {
      "field": "end",
      "timeUnit": "hoursminutes"
    },
    "color": {
      "legend": {"disable": true, "title": null, "values": [ "" ]},
      "field": "color",
      "scale": {
          "range": {"field": "color"}
      }
    }
  }
}

PowerBI 32bitでMariaDBに接続できなかった件

Microsoft.PowerBI.OleDb is not registered

 最近IoT関係で計測データの分析をする必要があったのでPowerBIを使ってみました。
とりあえず自分のPCで分析できたので、顧客先のPCで同じことをやろうとしたところ上記のようなエラーになって分析できませんでした。
違いといえば自分のWindows10が64bitのProバージョンなのに対して、顧客のWindows10は32bitのHomeであることでした。

PowerBI及びMariaDB Connector/ODBCについては32bit版をインストールしたので問題ないと思ったのですが・・・
テーブルの選択は可能なのでMariaDBへの接続まではできているようです、その後内部的にデータ処理用にOleDBのオブジェクトに変換しているようで、そこでクラスが登録されていないというエラーのようです。

いつものようにGoogleさんにお伺いを立てるとこちらのサイトに行き当たりました。

内容的には64bitのPowerBIから32bitのAccessに接続しようとして発生したエラーの話のようですが、結論としてはMicrosoft Access Database Engineをインストールすれば解決するよという事のようです。OLE DBがAccess Database Engineに含まれているのかな？

一件落着

早速こちらから32bitのAccess Database Engineをダウンロードしてインストールして再度テストしましたが・・・

う・ご・か・な・い・・・

同じくOleDBが無いというエラーです。
PCを再起動してテストしても同じです。

そこで再度PowerBIも含めてインストールをやり直してみました。

1. Microsoft Access Database Engineのインストール
2. MariaDB Connector/ODBCのインストール
3. PowerBIのインストール

今度はちゃんとアクセスすることができました。

とすると、インストールされているエンジンに合わせてPowerBIが必要なモジュールをインストールしているのかもしれませんね。

いずれにしろ一件落着でした。