dygraph を使う

　ここでは、JavaScript により簡単にグラフを作成出来るライブラリー dygraph について記述します。
　dygraph は、特に折れ線グラフを書くのには便利なツールです。　参考

■ dygraphs を使うには

◆dygraphs を使うには、以下のどちらかの方法で dygraph.js 又は dygraph.min.js を引用します。
　1. ダウンロードサイトから dygraph.js などをダウンロードして組み込みます。
　2. <script src="https://cdnjs.cloudflare.com/ajax/libs/dygraph/2.0.0/dygraph.min.js"></script> のようなタグを記述してホストサイトにリンクして利用します。
◆次に JavaScript内に、g = new Dygraph(container,data,{option}) と記述することでグラフを表示できます。
　　containerは、document.getElementById("graphdiv")のように表示要素を指定します。
　　dataは、表示するデータ値を指定します。ここにはデータリストの他、ファイルや関数を記述することも出来ます。
　　optionは、グラフ表示の書式等を指定します。
　つまり、data と option を書き換えることで色々なグラフが描けるということです

■ 基本サンプル

　具体例で見てみます。ここでは、タグリスト内に csv データを記述しています。

01<!DOCTYPE html>
02<html lang="ja">
03<head>
04  <meta charset="UTF-8">
05  <title>dygraph sample02</title>
06  <script type="text/javascript" src="dygraph-combined-dev.js"></script>
07</head>
08<body>
09  <div id="graphdiv"></div>
10  <script type="text/javascript">
11      g = new Dygraph(
12        document.getElementById("graphdiv"), // 表示ID名
13        "Date,温度1,温度2\n" +               // データ項目
14        "2008-05-07,45,30\n" +
15        "2008-05-08,60,50\n" +
16        "2008-05-09,20,35\n" +
17        "2008-05-10,50,45\n" +
18        "2008-05-11,65,40\n",                // 以上 CSV 
19        {                                    // option 指定
20          legend: 'always',                  // 凡例常表示
21          title: 'サンプルグラフ',
22          xlabel: '月日',
23          ylabel: '温度 (℃)',
24          valueRange: [0,80]                 // yスケール指定
25        }
26      );
27  </script>
28</body>
29</html>

【左記の例】　下図クリックで起動

【参考サイト】

( 6行目)　dygraph-combined-dev.js を読み込み「dygraph」を利用可能にします
(11行目)　CSV データを Dygraph に取り込みます
(13-18行目)　読み込む CSV データです。外部ファイルの場合はサーバー上に置きます
(20-24行目)　タイトル等の表示オプションを記述します

■ data と option について

　上の例でも解かるように、data と option の記述のみを換えることで色々なグラフが描けることになります。

　◆data は次の５種の方法を採ることが出来ます。詳細は、こちらを参照ください。

CSV data csv は headers(最初の行)部と、x値,y値記述部とで構成されます。labels option が無指定の時は headers の値が使われます。 x値が日付か数値かは自動判別されます。　詳細
配列配列(ネイティブ形式)の場合ヘッダー部は無く、labels オプションでそれを指定する必要があります。例
外部データ URLを指定して、そのサーバー上のデータを CSV として読み取ります。　詳細
関数関数値を配列として出力し、dygraphs で表示します。　参考
DataTable Google Visualization LibraryのDataTableを入力データとして指定することもできます。参考

　◆option でグラフのスタイルを変えられます。また作図後 updateOptions で変更することもできます。　dygraph.css

■ 配列データを読み込んでグラフを表示

　配列データを読み込んでグラフを表示する例を示します。参考

