2012年04月22日

[Web] node.js + nginx + jQuery + jQuery Visualize でグラフを描く

百マス計算 ではWebView内で折れ線グラフと円チャートを表示しています。

折れ線グラフと円チャートが欲しいと思ったとき、
Android SDKで実装すると、今後iPhoneのSDKでも独自に実装しなくてはいけません。

そこで、Webページで折れ線グラフと円チャートを表示するようにすれば
Android/iPhoneともにWebViewを通して同じものが表示できるということで、Webページで実装しました。

↓折れ線グラフ
20120422jquery_visualize001.png

↓円チャート
20120422jquery_visualize002.png

実装したときの手順を備忘メモ。
流れはこんな感じ

(1) jQueryの参照先を探す
(2) jQuery Visualizeをダウンロードしてnginxに置く
(3-1) コーディング(折れ線グラフ)
(3-2) コーディング(円チャート)

====================================================================
(1) jQueryの参照先を探す
必須となるjQuery。これを使うには、まずはライブラリを持ってくる必要があります。
ダウンロードしても良いのですが、GoogleがCDN(Content Delivery Network)に用意しているファイルを読み込んで使います。
少しでも自サイトの負荷を減らしたいので……。

↓今回使用したもの
http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js


(2) jQuery Visualizeをダウンロードしてnginxに置く
こちらはCDNを見つけられなかったので、ダウンロードしました。
静的ファイルなので、nginx側に置いてコーディング時に参照します。

■jQuery Visualize本体 ダウンロード元
https://github.com/filamentgroup/jQuery-Visualize
→images, css, js のディレクトリをダウンロード
→下記のnginx内にアップロード

nginx側の置き場所:
/usr/share/nginx/html/

これで準備が整いました。

あとは、node.jsとexpressフレームワークを使ってWebページを実現させた
[Web] node.jsを使ってみる(さくらVPS編)
をもとに、コーディングを始めます。
折れ線グラフと円チャートを実現させるにあたり、参考にしたサイトは↓です。

■jQuery Visualizeサンプル
http://filamentgroup.com/dwpe/#codeexamples

Chart

折れ線グラフと円チャート


■共通部分<head>のコーディング
まずは、(3-1)(3-2)共通の<head>タグ。1ファイルに記述しています。
※必要部分のみ抜粋して掲載しています
※[取得したドメイン]は、適宜読み換えてください
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0">
<title>100マス計算(100 Squares Calc)クリア状況</title>
<link rel="stylesheet" type="text/css" href="http://[取得したドメイン]/css/basic.css">
<link rel="stylesheet" type="text/css" href="http://[取得したドメイン]/css/visualize.css">
<link rel="stylesheet" type="text/css" href="http://[取得したドメイン]/css/visualize-light.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://[取得したドメイン]/lib/visualize.jQuery.js"></script>
<script>
$(document).ready(function(){
$("table.line").visualize({type:"area", width: "230px", colors: ["#7777FF"]});
$("table.line").hide();
$("table.pie").visualize({type:"pie", width: "230px", colors: ["#7777FF", "#FF7777"]});
$("table.pie").hide();
});
</script>
</head>
ここでは、jQueryをCDNから参照して、jQuery Visualizeに必要な「basic.css」「visualize.css」「visualize-light.css」
「visualize.jQuery.js」をnginxから参照しています。
下部のJavascriptはjQueryでjQuery Visualizeを使っている箇所です。
「type:"area"」が折れ線グラフ(塗り潰し)、「type:"pie"」が円チャートです。
jQueryで hide() しているのは、元となる表を表示したくないために隠しています。

また、「meta name="viewport"」は解像度をスマホの画面に合わせるためのパラメータ設定です。
これがないとPCと同じ表示になってしまって、折れ線グラフと円チャートが小さく表示されてしまいます。

(3-1) コーディング(折れ線グラフ)
折れ線グラフの元となる<table>タグの記述は↓のとおりです。
<h1>クリア時間とプレイヤー数<br />(Clearing time and number of players)</h1>
<table class="line">
<caption>足し算(Addition)</caption>
<thead>
<tr>
<td>
</td>
<th scope="col">40</th>
<th scope="col">50</th>
<th scope="col">60</th>
<th scope="col">70</th>
<th scope="col">80</th>
<th scope="col">90</th>
<th scope="col">100</th>
<th scope="col">110</th>
<th scope="col">120</th>
<th scope="col">130</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">プレイヤー数(Number of players)</th>
<td>1</td>
<td>2</td>
<td>5</td>
<td>6</td>
<td>4</td>
<td>6</td>
<td>7</td>
<td>11</td>
<td>11</td>
<td>104</td>
</tr>
</tbody>
</table>
jQuery Visualizeで参照するために「class="line"」としています。


(3-2) コーディング(円チャート)
円チャートの元となる<table>タグの記述は↓のとおりです。
<h1>クリア状況<br />(Cleared situation)</h1>
<table class="pie">
<caption>足し算(Addition)</caption>
<thead>
<tr>
<td></td>
<th scope="col">クリア</th>
<th scope="col">パーフェクト</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">クリア率(Rate of complete)</th>
<td>144</td>
</tr>
<tr>
<th scope="row">パーフェクト率(Rate of perfect)</th>
<td>14</td>
</tr>
</tbody>
</table>
jQuery Visualizeで参照するために「class="pie"」としています。

(3-1)(3-2)ともに、各数値はMySQLから引っ張ってきています。
MySQLを使った方法は 以前の記事 で掲載したので割愛します。

これで折れ線グラフと円チャートが実現できました。
とても便利なライブラリでした。
posted by be-style at 16:57| Comment(0) | Web
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント: [必須入力]