Android開発 | jqPlotを使ってグラフを描いてみた
JavaScriptを用いてAndroidアプリ上にグラフを描いてみようと思います。
ライブラリ選び
JavaScriptにはデータを可視化するためのグラフ用のライブラリ、プラグインが数多く存在します。有料のものもありますが、多くは無料で提供されていて、かつかっこいいデザインのものが沢山あります。今回はその中でも以下の2つのライブラリを使ってみました。
- Highcharts JS
- jqPlot
ちなみに、上記の二つのライブラリはJQueryを利用しています。
Highcharts JSを使ってAndroidアプリにグラフをいれてみる
Highcharts JSとは
Highcharts JSはJacascriptで実装されたグラフ用のライブラリです。下に主な特徴を列挙します。
- カッコイイグラフがかける。
- アニメーション付き
- グラフをjpegなどのexport機能付き
- リファレンス・サンプルコードが豊富
- グラフの種類がたくさんある
- プロット点の詳細情報表示
下の写真はサンプルコードをそのまま引用したものですが、キレイに表示されるのが見てわかると思います。
本当はアニメーションがついてたり、プロットされた点にカーソルを合わせると詳細データがでてくるのですが、スクショだけではわかりませんね。。。
Androidに組み込んでみる。
High charts JSがかっこよくて気に入ったので、早速Androidに組み込んでみました。が、結論からいうと失敗しました。
以下のような手順で行いましたので一応簡単に説明していきます
jqPlotを使ってAndroidにグラフを挿入してみる
jqPlotとは
jqPlotはグラフを書くためのJQueryのプラグインの中の１つです。下にjqPlotの特徴を列挙していきます。
- ライブラリの容量が少ないためとても軽い
- グラフの種類が豊富
- プロット点の情報詳細表示
- リファレンス・サンプルソースがまぁまぁ豊富
High charts JSほど魅力はありませんが、軽いというのはとても強みであるとおもいます。jqPlotで描いたグラフは以下のような感じになります。
Androidに組み込んでみる
結論からいいますと、成功しました。以下に手順を示していきます。
- jqPlotをダウンロードする。
公式サイトからダウンロードして、適当なところに展開します。 - HTMLファイルを作成する
展開したファイルの中から以下の４つのファイル・ディレクトリを最低限読み込む必要があります。
以下に今回のサンプルコードをのせます。以下のサンプルコードと上記の4つのファイル・ディレクトリをassetsの下にいれます(下写真参照)
- xmlファイル、javaファイルの編集
xmlファイルには先ほどと同様にwebViewだけを配置します。javaファイルも上記のソースのうちweb.loadurlの引数を以下のようにかえるだけです - 実行
表示までにすこしタイムラグがありましたが無事に表示されました。
まとめ
今回はJavascriptを使ってグラフを表示してみました。ずいぶん前にAchartEngineを使ってグラフを表示してみたことがあるとおもうのですが、個人的にはこちらの方がいろいろと自由がきくため、JavaScriptのグラフの方をおすすめします。
