67
81

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Last updated at Posted at 2016-09-25

グラフを描くとなると、最近では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

実行結果

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

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から2次元配列を抽出、3) chart.jsのdataset用の配列を用意して、4) chart.jsで描画します。
mychart.js
// 2) CSVから2次元配列に変換
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化する、その2)
に続き(長いソース全文)を載せました。

67
81
3

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
67
81

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?