一日で300件くらいの
時間・値のデータをAJAXで取得してグラフにしようと考えています。
この時間はUNIXエポックタイム(変換できるので形式は問わない)になっています。
これらのデータを1時間ごとに自動でまとめてくれて、
一日分の棒グラフにしてくれるグラフライブラリーを探しています。
出来るだけ汎用的なライブラリーを使用したいと考えています。
知っている方がいたら教えてください
気になる質問をクリップする
クリップした質問は、後からいつでもMYページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
回答3件
0
投稿2016/04/10 07:54
編集2016/04/10 07:55総合スコア2425
0
ベストアンサー
集計などはデータを用意する段階で行ってもらうとして、「汎用的なグラフ」なら、D3.js が有名です。
【Gallery · mbostock/d3 Wiki · GitHub】
https://github.com/mbostock/d3/wiki/Gallery
下記の Epoch というリアルタイムに情報を表示するライブラリも D3.js をベースに作られているようです。
【Epoch - Real-time Charts】
http://epochjs.github.io/epoch/real-time/#bar
【GitHub - epochjs/epoch: A general purpose, real-time visualization library.】
https://github.com/epochjs/epoch
【strix01: Epochでリアルタイムなチャートを表示する。】
http://strix01.blogspot.jp/2015/03/epoch.html
【ヒサオメモ: epochを使って簡単にリアルタイムチャートを作る手順】
http://hisaomemo.blogspot.jp/2016/03/epoch.html
投稿2016/04/14 15:18
総合スコア69400
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
0
この部分「データを1時間ごとに自動でまとめてくれて」はほかの方にお任せしますが、
こちらの部分「出来るだけ汎用的なライブラリーを使用したい」に解凍してみます。
拙ライブラリで恐縮ではありますが、ccchartでAjax受信したJSONデータを棒グラフ表示できます。
サンプル: http://ccchart.org/#73
このコードは下記のようなものですが、
html
1<script src="http://ccchart.org/js/ccchart.js" charset="utf-8"></script> 2<canvas id="hoge"></canvas> 3<script> 4var chartdata73 = { 5 6 "config": { 7 "title": "Load Option.data from JSON file", 8 "subTitle": "チャートデータ部をJSONファイルからXHRで読み込む", 9 "type": "bar", //チャートの種類 10 "useVal": "yes" //値を表示する 11 }, 12 13 "data": "./data/data73.js" 14}; 15 16ccchart.init('hoge', chartdata73); 17 18</script>
"data": "./data/data73.js"の部分でAjaxにより下記のようなデータを受け取ります。
javascript
1[ 2 ["年度",2007,2008,2009,2010,2011,2012,2013], 3 4 ["ジュース",60,435,456,352,567,678,1260], 5 ["ウーロン",200,123,312,200,402,300,512] 6]
参考 https://github.com/toshirot/ccchart
※ちなみにccchartはWebSocketも使えるので、Ajaxよりもスムーズなリアルタイムチャート描画も可能です。
リアルタイムチャート: http://ccchart.com/test/ws2.htm
投稿2016/04/28 07:20
編集2016/04/28 07:33総合スコア10
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
あなたの回答
tips
太字
斜体
打ち消し線
見出し
引用テキストの挿入
コードの挿入
リンクの挿入
リストの挿入
番号リストの挿入
表の挿入
水平線の挿入
プレビュー
質問の解決につながる回答をしましょう。 サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。 また、読む側のことを考えた、分かりやすい文章を心がけましょう。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。