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

13556 ワード
chart.js JavaScript Ajax 可視化 CSV JavaScript テキストリンク

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

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

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

元の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

実行結果

プログラム

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を読んでいると動かないのでご注意を。

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で描画します。

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番ポートで立ててみます。

terminal(pythonの例)
python3 -m http.server -port 9000
terminal(nodejsの例)
npm install -g http-server
http-server -p 9000
terminal(rubyの例)
ruby -run -e httpd . -p 9000
terminal(phpの例)
php -S localhost:9000

上記で、
http://localhost:9000

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

ご参考

ajax, csvの部分は、ほぼ下記サイトのソースを利用させていただきました。初めてのajax！だったので、とても参考になりました。

CSVファイルをJavaScriptから読込み方法@gist
JavaScriptでCSVファイルを読み込む方法@UX MILK

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

Loading an external JSON into ChartJs@stackoverflow
Plotting JSON Data with Chart.js@stackoverflow
Chart.jsを使って、棒グラフ、折れ線グラフ、レーダーチャート、円グラフを表示しよう！@WEB制作ナビ

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

Node.jsのhttp-serverっていうコマンドラインのウェブサーバーが便利@firegoby.jp
ワンライナーWebサーバを集めてみた@qiita

最後に

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

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