【Chart.js】CSVの時系列データをグラフ化

この記事では、Javascriptで読み込んだCSVファイルの時系列データをChart.jsでグラフ化する方法をソースコード付きでまとめました。

CSVの時系列データをグラフ化

Javascriptでは、Ajaxでサーバー上にあるCSVファイルを読み込むことができます。
今回は、読み込んだ時系列データをライブラリ「Chart.js」でグラフ化しました。

ソースコード

サンプルプログラムのソースコードです。

ソース保管先
HTML index.html
Javascript main.js
CSS style.css
CSVファイル data.csv

実行結果

サンプルプログラムの実行結果です。
サンプルデモページ

【関連記事】
【Chart.js入門】設定と使い方
Javascript入門

Javascript
西住工房

コメント

  1. Zn_Chan より:

    サンプルプログラムを動作させたところ、動作せず、要素を確認した所以下のエラーがでていました。
    undefined is not an object (evaluating ‘array.length’)
    array.length周辺を見ましたが、おかしいと思う場所は見当たりませんでした。

    ブラウザは、Safari、Chrome共にエラーを吐き出しています。
    動作はMAMPのlocalhostで確認しています。
    もしよろしければ、助言をいただけたらうれしいです。

タイトルとURLをコピーしました