株式会社インデペンデンスシステムズ横浜システム開発エンジニアの西田五郎が運営しております。その他新規開発案件のご依頼をお待ちしております。APIでデータ蓄積の続きの2回目です。前回は温度データを最新から一覧表示するページを作成しました。今回は温度データのグラフを表示するページを作成します。最終的に以下のように表示するページを作成します。APIを利用して温度データを取得します。Toolsでグラフ表示します。使いましたがJavaScript系のグラフ表示ライブラリは、もちろん他にもいろいろとあります。ここでは単純にGoogleブランドと商用利用化ということで選択しました。申し訳ありませんが、他のライブラリとの比較等はしていません。オブジェクトとして作成するということを挙げたいです。マニュアルからの引用ですが以下のような形式です。Wrapperというのがあったのでこれを利用させて頂きました。DataTableに変換してその形式でレスポンスを返します。Toolsでグラフを表示するということを優先します。実際にグラフ表示を実装していきます。前回のプロジェクトに追加していきます。前回のプロジェクトは以下です。(※単なるサンプルプログラムです。ご利用による不具合、不利益等について弊社は一切責任を負わないものとします。Wrapperをダウンロードします。Studioでプロジェクトを開いた状態で参照を追加します。参照マネージャの一番下の参照から参照ボタンで追加します。以下のように追加されました。温度データを取得するためのAPIを実装します。GETで実装することとして、パラメータとして以下を渡すこととします。これを前回まで作成しているTemperatureDatasControllerクラスに追加します。Ok(dt.GetJson());}次にグラフを表示するページです。id="ChartPlaceHolder">ここにチャートが表示されます。src="/Scripts/respond.js"></script></body></html>まず、表示関連としてbootstrap.cssを取り込んで何となく他のビューと同じような表示になるようにしました。次にグラフですが、JQueryでGetしたレスポンスをそのままの形式でDataTableを生成しています。ASP.NET側でライブラリを利用してDataTableの形式にしたのでここではそのまま生成できます。これを、オプションを付加して折れ線グラフで表示しています。最後にこのグラフページの静的リンクをナビ部分に追加します。_Layout.cshtmlを編集します。以下はナビ部分のみです。</div>その他の課題として処理中の表示や時間の入力方法等があると思いますが、正常に動作するとグラフが表示されるところまでは確認出来ましたのでここまでとします。Pi側も含めて、温度データの蓄積と表示、グラフ表示が出来ました。課題といいますと認証等いろいろと思います。今回の最終的なプロジェクトは以下です。APIでデータ蓄積の6回目です。APIテンプレートからプロジェクトを作成しました。Identityフレームワーク)の5回目です。前回は、ユーザ登録の項目を追加する方法を確認しました。AzureでASP.NETサイトを公開してみるの2回目です。2013で利用可能なASP.NETでのユーザ認証とユーザ管理のフレームワークを使ってみました。APIでデータ蓄積の5回目です。APIの開発方法を確認しました。株式会社インデペンデンスシステムズ横浜システム開発エンジニアの西田五郎が運営しております。その他新規開発案件のご依頼をお待ちしております。