01<!DOCTYPE html>
02<html lang="ja">
03<head>
04  <meta charset="UTF-8">
05  <title>dygraph sample</title>
06  <script type="text/javascript" src="dygraph.min.js"></script>
07    <style>
08      body{ background:url(../img/p_bcg007.gif); }
09      section{ width:800px; margin:0 auto; text-align:center; }
10      section>div{ width:100%; border:1px solid gray; }
11      #graphdiv{ width:500px; height:360px; margin:0 auto; border:1px solid black; }
12      .dygraph{ border:1px solid black; margin:15px 10px; padding:2px; }
13      .dygraph-title {
14        text-align:center; font-size: 24px; text-shadow: gray 2px 2px 2px;
15      }
16      .dygraph-legend {
17        font-size: 13px; position: absolute; z-index: 10;
18        width: 100px; height: 60px; padding: 2px;
19        text-align:left; overflow: hidden;
20        background-color: rgba(240, 250, 250, 0.7);
21        border: 1px solid #888; border-radius: 6px;
22      }
23      .dygraph-legend-line {
24        display: inline-block; position: relative;
25        padding-left: 1.2em; bottom: .5ex; height: 10px;
26        border-bottom-width: 2px; border-bottom-style: solid;
27      }
28      .dygraph-xlabel { text-align:center; font-size: 13px; }
29      .dygraph-ylabel {
30        text-align:center; font-size: 13px;
31        transform: rotate(-90deg); margin-left: 30px;
32      }
33  </style>
34</head>
35<body>
36  <div id="graphdiv"></div>
37  <script type="text/javascript">
38      g = new Dygraph(
39        document.getElementById("graphdiv"), 
40        [                                  // データ配列
41          [ new Date("2008/05/07"),45,30 ],
42          [ new Date("2008/05/08"),60,50 ],
43          [ new Date("2008/05/09"),20,35 ],
44          [ new Date("2008/05/10"),50,45 ],
45          [ new Date("2008/05/11"),65,40 ]
46        ],
47        {
48          legend: 'always', labelsSeparateLines: true,
49          title: 'Array Data 利用',
50          labels: ['Date','温度1','温度2'],
51          xlabel: '月日',
52          ylabel: '温度(℃)',
53          valueRange: [0,90],
54          series: {
55            温度1: { strokeWidth: 0.5 },
56            温度2: { strokeWidth: 2.0 }
57          }
58        }
59      );
60  </script>
61</body>
62</html>

【左記の例】下図クリックで起動

【凡例記述等】

( 6行目)　「dygraphs」の JavaScript を読み込みます
(13行目)　title の書式を指定します
(16,23行) 凡例の書式を指定します
(29行目)　Y軸ラベルの書式を指定します
(41-45行) データ配列を記述します
(48行目)　凡例の表示方法を指定します
(50行目)　各データ名を記述します
(53行目)　Y軸の表示範囲を指定します
(55,56行) 表示線のプロパティを指定します

■ 外部ファイルを読み込んでグラフを表示

　　Javascript では、サーバー上にあるファイルなら読み込めますが、HTML5 では「ユーザーによる操作」があれば、ローカルファイルでも読み込むことが出来ます。ここでは、FileReader でローカルファイルを読み込みます。
　さらに「dygraphs」を使って、このデータからグラフを書きます。↓

01<!DOCTYPE html>
02<html lang="ja">
03<head>
04  <meta charset="UTF-8">
05  <title>File 読み込みテスト</title>
06  <meta name="viewport" content="width=device-width, initial-scale=1.0">
07  <script src="https://cdnjs.cloudflare.com/ajax/libs/dygraph/1.1.1/dygraph-combined-dev.js"></script>
08  <script>
09      function init(){
10        var file = document.querySelector('#getfile');
11        file.onchange = function (){
12          var fileList = file.files;
13          var reader = new FileReader();
14          reader.readAsText(fileList[0]); // onchange時に読込む
15          reader.onload = function() {   //読込み後グラフ表示
16              ma= reader.result.split("\n"); mas2 = ma.length-2;
17              mc = ma[0].split(",");
18              alert(mas2+" 地点の "+mc[0]+"; "+mc[1]+","+mc[2]+" を読込ました"); 
19              g = new Dygraph( document.getElementById("graph"), reader.result,{
20                  showRoller: false, valueRange: [0,100]
21              } );
22          };
23        };
24      };
25  </script>
26</head>
27<body onload="init();">
28  <input type="file" id="getfile" accept="text/*">
29  <div id="graph"></div>
30</body>
31</html>

【左記の例】下図クリックで起動

【参考サイト】

( 7行目)　「dygraphs」の JavaScript を読み込みます
(11行目)　「onchange」で目的ファイルの読み込みを開始します
(13行目)　「FileReader」で目的ファイル(test.csv)を読み込みます
(19行目)　表示データを書込みます
(20行目)　グラフ表示のオプションを読み込みます