javascriptで使えるグラフについて

[ぷりっぷりのおしり]

ぷりけつです。

html+css+jsで使えるグラフをさがしています。jQueryプラグインが望ましいです。ご存知の方いたら教えてください。

■いま自分が求めているグラフ

マルチグラフ対応

棒グラフは3D

インタラクティブなアクション(hoverでプルプルして欲しい)

■今知ってるグラフ

qiitaのプロフィールの円グラフで使われているjQueryプラグインのraphael.js

http://raphaeljs.com/

美しめなグラフを作成することができる。

raphael.jsのプラグインのelycharts.js

http://elycharts.com/docs

マルチグラフ対応。棒グラフ×線グラフなんかもできる。

ただ、棒グラフが3Dじゃないのでダサい。

下記にも同様の投稿をしています。

http://qiita.com/items/88031f22a745fdef08a6

[ぷりっぷりのおしり]

ぷりけつです。

追記です。

>棒グラフは3D

これは、xyzの3次元のグラフを表現したいという意味ではなく、単純に、見た目が3Dになっている棒グラフを表現したいという意味です。

2012年5月1日火曜日 10時14分31秒 UTC+9 ぷりっぷりのおしり:

[Toshiya TSURU]

津留です。

Highcharts どうでしょうか？

* Highcharts
http://www.highcharts.com/

ただ、商用サイトだとライセンス費用が必要になります。

Google Chart Tools も良いかと思いますが、 3D棒グラフが出来たかどうかが謎です。

* Google Chart Tools
https://developers.google.com/chart/ 

2012年5月1日火曜日 10時38分59秒 UTC+9 ぷりっぷりのおしり:

2012年5月1日火曜日 10時38分59秒 UTC+9 ぷりっぷりのおしり:

2012年5月1日火曜日 10時38分59秒 UTC+9 ぷりっぷりのおしり:

2012年5月1日火曜日 10時38分59秒 UTC+9 ぷりっぷりのおしり:

--
++++++++++++++++++++++++++++++++++◆◇◆
株式会社 サンビジネス / Sunbusiness, Inc.
システム開発部 / Software Development Division
津留 敏哉 / Toshiya TSURU <t_t...@sunbi.co.jp>

TEL 03-3455-5294(代) / +81+3-3455-5294
FAX 03-3455-8909 / +81+3-3455-8909
〒105-0014
東京都港区芝1-10-11 コスモ金杉橋ビル / Shiba 1-10-11, Minato, Tokyo, Japan
http://www.sunbi.co.jp

+++++++++++++++++++++++++++++++++++++++ 

2012年5月1日火曜日 10時38分59秒 UTC+9 ぷりっぷりのおしり:

2012年5月1日火曜日 10時38分59秒 UTC+9 ぷりっぷりのおしり:

[Toshiya TSURU]

津留です。

Highcharts どうでしょうか？

* Highcharts
http://www.highcharts.com/

ただ、商用サイトだとライセンス費用が必要になります。

Google Chart Tools も良いかと思いますが、 3D棒グラフが出来たかどうかが謎です。

* Google Chart Tools
https://developers.google.com/chart/ 

2012年5月1日火曜日 10時38分59秒 UTC+9 ぷりっぷりのおしり:

ぷりけつです。

[Daniel Davis]

ダニエルです。

英語ですが、こちらで JavaScript のグラフライブラリーをまとめてみました：
http://my.opera.com/tagawa/blog/list-of-javascript-charting-libraries

私が調べた限り、jQuery
等が必要になるオープンソースなグラフライブラリーはこのぐらいです：
Elycharts - http://elycharts.com/
Flot - http://code.google.com/p/flot/
Flotr - http://solutoire.com/flotr/
jqPlot - http://www.jqplot.com
jQuery Sparkline - http://omnipotent.net/jquery.sparkline/
jQuery-Visualize - https://github.com/filamentgroup/jQuery-Visualize
MilkChart - http://mootools.net/forge/p/milkchart
moochart - http://moochart.coneri.se/
MooWheel - http://www.labs.unwieldy.net/moowheel/
PlotKit - http://www.liquidx.net/plotkit/
table2chart - http://mootools.net/forge/p/table2chart
TufteGraph - http://xaviershay.github.com/tufte-graph/
YUI Charts - http://yuilibrary.com/yui/docs/charts/

どれが3D表示できるかはちょっとわかりませんが、3Dっぽい影とかのあるグラフは確かにあると思います（Flotr等)。



