HighChartsで1つのグラフに複数の要素を入れる方法

HighChartsってすばらしいですね。

我が家にはパーソナルウェザーステーション(Oregon sientific WNR100N)が設置してあって、なんとかそのデータをウェブで公開してどこからでも我が家の気象情報にアクセスしたいと思っていました。

調べて出てきたのが、これ。

weewx

Linuxで動くデータ収集ツール。USBで接続されたWeather Stationからデータを定期的に読み取りMySQLに入れるというツールで、Pythonで動いている。
そしてそれをきれいに表示していたサイトがこちら。

yr.hveem.no

ShowCaseに出ている大半のサイトは既存のフロントエンドをそのまま、もしくはカスタマイズして使っているけれども、ここはJSを使ってうまく表現していた。

このサイトのソースコードはGithubで公開されていて、当初はそのまま使わせてもらおうと思ったんですが、見てみるとweewxにパッチを当てて(要はweewxをカスタムして)おり、さらにPostgreSQLを使うようで、ちょっとめんどくさかった。

そこで、これを参考にさせていただいて、オリジナルで作ったのが、これ。

wx.piyo.org

最初はyr.hveem.noのソースコードをだいぶ使わせて貰っていたんだけれども、最終的にはほぼスクラッチになりました。

使っているシステムは以下の通り。

  • バックエンド(データ収集): weewx (Python + MySQL)
  • バックエンド(WebAPI):nginx + wsgi + Python with Flask
  • フロントエンド:html, Highcharts, Bootstrap

Pythonでウェブアプリを書くときはもちろんFlask。Flaskへの愛は前回のエントリをご参照ください。

で、フロントエンド部分ではBootstrapでレイアウトを決めて、ajaxでwebapiをたたいて必要なデータをjson形式で受け取ってHighchartsでウェザーステーションのデータを表示しています。

Highchartsはいろいろな表現をグラフに入れる事ができます。

中でも複数の系統のデータを一つのグラフに収められるのがとても便利です。

ウェザーステーションのグラフでも1つのグラフに4系統収めています。縦軸は左と右の2種類しか表示できないのですが、UV Indexや降水量といった常に値のあるデータで無い場合は、それ用にグラフを作るのではなく、縦軸表示は無くてもまとめて表示するのがいいと思います。

その書き方の以下を参照してほしい。

      /**
       * 気温と紫外線
       **/
      $('#container1').highcharts({
        chart: { zoomType: 'x' },
        title: { text: '気温・気圧・紫外線' },
        xAxis: {
          type: 'datetime',
          tickInterval: 6 * 3600 * 1000,
          tickWidth: 0,
          gridLineWidth: 1
        },
        yAxis: [{
          title: { text: '温度(°C)' },
          opposite: true,
          max: 40,
          min: -10,
          tickInterval: 10,
          startOnTick: false,
          maxPadding: 0,
          minPadding: 0,
          plotLines:[{
            value: 0,
            width: 1,
            color: '#808080'
          }]
        },{
          title: { text: null },
          startOnTick: false,
          maxPadding: 0,
          minPadding: 0,
          max: 20,
          min: 0,
          opposite: true,
          gridLineWidth: 0,
          labels: {
            enabled: false
          },
          plotLines:[{
            value: 0,
            width: 0,
            color: '#808080'
          }]
        },{
          title: { text: "気圧(hPa)" },
          max: 1020,
          min: 900,
          tickInterval: 30,
          startOnTick: false,
          maxPadding: 0,
          minPadding: 0
        }],
        tooltip: {
          shared: true,
          crosshairs: true
        },
        plotOptions:{
          line:{
            marker: {
              radius: 1,
              symbol: "circle"
            }
          }
        },
        series: [{
          type: 'spline',
          tooltip: { valueSuffix: '°C' },
          pointStart: startDate,
          pointInterval: 60 * 60 * 1000,
          name: '屋外温度',
          color: "#ffd700",
          data: data['outtemp']
        },{
          type: 'spline',
          tooltip: { valueSuffix: '°C' },
          pointStart: startDate,
          pointInterval: 60 * 60 * 1000,
          name: '室内温度',
          color: "#4169e1",
          data: data['intemp']
        },{
          type: 'spline',
          tooltip: { valueSuffix: '°C' },
          pointStart: startDate,
          pointInterval: 60 * 60 * 1000,
          name: '結露温度',
          data: data['dewpoint']
        },{
          type: 'column',
          yAxis: 1,
          pointStart: startDate,
          pointInterval: 60 * 60 * 1000,
          name: 'UV Index',
          color: "#ff0000",
          pointPadding: 0,
          data: data['UV']
        },{
          type: 'line',
          yAxis: 2,
          pointStart: startDate,
          tooltip: { valueSuffix: 'hPa' },
          pointInterval: 60 * 60 * 1000,
          name: '気圧',
          data: data['altimeter']
        }]
      });

ポイントとしてはyAxisで縦軸を表示しない用を用意して、seriesで縦軸を表示しないデータはproperty yAxisの値にyAxisを指定する事です。そうする事で、縦軸表示はは無いけどグラフには表示されるようになります。

あと、Highchartsの便利なところはドキュメントがjsfiddleというお試しツールとリンクしていて、そのパラメータの効果をお試しできるところです。ここで動作を確かめて思う通りの動きである事を確認できます。

いやー、Hightchartsって本当にすばらしいですね。

ちなみにうちのウェザーステーションデータサイトは今後はこよみ情報なんかをつけてもっと楽しくする予定ですのでお楽しみに。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です