CSVデータをchart.jsでグラフ化する！

グラフを描くとなると、最近ではjavascriptで！？、という記事が増えてきました(私は、python+matplotlibかRでやってました。)

実際にやろうとしたところ、パーツパーツのやり方は色々なページにあるのですが、全部を通してがないかなあ、と感じましたので載せてみました。というか、あれこれやって何とかできましたので、残しておこうと思いました。



# データと実行結果のグラフ

元のCSVデータ

```csv:data.csv
January, -10.4, -5.5
Feburary, -30.3, 1
March, 3.8, 12.3
April, 5.9, 13.5
May, 9.6, 16.4
June, 12.0, 19.4
July, 16.1, 28.2
August, 20.6, 30.3
September, 17.2, 26.2
October, 15.0, 20.8
November, 5.9, 10.1
December, 0.0, 3.3
```

実行結果

![chart.png](https://qiita-image-store.s3.amazonaws.com/0/93734/b301ecbc-2db0-03b2-bf10-a7b4b0cd953c.png)


# プログラム

htmlでは、Chart.min.js、mychart.jsのスクリプトを読み込んで、グラフ描画用のcanvasを定義するだけです。注：本プログラムは、chart.js 2.x用です。http://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js とかで、chart.jsの1.xを読んでいると動かないのでご注意を。

```html:index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="http://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.min.js"></script>
    <script src="mychart.js"></script>

    <title>chart of results</title>
</head>
<body>
<!--ここにグラフが挿入されます-->
<div style="width: 100%; height: 100%;">
    <canvas id="myChart" style="width: 100%; height: auto;"></canvas>
</div>
</body>
</html>
```

1) ajaxでCSVファイルをロードして、2) CSVから２次元配列を抽出、3) chart.jsのdataset用の配列を用意して、4) chart.jsで描画します。

```javascript:mychart.js
// 2) CSVから２次元配列に変換
function csv2Array(str) {
  var csvData = [];
  var lines = str.split("\n");
  for (var i = 0; i < lines.length; ++i) {
    var cells = lines[i].split(",");
    csvData.push(cells);
  }
  return csvData;
}

function drawBarChart(data) {
  // 3)chart.jsのdataset用の配列を用意
  var tmpLabels = [], tmpData1 = [], tmpData2 = [];
  for (var row in data) {
    tmpLabels.push(data[row][0])
    tmpData1.push(data[row][1])
    tmpData2.push(data[row][2])
  };

  // 4)chart.jsで描画
  var ctx = document.getElementById("myChart").getContext("2d");
  var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
      labels: tmpLabels,
      datasets: [
        { label: "Tokyo", data: tmpData1, backgroundColor: "red" },
        { label: "Osaka", data: tmpData2, backgroundColor: "blue" }
      ]
    }
  });
}

function main() {
  // 1) ajaxでCSVファイルをロード
  var req = new XMLHttpRequest();
  var filePath = 'data.csv';
  req.open("GET", filePath, true);
  req.onload = function() {
    // 2) CSVデータ変換の呼び出し
    data = csv2Array(req.responseText);
    // 3) chart.jsデータ準備、4) chart.js描画の呼び出し
    drawBarChart(data);
  }
  req.send(null);
}

main();
```



# 実行例

フォルダ構成としては、以下になっているものとします。

├── index.html
├── mychart.js
└── data.csv

HTTPサーバを立てます。python3, nodejs, ruby, phpのいずれかがあれば、簡単です。ここでは9000番ポートで立ててみます。

```bash:terminal(pythonの例)
python3 -m http.server -port 9000
```

```bash:terminal(nodejsの例)
npm install -g http-server
http-server -p 9000
```

```bash:terminal(rubyの例)
ruby -run -e httpd . -p 9000
```

```bash:terminal(phpの例)
php -S localhost:9000
```

上記で、
http://localhost:9000

にアクセスすればチャートが見えるでしょう！

# ご参考

ajax, csvの部分は、ほぼ下記サイトのソースを利用させていただきました。初めてのajax！だったので、とても参考になりました。
> [CSVファイルをJavaScriptから読込み方法@gist](https://gist.github.com/tigawa/8858345)
> [JavaScriptでCSVファイルを読み込む方法@UX MILK](http://uxmilk.jp/11586)

chart.jsの部分は以下を参考に作りました。

> [Loading an external JSON into ChartJs@stackoverflow](http://stackoverflow.com/questions/32977262/loading-an-external-json-into-chartjs)
> [Plotting JSON Data with Chart.js@stackoverflow](http://microbuilder.io/blog/2016/01/10/plotting-json-data-with-chart-js.html)
> [Chart.jsを使って、棒グラフ、折れ線グラフ、レーダーチャート、円グラフを表示しよう！@WEB制作ナビ](https://www.webtoolnavi.com/chart-js/)

最小構成のhttpサーバは、以下を参考にさせていただきました。ありがとうございます。

> [Node.jsのhttp-serverっていうコマンドラインのウェブサーバーが便利@firegoby.jp](https://firegoby.jp/archives/5706)
> [ワンライナーWebサーバを集めてみた@qiita](http://qiita.com/sudahiroshi/items/e74d61d939f18779970d)

# 最後に

実際に作っていたプログラムでは、CSV空白除去、勉強用にjqueryでの読み込み、将来列数が増えた時用にリストへのプッシュでのdataset作成。などが入っていました。が、ソースが長くなったたのでここでは最小構成にとどめ、次の投稿に回すことにします。

2016-09-25 21:15 追記
[無駄に複雑になったコード（CSVデータをchart.js化する、その２）](
http://qiita.com/tabetomo/items/355f00180095eff37d23)
に続き（長いソース全文）を載せました。