On Tue, 01 May 2012 10:53:26 +0900, Toshiya TSURU <turut...@gmail.com>
wrote:

--
Daniel Davis
Web Evangelist
Opera Software (Japan)

Email: dan...@opera.com
Twitter/Identi.ca: @ourmaninjapan
URL: http://people.opera.com/danield

[Toshiya TSURU]

津留です。
アカウント切り替えてたりして連投になってしまってすみません。

> 英語ですが、こちらで JavaScript のグラフライブラリーをまとめてみました：
> http://my.opera.com/tagawa/blog/list-of-javascript-charting-libraries

こちら、とても参考になります！

2012/5/1 Daniel Davis <dan...@opera.com>:

> --
> このメールは Google グループのグループ「html5j.org」の登録者に送られています。
> このグループに投稿するには、html5-dev...@googlegroups.com にメールを送信してください。
> このグループから退会するには、html5-developer...@googlegroups.com
> にメールを送信してください。
> 詳細については、http://groups.google.com/group/html5-developers-jp?hl=ja
> からこのグループにアクセスしてください。

[puriketu.white]

ぷりけつです。

>津留さん

ありがとうございます。highchartsすごいです。
piechartとの組み合わせまでデモがあるので、とりかかりやすそうです。
highchartsを見て、カッコイイグラフを描けるかどうかは、3Dかどうかというよりも、色の取り合わせの問題のような気もしてきました。

>ダニエルさん

ありがとうございます。そういうページを探していたので助かります。参考になります。
デモを通しで見たところ、highcharts含め、マルチグラフのぷりっとした3Dはなさそうなので、色合わせでがんばってみることにします。

2012年5月1日10:51 Toshiya TSURU <t_t...@sunbi.co.jp>:

> --
> このメールは Google グループのグループ「html5j.org」の登録者に送られています。

> このディスカッションをウェブ上で閲覧するには、https://groups.google.com/d/msg/html5-developers-jp/-/2Em-9K7I4HkJ
> にアクセスしてください。

[Junichi Niino]

Publickey新野です。もう結論は出たみたいなのですが、JSのグラフについては

以前、実際に使うつもりでいろいろ調べたことがあったので、ご参考までに。

JSのグラフライブラリはたくさんあるのですが、グラフの種類が棒グラフだけだったり、

凡例が付けられなかったりとビジネスチャートとして使うには完成度の低いものが多

くて、最終的に僕は以下の3つが完成度と表現力の点でいいな、と思いました。

 - HighChart

表現力、完成度の点でいちばんだと思います。商用なのでお金さえあればこれが

イチオシ。

- jqPlot

僕が自分で使おうと決めたのはこれ。デモを見ただけだと貧弱に見えるのですが、

グラフの種類とオプションなど柔軟性があり、アニメーションやドロップシャドウなども

できて、実はHighChart並の表現力と柔軟性があります。

オープンソースなので、気軽に使えますし、プログラミングしがいがあります。

- SenchaTouch Chats

これも表現力、種類など十分です。ただ円グラフの凡例がちょっと独特だったので、

見送りました。

次点がGoogle ChartのJSライブラリ。Webアプリでしか使えない（スタンドアロン

アプリには利用禁止）という微妙なライセンスなので候補外に。

というところです。

>-----------
>
>2012年5月1日火曜日 11時40分50秒 UTC+9 ぷりっぷりのおしり:

[puriketu.white]

ぷりけつです。

返信ありがとうございます。Publickeyいつも拝読しています。
HighChartsに9割方決めていましたが、jqPlotをもう一度深く見てみます。

2012年5月1日19:02 Junichi Niino <jni...@gmail.com>:

> --
> このメールは Google グループのグループ「html5j.org」の登録者に送られています。

> このディスカッションをウェブ上で閲覧するには、https://groups.google.com/d/msg/html5-developers-jp/-/CW5CVyI-6kMJ

[福野泰介]

一日一創の福野です

私のイチオシは canvasChart です
ライセンスは PUBLIC DOMAIN!
http://socketapi.com/jsbu/fileapi/chart/c-x.htm

[puriketu.white]

ぷりけつです。

ご紹介ありがとうございます。
canvasChartもいいですね。demoが多くて助かります。
これも詳しく見てみます。

2012年5月1日20:15 福野泰介 <taisuke...@gmail.com>:

> --
> このメールは Google グループのグループ「html5j.org」の登録者に送られています。

[ぷりっぷりのおしり]

