javascriptのグラフライブラリーで時系列棒グラフを作成可能なものを教えてください

一日で300件くらいの
時間・値のデータをAJAXで取得してグラフにしようと考えています。

この時間はUNIXエポックタイム(変換できるので形式は問わない)になっています。

これらのデータを1時間ごとに自動でまとめてくれて、
一日分の棒グラフにしてくれるグラフライブラリーを探しています。
出来るだけ汎用的なライブラリーを使用したいと考えています。
知っている方がいたら教えてください

行動規範の内容に同意します

回答3件

以下の2つに分けて考えてはいかがでしょう。

300件のデータ配列を1時間ごとにグループ集計して24個の集計値配列を作成する部分
24個の集計値を棒グラフで表示する部分

1つ目の処理は Linq.js というライブラリを使うと、シンプルな記述でグループ集計値の配列を生成することができます。

2つ目の処理は、"jquery bar graph"で検索すると、フリーで使えそうなライブラリが山ほどヒットしますのでお好みのものを選ぶのが良いと思います。（それぞれ記述の簡易さや、見た目の美しさなどが違いますので、お好みのものを）

ご参考になれば。

投稿2016/04/10 07:54

編集2016/04/10 07:55

tkanda

総合スコア2425

ベストアンサー

集計などはデータを用意する段階で行ってもらうとして、「汎用的なグラフ」なら、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

kei344

総合スコア69398

この部分「データを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]