Javascriptのグラフ描画ライブラリJSChartsを試してみた。

Webページ上にチャートを描画するJavascriptライブラリに JSCharts というのがある。シンプルなAPIかつ、綺麗なチャートが描画できそうだったので試してみた。

JSCharts

JSChartsは、http://www.jumpeyecomponents.com/というサイトで公開されているソフトウェアライブラリの1つ。このサイトは、有償ソフトウェアを販売しているっぽくて、JSChartsも有償。ただ、同サイトにユーザ登録をし、JSChartsで描画するチャートにウォータマークを表示する、という条件で無料で利用できる。今回試したのは無料版。

価格

ちなみに、JSChartsの価格は2013年11月末現在、http://www.jscharts.com/free-downloadにあるように、1ドメインでの非商用利用で$39、商用利用で$79というお値段。

チャート

JSチャートがサポートするチャートは、

• Line Chart
• Bar Chart
• Pie Chart

の3種類。チャートの種類は少ないけど、色が設定やツールチップや凡例の表示が細かくできる点が強いところに見える。チャートの例や具体的なAPIは本家のサイトに詳しく書いてあるのでここには書かないけど、実際にチャートを描画したイメージを張っておく。

画像、もしくは実際のサイト上の描画(http://simalabs.com/labs/jscharts)をよく見るとわかるんだけど、各チャートの左上に「JSCharts」っていう画像が表示されていて、これがそのウォータマークってやつ。これを表示させないためには、お金払ってね、ということ。けど、実際にWebページ上に敢えてチャート出す時って、軸や値の数値も見れた方が嬉しい、という人のほうが多いと思うし、4,000円乃至8,000円は払っても損はないかなと思います。以前試したChart.jsよりは個人的にはJSChartsの方が使いたいと思ってる。(Javascriptのグラフ描画ライブラリChart.jsを試してみた。参照)

Javascriptのストリーミングデータ用チャートライブラリSmoothie Chartsを試してみた。

Javascriptのチャートライブラリを調べていて、ちょっと変わったライブラリをみつけたので試してみた。
今回試したのは、Smoothie Chartsというもので、ストリーミングデータを時系列なラインチャートとして表示するもの。MITラインセンスのオープンソースで、githubにホスティングされてる。

リアルタイムな時系列チャートを描く

このライブラリを使うと、簡単にリアルタイムな時系列チャートが描画できる。使い方は、チュートリアルがあり、本当に簡単すぎる・・・

ポイントとしては、

• canvasタグを利用する。
• setInterval関数を使ってリアルタイムにチャートを更新する。

というところか。

実際にページ上で使ってみた例が、このキャプチャになります。

ここに動くページを作ってみたよ。

Rails4からActiveRecordのorderにハッシュを渡せるようなった。

以前、[rails]ActiveRecordのソートという記事を書いた。あれからおよそ1年半の間にRails4がリリースされ、まさにこのソートの機能も改良されたっぽい。

order(*args)

ActiveRecordのソート処理は、ActiveRecord::QueryMethods.orderで実装されている。これまでは、

User.order('name')
=> SELECT "users".* FROM "users" ORDER BY name

User.order('name DESC')
=> SELECT "users".* FROM "users" ORDER BY name DESC

User.order('name DESC, email')
=> SELECT "users".* FROM "users" ORDER BY name DESC, email

User.order(:name)
=> SELECT "users".* FROM "users" ORDER BY "users"."name" ASC

しかなかったのに対し、Rails4から、

User.order(email: :desc)
=> SELECT "users".* FROM "users" ORDER BY "users"."email" DESC

User.order(:name, email: :desc)
=> SELECT "users".* FROM "users" ORDER BY "users"."name" ASC, "users"."email" DESC

のように、ハッシュでソート条件を指定できるようになった。
おかけで、降順もスマートに指定できるね。

Javascriptのグラフ描画ライブラリChart.jsを試してみた。

Javascriptによるグラフ表示用のライブラリってたくさんある。まとめサイトもたくさんある。実際に触ってみると良し悪しがよりわかる。 ということで、1つ試してみた。
今回試したのは、Chart.jsです。canvasタグを使ったHTML5のチャートライブラリ。 MITライセンスなオープンソース。https://github.com/nnnick/Chart.jsにソースがあります。

描画できるチャートの種類

Chart.jsがサポートしているのは、

• Line Chart
• Bar Chart
• Radar Chart
• Polar Area Chart
• Pie Chart
• Doughnut Chart

の6種類。Polar Area Chartっていうのはあまり見ないなぁ。

使ってみた。

6つのチャートを全部表示してみたけど、簡単だった。APIに統一感があって、チャートの種類によらない感じがいい。 具体的な使い方は、ドキュメント読んだら一目瞭然なので、ここには書きません。

  

実際に試したらば、←のようになった。実物は、http://simalabs.com/labs/chartjsを見てみて下さい。 それと、Chart.jsでは、

• 凡例を表示することができない。
• チャートの値をhoverしてtipを出すとかもできない。

ということができない、ってことは気にしておくベきかなと思った。

Rからmongodbにアクセスするrmongodbをインストールした。

Rで統計解析しようと思っていた元ネタをmongodbに格納していて、今まではrubyでmongodbに突っ込んで、 Rにデータを渡すのに、CSVファイルをrubyで作って、みたいなことをやっていた。が、 MongoDBの集計機能が便利過ぎて泣けてくるお話し を読んで、 rmongodb というRのパッケージの存在を知ったので、インストールしてみた。

rmongodbのインストール

sudoでRを起動し、install.packagesするだけ。簡単。

> install.packages("rmongodb")
 パッケージを ‘/usr/local/lib/R/site-library’ 中にインストールします 
 (‘lib’ が指定されていないので) 
 URL 'http://cran.ism.ac.jp/src/contrib/rmongodb_1.0.5.tar.gz' を試しています 
Content type 'application/x-gzip' length 112861 bytes (110 Kb)
 開かれた URL 
==================================================
downloaded 110 Kb

* installing *source* package ‘rmongodb’ ...
**  パッケージ ‘rmongodb’ の解凍およびMD5サムの検証に成功しました 
** libs
gcc -std=gnu99 -I/usr/share/R/include -DNDEBUG     -D_MONGO_USE_GETADDRINFO -DR_SAFETY_NET -fpic  -O2 -pipe -g  -c api.c -o api.o
gcc -std=gnu99 -I/usr/share/R/include -DNDEBUG     -D_MONGO_USE_GETADDRINFO -DR_SAFETY_NET -fpic  -O2 -pipe -g  -c api_bson.c -o api_bson.o
gcc -std=gnu99 -I/usr/share/R/include -DNDEBUG     -D_MONGO_USE_GETADDRINFO -DR_SAFETY_NET -fpic  -O2 -pipe -g  -c api_gridfs.c -o api_gridfs.o
gcc -std=gnu99 -I/usr/share/R/include -DNDEBUG     -D_MONGO_USE_GETADDRINFO -DR_SAFETY_NET -fpic  -O2 -pipe -g  -c api_mongo.c -o api_mongo.o
gcc -std=gnu99 -I/usr/share/R/include -DNDEBUG     -D_MONGO_USE_GETADDRINFO -DR_SAFETY_NET -fpic  -O2 -pipe -g  -c bson.c -o bson.o
gcc -std=gnu99 -I/usr/share/R/include -DNDEBUG     -D_MONGO_USE_GETADDRINFO -DR_SAFETY_NET -fpic  -O2 -pipe -g  -c encoding.c -o encoding.o
gcc -std=gnu99 -I/usr/share/R/include -DNDEBUG     -D_MONGO_USE_GETADDRINFO -DR_SAFETY_NET -fpic  -O2 -pipe -g  -c env.c -o env.o
gcc -std=gnu99 -I/usr/share/R/include -DNDEBUG     -D_MONGO_USE_GETADDRINFO -DR_SAFETY_NET -fpic  -O2 -pipe -g  -c gridfs.c -o gridfs.o
gcc -std=gnu99 -I/usr/share/R/include -DNDEBUG     -D_MONGO_USE_GETADDRINFO -DR_SAFETY_NET -fpic  -O2 -pipe -g  -c md5.c -o md5.o
gcc -std=gnu99 -I/usr/share/R/include -DNDEBUG     -D_MONGO_USE_GETADDRINFO -DR_SAFETY_NET -fpic  -O2 -pipe -g  -c mongo.c -o mongo.o
gcc -std=gnu99 -I/usr/share/R/include -DNDEBUG     -D_MONGO_USE_GETADDRINFO -DR_SAFETY_NET -fpic  -O2 -pipe -g  -c numbers.c -o numbers.o
gcc -std=gnu99 -I/usr/share/R/include -DNDEBUG     -D_MONGO_USE_GETADDRINFO -DR_SAFETY_NET -fpic  -O2 -pipe -g  -c symbols.c -o symbols.o
gcc -std=gnu99 -I/usr/share/R/include -DNDEBUG     -D_MONGO_USE_GETADDRINFO -DR_SAFETY_NET -fpic  -O2 -pipe -g  -c utility.c -o utility.o
gcc -std=gnu99 -shared -o rmongodb.so api.o api_bson.o api_gridfs.o api_mongo.o bson.o encoding.o env.o gridfs.o md5.o mongo.o numbers.o symbols.o utility.o -L/usr/lib/R/lib -lR
 以下にインストール中:  /usr/local/lib/R/site-library/rmongodb/libs
** R
** demo
** preparing package for lazy loading
** help
*** installing help indices
** building package indices
** testing if installed package can be loaded
rmongodb package (mongo-r-driver) loaded
Use 'help("mongo")' to get started.


* DONE (rmongodb)

 ダウンロードされたパッケージは、以下にあります 
  ‘/tmp/RtmpDFyqNs/downloaded_packages’ 
> 
> 

Rからmongodbにつないでみる。

> library(rmongodb)
rmongodb package (mongo-r-driver) loaded
Use 'help("mongo")' to get started.

> mongo <- mongo.create()
> mongo.is.connected(mongo)
[1] TRUE
> mongo.count(mongo, 'ドキュメント名.コレクション名')
[1] 3713
>

まだ、詳しく使い方をわかっていないけど、上記でlocalhostのmongodbに接続し、 指定したドキュメントの指定したコレクションの件数を取得することができた。