ぷりけつです。

時間が開いてしまいましたが、上記の返信を下記にまとめました。

http://qiita.com/items/1d271bd84ff9583aaa01

追加や削除のご要望等あれば、お申し付けください。

ご返信頂いた方々、どうもありがとうございました！

2012年5月1日火曜日 10時14分31秒 UTC+9 ぷりっぷりのおしり:

[Toshiro Takahashi]

高橋登史朗です

On Sun, 1 Jul 2012 07:06:58 -0700 (PDT)
<puriket...@gmail.com>さん wrote:

> ぷりけつです。
>
>
> 時間が開いてしまいましたが、上記の返信を下記にまとめました。
> http://qiita.com/items/1d271bd84ff9583aaa01
> 追加や削除のご要望等あれば、お申し付けください。

canvasChartのご紹介有難うございます。

で、現在は、ご覧のとおり「ccchart」http://jsgt.org/c/ という名前に変わり
ました。

当初、数年前に作っていたプラグインjQchartでのデータフォーマットと共通化
させて、サポートブラウザの多いCanvasだけから始めたのですが、

インタラクティブな動作を追加する際にCSS3も使い始めたので、Canvas + CSS +
Chartってことでの「ccchart」に変えました。ちなみに名付け親は古籏 一浩さ
んで～す＾＾

まぁ、まだまだ途上ですけど、こつこつ機能追加してます。ひと通りの機能が揃
うのはまだかなり先になりそうです。

Androidも4.x世代が増えつつあるのでそろそろSVGも追加しようかなぁ、、、と
か浮気心も湧いて来たり^^;?

> ご返信頂いた方々、どうもありがとうございました！
>
> 2012年5月1日火曜日 10時14分31秒 UTC+9 ぷりっぷりのおしり:
> >
> > ぷりけつです。
> >
> > html+css+jsで使えるグラフをさがしています。jQueryプラグインが望ましいです。ご存知の方いたら教えてください。
> >
> > ■いま自分が求めているグラフ
> >
> > マルチグラフ対応
> > 棒グラフは3D
> > インタラクティブなアクション(hoverでプルプルして欲しい)
> >
> > ■今知ってるグラフ
> >
> > qiitaのプロフィールの円グラフで使われているjQueryプラグインのraphael.js
> > http://raphaeljs.com/
> >
> > 美しめなグラフを作成することができる。
> >
> > raphael.jsのプラグインのelycharts.js
> > http://elycharts.com/docs
> >
> > マルチグラフ対応。棒グラフ×線グラフなんかもできる。
> > ただ、棒グラフが3Dじゃないのでダサい。
> >
> > 下記にも同様の投稿をしています。
> > http://qiita.com/items/88031f22a745fdef08a6
> >

--
Toshiro Takahashi
高橋登史朗
http://allabout.co.jp/internet/javascript/profile/mbiopage.htm
FBPage: http://www.facebook.com/javascripting
Twitter: http://twitter.com/toshirot

[ぷりっぷりのおしり]

ぷりけつです。

返信ありがとうございます。遅くなってすみません。

ccchartでももし複合グラフを扱えるようであれば、サンプルを載せていただけると利用者がもっと増えるのではないかと思いました(私が複合グラフを探し求めていたため)。

もし機会がありましたら、ご検討よろしくお願い致します。

2012年7月3日火曜日 10時35分43秒 UTC+9 tato:

[ぷりっぷりのおしり]

ぷりけつです。

追伸です。

下記、canvasChartと書いてあった部分を、引用コメント以外はccchart(canvasChart)と修文しました。

http://qiita.com/items/1d271bd84ff9583aaa01

2012年7月3日火曜日 10時35分43秒 UTC+9 tato:

[Toshiro Takahashi]

高橋登史朗です


修正有難うございます。

On Thu, 5 Jul 2012 17:37:21 -0700 (PDT)
ぷりっぷりのおしり <puriket...@gmail.com>さん wrote:

> ぷりけつです。
>
> 返信ありがとうございます。遅くなってすみません。
> ccchartでももし複合グラフを扱えるようであれば、
> サンプルを載せていただけると利用者がもっと増えるの
> ではないかと思いました(私が複合グラフを探し求めていたため)。
> もし機会がありましたら、ご検討よろしくお願い致します。

まだ円グラフさえどういうタイプにしようか考えてるところなので(笑)、まだま
だ中途半端ではありますが、、、

とりあえず、2つのチャートを組み合わせられるものを作ってみました。

