情報活用端末の作成
それでは、いよいよComponentOne Studio Chart for WinRT XAMLを使った温湿度の時系列グラフ表示アプリを作成してみましょう。
表示部分の作成
Windowsストアアプリを選択して新規プロジェクト作成すると、ツールボックスにはすでにComponentOne Studioのコンポーネントが登録されています。ツールボックスから「C1Chart」をXAMLデザイナにドラッグ＆ドロップすれば必要な設定込みで配置が完了します。
あとはX軸を日時表示したり、Y軸を2軸にして温度と湿度を表示するように調整します。
<Chart:C1Chart ChartType="Line">
<Chart:C1Chart.View>
<Chart:ChartView>
<Chart:ChartView.AxisX>
<Chart:Axis AnnoFormat="yyyyMMdd HH" AnnoAngle="-90" IsTime="True"/> <!--（1）-->
</Chart:ChartView.AxisX>
<Chart:ChartView.AxisY>
<Chart:Axis AnnoFormat="#0.##0"> <!--（2）-->
<Chart:Axis.Title>
<TextBlock Text="温度" />
</Chart:Axis.Title>
</Chart:Axis>
</Chart:ChartView.AxisY>
<Chart:ChartView.Axes>
<Chart:Axis Name="H" AxisType="Y" Position="Far" AnnoFormat="#0.##0"> <!--（3）-->
<Chart:Axis.Title>
<TextBlock Text="湿度" />
</Chart:Axis.Title>
</Chart:Axis>
</Chart:ChartView.Axes>
</Chart:ChartView>
</Chart:C1Chart.View>
<Chart:C1Chart.Data>
<Chart:ChartData ItemsSource="{Binding Items}">
<Chart:ChartData.Children> <!--（4）-->
<Chart:XYDataSeries Label="Temperature" ValueBinding="{Binding Temperature}" XValueBinding="{Binding __createdAt}"/>
<Chart:XYDataSeries Label="Humidity" ValueBinding="{Binding Humidity}" XValueBinding="{Binding __createdAt}" AxisY="H"/>
</Chart:ChartData.Children>
</Chart:ChartData>
</Chart:C1Chart.Data>
<Chart:C1ChartLegend Position="Bottom"/>
</Chart:C1Chart>
- （1）X軸が時間であることを指定
- （2）Y軸の1つ目を気温として指定
- （3）Y軸の2つ目を湿度として指定
- （4）データを表示するクラスとプロパティを指定してBinding
これで表示部分は完成です。
ロジック部分の作成
次にMicrosoft Azure Mobile Servicesからデータを取得する部分を作成します。ソリューションエクスプローラでプロジェクトを右クリックして［NuGetパッケージの管理］メニューをクリックし、NuGetダイアログで「Azure Mobile Services」を検索して追加します。
Public Items As New ObservableCollection(Of Item) '（1）
Public Async Function GetData() As Task
Using mobileService = New MobileServiceClient(UrlString) '（2）
Dim qTable = mobileService.GetTable(Of Item)（) '（3）
Dim recs = Await qTable.ReadAsync '（4）
Me.Items.Clear()
For Each rec In recs
Me.Items.Add(rec) '（5）
Next
End Using
End Function
- （1）データ表示用クラスの定義
- （2）Mobile Services（cz1501service）との接続
- （3）テーブルの指定（取得クラス名はテーブル名と同じにする）
- （4）データ取得
- （5）取得したデータを表示用クラスに設定
あとは表示部分とロジック部分をつなげるViewModel部分を作成すれば完成です。
実行
実行してみるとデバッグ中や実行確認を行っていてデータ抜け（グラフでまっすぐ右下がりしている部分）している部分もありますが、急速に気温と湿度が下がっているのが一目で分かります。また湿度はあるところから横ばいで必ずしも気温と連動しているばかりではないということも発見できます。
自室内なのですがエアコンを使っていない部屋なので、ほぼ外気の影響下にある測定結果といえるでしょう。
まとめ
このようにセンサーを使ってクラウドで収集してタブレットで確認するということは数年前まで個人ベースで行えることではありませんでした。最近の傾向が後押ししていることは確実ですが、センサー＆デバイスを駆使してIoTに注目していくと、やはり、データのビジュアライズというのが非常に重要であることが再確認できます。
タブレットと相性のいいWindowsストアアプリで見栄えの良いグラフが表示できるComponentOne Studio Chart for WinRT XAMLが活躍する曲面は今後ますます増えていく事でしょう。