http://jsgt.org/c/#77

ccchart
.init(canvas要素, チャートデータ1)
.add(チャートデータ2)

こんな書き方で描画できます。

> ぷりけつです。
>
> 追伸です。
> 下記、canvasChartと書いてあった部分を、引用コメント以外はccchart(canvasChart)と修文しました。
> http://qiita.com/items/1d271bd84ff9583aaa01


>

> --
> このメールは Google グループのグループ「html5j.org」の登録者に送られています。

> このディスカッションをウェブ上で閲覧するには、https://groups.google.com/d/msg/html5-developers-jp/-/486-PFjBCmEJ にアクセスしてください。

> このグループに投稿するには、html5-dev...@googlegroups.com にメールを送信してください。
> このグループから退会するには、html5-developer...@googlegroups.com にメールを送信してください。
> 詳細については、http://groups.google.com/group/html5-developers-jp?hl=ja からこのグループにアクセスしてください。
>

高橋登史朗です




--
Toshiro Takahashi
高橋登史朗
Profile http://www.amazon.co.jp/-/e/B004LRDBIG
Qiita: http://qiita.com/users/toshirot

[puriketu.white]

ぷりけつです。

> とりあえず、2つのチャートを組み合わせられるものを作ってみました。

わざわざありがとうございます。qiitaの記事に反映しました。

> まだ円グラフさえどういうタイプにしようか考えてるところなので(笑)、まだま
> だ中途半端ではありますが、、、

円グラフの見た目だけの話で言うと、qiitaで使われているraphael.jsは周囲の反応がよかったです。
http://qiita.com/users/puriketu99
同じ要領で円グラフも追加できるとすごく使いやすそうです。


2012年7月6日 21:48 Toshiro Takahashi <ta...@game.gr.jp>:

[Toshiro Takahashi]

高橋登史朗です

一応、ccchart v0.95xをリリースしました。
WebSocket用メソッドを追加してリアルタイムチャート化してます。
http://jsgt.org/c/test/ws.htm

# 解説はまだ無いので詳しくはソースで^^; 時間があれば使い方はQiitaあたり
に。。
# iPhone5などのiOS6もWebSocketがセキュアバージョンになったので動くと思い
ます。

# Opera は、WebSocketのデフォルト化ってまだしないのかなぁ、、、
# というよりOperaのチューニングしてない＞自分 orz これはいつかなんとかし
たい
# とりあえず 現状は Chrome 推奨です＾＾；




On Thu, 5 Jul 2012 17:37:21 -0700 (PDT)

> --
> このメールは Google グループのグループ「html5j.org」の登録者に送られています。
> このディスカッションをウェブ上で閲覧するには、https://groups.google.com/d/msg/html5-developers-jp/-/486-PFjBCmEJ にアクセスしてください。
> このグループに投稿するには、html5-dev...@googlegroups.com にメールを送信してください。
> このグループから退会するには、html5-developer...@googlegroups.com にメールを送信してください。
> 詳細については、http://groups.google.com/group/html5-developers-jp?hl=ja からこのグループにアクセスしてください。
>

--
Toshiro Takahashi
高橋登史朗
http://www.amazon.co.jp/%E9%AB%98%E6%A9%8B-%E7%99%BB%E5%8F%B2%E6%9C%97/e/B004LRDBIG

[Masataka Yakura]

On Saturday, November 10, 2012 11:26:48 AM UTC+9, tato wrote:

# Opera は、WebSocketのデフォルト化ってまだしないのかなぁ、、、

先週リリースされた12.10で、プロトコルがRFC準拠の実装になり、またデフォルトで有効になっているかと思います。

 > Web Sockets are in as well: now that security concerns with the spec have been addressed, we've turned on this functionality by default in Opera 12.10

<http://my.opera.com/ODIN/blog/opera-12-10-is-out>

[Toshiro Takahashi]

高橋登史朗です

おお、有難うございます。

今、確認しました！ベンダープレフィクスなしの "WebSocket" での実装ですね。
嬉しいです＾＾。


#実は今朝12.10をダウンロードして試したつもりだったのですが、どうやら解凍
後、古いバージョンを立ちあげてテストしてしまっていたようです(爆沈;;;

--
Toshiro Takahashi
高橋登史朗
http://www.amazon.co.jp/%E9%AB%98%E6%A9%8B-%E7%99%BB%E5%8F%B2%E6%9C%97/e/B004LRDBIG/