CSVファイルをグラフ化
　Google Chartsなどを利用すると簡単にグラフを書くことができます。
　以下では、csvファイルからグラフを描く幾つかの例を説明します。
　注: 以下の各例では、CSVファイルがサーバー上にある必要があります。ローカルファイルの場合はこちらを参照
  1. csv ファイルを読み込んで Google Charts を表示
    　ここでは csvファイルを読み込んで Google Charts を表示する例を作ってみました。 　＊引用データ元 
    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4.   <meta charset="UTF-8">
    5.   <title>File 選択表示</title>
    6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.   <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    8.   <script>
    9.     var ma = new Array();  var data = new Array(); var res = new Array();
    10.     // 1) ファイル(fname)を読み込む
    11.     function getValue(){     // onload 時実行
    12.       var fname = 'data/boueki.csv';  // 利用ファイル名を指定  --------------------
    13.       // データ出典 http://www.mlit.go.jp/hakusyo/mlit/h27/hakusho/h28/html/n1114000.html
    14.       // 2) 該当 csvファイルから chartデータに変換 getCsv( fname ) ----------------
    15.       ma = getCsv( fname ); //  → function: getCsv( fname )
    16.       // 3) 該当データ(ma)をgoogle.chartsで表示 → drawVisualization() ------------
    17.       google.charts.load('current', {'packages':['corechart']});
    18.       google.charts.setOnLoadCallback(drawVisualization);
    19.     }; // end of getValue(idname)  ------------------------------------------
    20.       // 2) 該当名(url)の csvファイルをchartデータとして整形
    21.       function getCsv(url){   //CSVファイルを文字列で取得。
    22.         var txt = new XMLHttpRequest();
    23.         txt.open('get', url, false);
    24.         txt.send();
    25.         // 改行ごとに配列化
    26.         var arr = txt.responseText.split('\n');
    27.         // 1次元配列を2次元配列に変換
    28.         res = [];
    29.         res[0] = arr[0].split(',');
    30.         for(var i = 1; i < arr.length; i++){
    31.           // 空白行が出てきた時点で終了
    32.           if(arr[i] == '') break;
    33.           // ","ごとに配列化
    34.           res[i] = arr[i].split(',');
    35.           for(var i2 = 1; i2 < res[i].length; i2++){
    36.             // 数字の場合は「' "」を削除 ･･･ 2列目以降に適用
    37.             if(res[i][i2].match(/\-?\d+(.\d+)?(e[\+\-]d+)?/)){
    38.               res[i][i2] = parseFloat(res[i][i2].replace(/'?"?/g, ""));
    39.             }
    40.           }
    41.         };
    42.         return res;  
    43.       }; // end of getCsv(url)  ---------------------------------------------
    44.       // 3) 該当データ(ma)を google.chartsで表示
    45.       function drawVisualization() {
    46.         data = google.visualization.arrayToDataTable( ma );
    47.         var options = {
    48.           title : '貿易額推移', 
    49.             // 出典 http://www.mlit.go.jp/hakusyo/mlit/h27/hakusho/h28/html/n1114000.html
    50.             titleTextStyle : { color: '#333', fontSize: 20 },
    51.           vAxis: {title: '金額 [兆円]'},
    52.           hAxis: {title: ma[0][0] },
    53.           seriesType: 'bars',            // 全体は棒グラフ(default='line')
    54.             legendTextStyle : { color: '#333', fontSize: 12 },
    55.             isStacked: true              // 積み上げ棒グラフ
    56.         };
    57.         var chart = new google.visualization.ComboChart(document.getElementById('graph'));
    58.         chart.draw(data, options);
    59.       }; // end of drawVisualization() --------------------------------------
    60.   </script>
    61.   <style>
    62.      body { background:#efe; }
    63.      .waku1 { text-align:center; font-size:14px; width:1000px; height:500px; margin:0 auto; padding:0; background:#eef; }
    64.      .waku1 h3{ margin:3px; }
    65.      #graph { width:100%; height:99%; }
    66.   </style>
    67. </head>
    68. <body onload="getValue()">
    69.   <div class="waku1">
    70.     <h3>csv データを読み込みグラフ表示</h3>
    71.     <div id="graph">ここにグラフを表示</div>
    72.   </div>
    73. </body>
    74. </html>
    ( 7行目)　Google Chartsを利用するため、Google Charts のライブラリを読み込みます
    (11行目)　起動時実行する getValue() を定義します
    (12行目)　利用するファイルの url を指定します
    (15行目)　getCsv() でデータファイル fname を chartデータ ma に変換します
    (17行目)　チャートを表示するため 'current'バージョンの corechartパッケージを呼び出します。
    (18行目)　JavaScript function (drawVisualization) のコールバックを実行します
    (21行目-) CSVファイルを chartデータ用文字列で取得する functionを記述します
    (22行目)　XMLHttpRequest オブジェクトを作成します
    (23行目)　{ 'get', url, 同期実行(false) } で open() 動作を設定します。
    (24行目)　該リクエストを送信します。
    (26行目)　文字列をまず１次元配列に分解します。
    (29行目)　一列目を、２次元配列に分解します。
    (34行目)　二列目以降を、２次元配列に分解します。
    (38行目)　各行の２列目以降のデータを数値データにします。
    (45行目-) チャートの詳細を指定する function (drawVisualization) を記述します。
    (53行目)　棒グラフを表示するように指定します。
    (55行目)　棒グラフを積み上げで表示するように指定します。
    (57行目)　ComboChartを id='graph' 領域に表示するように指定します。
    (58行目)　chart を表示します。
    (68行目)　onload 時 getValue() を実行します。
    (71行目)　グラフを表示エリア id='graph' を指定しました。
    1. 年度,中国,韓国,ASEAN 10ｹ国,米国,EU 27ｹ国
    2. 1995,12.4,4.6,11.7,18.4,11.2
    3. 1996,14.3,4.9,13.7,20.8,12.2
    4. 1997,16.1,4.9,14.5,23.3,13.4
    5. 1998,15.3,3.6,11.3,24.2,14.4
    6. 1999,15.0,4.4,11.4,22.2,13.3
    7. 2000,18.1,5.5,13.8,23.1,13.5
    8. 2001,18.5,5.2,13.2,22.4,13.2
    9. 2002,21.0,5.5,13.4,22.1,13.1
    10. 2003,24.2,6.1,13.9,20.2,14.0
    11. 2004,28.5,7.2,15.2,20.5,15.7
    12. 2005,31.8,7.8,16.4,21.9,16.1
    13. 2006,36.5,9.0,18.2,24.8,17.9
    14. 2007,40.2,9.6,20.5,25.2,20.1
    15. 2008,39.2,9.2,21.8,22.3,18.7
    16. 2009,29.9,6.5,14.8,14.2,12.3
    17. 2010,37.0,8.0,18.7,16.3,13.4
    18. 2011,37.0,8.4,19.8,15.9,14.0
    19. 2012,35.5,8.1,20.6,17.3,13.1
    20. 2013,40.5,9,22.3,19.7,14.6
    21. 2014,43.6,9.0,23.3,21.2,15.8


  2. 「Feeding CSV to Google Chart」
    　Feeding CSV to Google Chartには、jquery.csv.jsを利用する例があり、次の３つの要素から構成されます。　関連
    • csvファイル(ifr.csv;データファイル)
      　表示対象の csvファイルは読込プログラムに合わせて構成されます。通常一行目に項目リスト(例: year,daily)、二行目以後に表示データ(例: 2008,26.541\n2009,24.748\n･････)を記述します。
    • jsファイル(jquery.csv.min.js/jquery.min.js)
      　「Feeding CSV to Google Chart」では jquery.csv.min.js で表示対象の csvファイルをグラフ表示用の配列に変換します。また jquery を使うために jquery.min.js を必要とします。
    • htmlファイル(グラフ表示ファイル)
      　グラフ表示用配列を Google Chart で表示します。サンプル
      　グラフの種別は「chartType:'*****'」で指定します。(例: chartType:'LineChart'･･･線グラフ(default), chartType:'BarChart'･･･横棒グラフ, chartType:'ComboChart'･･･複合グラフ････)

  3. csvファイルを chart.jsでグラフ化
    　chart.jsでグラフ化する例もあります。
    1. csvファイル(data.csv;データファイル)
      　表示対象の csvファイルは表示データ(例: January, -10.4, -5.5\nFeburary, -30.3, 1\n･････)のみで構成されます。
    2. jsファイル(mychart.js)
      　jsファイルは mychart.js 一つで構成されています。
      　これを読み込むと main() が起動します。main() では、
      　1) CSVファイルをロードし、 　2) csv2Array() で２次元配列に変換し、
      　3) drawBarChart() で chart.js 用の dataset配列を用意し、 　4) chart.jsでグラフを表示します。
    3. htmlファイル(グラフ表示ファイル)
      　htmlで mychart.js と Chart.js を使って、グラフ表示する canvas を指定します。サンプル


    　以下のように複合グラフを表示することも出来ます。　参考１　参考２ 
    1. <!DOCTYPE html>
    2. <html lang="ja">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
    6.     <style>
    7.        #wrap{ width:1000px; height:500px; margin:0 auto; }
    8.        canvas#myChart{ width: 100%; height:100%; background:#ffe; }
    9.     </style>
    10.     <script>
    11.       var title =[];
    12.       main();
    13.  
    14.       function main() {
    15.         // 1) ajaxでCSVファイルをロード
    16.         var req = new XMLHttpRequest();
    17.         var filePath = 'worker.csv';              //  読込ファイル名
    18.         req.open("GET", filePath, true);
    19.         req.onload = function() {
    20.           // 2) CSVデータ変換の呼び出し
    21.           data = csv2Array(req.responseText);
    22.           // 3) chart.jsデータ準備、4) chart.js描画の呼び出し
    23.           drawBarChart(data);
    24.         }
    25.         req.send(null);
    26.       }; // main() end ---------------------
    27.             
    28.       // 2) CSVから２次元配列に変換
    29.       function csv2Array(str) {
    30.         var csvData = [];
    31.         var lines = str.split("\n");
    32.         title = lines[0].split(",");              // 一行目(i=0)から項目を読みとる
    33.         for (var i = 1; i < lines.length; ++i) {  // 一行目(i=0: 項目行)は読み込まない
    34.           var cells = lines[i].split(",");
    35.           csvData.push(cells);
    36.         };   // alert(title);  
    37.         return csvData;
    38.       }
    39.  
    40.       function drawBarChart(data) {
    41.         // 3)chart.jsのdataset用の配列を用意
    42.         var tmpLabels = [], tmpData1 = [], tmpData2 = [], tmpData3 = [], tmpData4 = [], tmpData5 = [], tmpData6 = [], tmpData7 = [], tmpData8 = [], tmpData9 = [], tmpData10 = [], tmpData11 = [], tmpData12 = [], tmpData13 = [], tmpData14 = [], tmpData15 = [], tmpData16 = [], tmpData17 = [];
    43.         for (var row in data) {  // 各行毎に読み込み
    44.           tmpLabels.push(data[row][0])
    45.           tmpData1.push(data[row][3])
    46.           tmpData2.push(data[row][4])
    47.           tmpData3.push(data[row][5])
    48.           tmpData4.push(data[row][6])
    49.           tmpData5.push(data[row][7])
    50.           tmpData6.push(data[row][8])
    51.           tmpData7.push(data[row][9])
    52.           tmpData8.push(data[row][10])
    53.           tmpData9.push(data[row][11])
    54.           tmpData10.push(data[row][12])
    55.           tmpData11.push(data[row][13])
    56.           tmpData12.push(data[row][14])
    57.           tmpData13.push(data[row][15])
    58.           tmpData14.push(data[row][16])
    59.           tmpData15.push(data[row][17])
    60.           tmpData16.push(data[row][18])
    61.           tmpData17.push(data[row][19])
    62.         }; // --------------
    63.  
    64.         // 4)chart.jsで描画
    65.         var ctx = document.getElementById("myChart").getContext("2d");
    66.         var myChart = new Chart(ctx, {
    67.           type: 'bar',
    68.           data: {
    69.             labels: tmpLabels, // 横軸ラベル
    70.             datasets: [
    71.               { label:title[3], data: tmpData1, backgroundColor:"rgba(240,100,100,0.5)",stack:1 },
    72.               { label:title[4], data: tmpData2, backgroundColor:"rgba(100,240,100,0.5)", stack:1 },
    73.               { label:title[5], data: tmpData3, backgroundColor:"rgba(100,100,240,0.5)", stack:1 },
    74.               { label:title[6], data: tmpData4, backgroundColor:"rgba(240,200,100,0.5)", stack:1 },
    75.               { label:title[7], data: tmpData5, backgroundColor:"rgba(100,240,200,0.5)", stack:1 },
    76.               { label:title[8], data: tmpData6, backgroundColor:"rgba(200,100,240,0.5)", stack:1 },
    77.               { label:title[9], data: tmpData7, backgroundColor:"rgba(240,100,50,0.5)", stack:1 },
    78.               { label:title[10], data: tmpData8, backgroundColor:"rgba(50,240,100,0.5)", stack:1 },
    79.               { label:title[11], data: tmpData9, backgroundColor:"rgba(200,50,50,0.5)", stack:1 },
    80.               { label:title[12], data: tmpData10, backgroundColor:"rgba(50,200,50,0.5)", stack:1 },
    81.               { label:title[13], data: tmpData11, backgroundColor:"rgba(50,50,200,0.5)", stack:1 },
    82.               { label:title[14], data: tmpData12, backgroundColor:"rgba(150,100,0,0.5)", stack:1 },
    83.               { label:title[15], data: tmpData13, backgroundColor:"rgba(0,150,100,0.5)", stack:1 },
    84.               {
    85.                 type: 'line',            //折れ線グラフを適用
    86.                 label:title[16],
    87.                 borderColor: "rgba(55,55,250,0.6)",
    88.                 lineTension: 0,          // 直線
    89.                 fill: false,             //エリア塗りつぶしせず
    90.                 data: tmpData14,
    91.                 stack:false,   
    92.               },
    93.               { type:'line', fill:false, lineTension: 0, borderColor:"rgba(55,55,250,1)", label:title[17], data:tmpData15 },
    94.               { type:'line', fill:false, lineTension: 0, borderColor:"rgba(250,55,55,0.6)", label:title[18], data:tmpData16 },
    95.               { type:'line', fill:false, lineTension: 0, borderColor:"rgba(250,55,55,1)", label:title[19], data:tmpData17 }
    96.             ]
    97.           },
    98.           options: {
    99.             title: {
    100.               display: true,            
    101.               text: '就業者年代別構成',
    102.               padding:8,
    103.               fontSize: 20
    104.             },
    105.             scales: {
    106.               xAxes: [{
    107.                   scaleLabel: {                   // 軸ラベル設定
    108.                        display: true,             // 表示設定
    109.                        labelString: '年次',       // ラベル
    110.                        fontSize: 16               // フォントサイズ
    111.                   },
    112.                   categoryPercentage:0.6          // 棒幅
    113.               }],
    114.               yAxes: [{
    115.                 scaleLabel: {                     //軸ラベル設定
    116.                        display: true,             //表示設定
    117.                        labelString: '人数[万人]', //ラベル
    118.                        fontSize: 16               //フォントサイズ
    119.                 }
    120.               }]
    121.             }
    122.           }
    123.         });
    124.       }; // drawBarChart(data) end ---------------------
    125.  
    126.     </script>
    127. </head>
    128. <body>
    129.     <div id="wrap">
    130.       <canvas id="myChart" >ここにチャート表示</canvas>
    131.     </div>
    132. </body>
    133. </html>
    ( 5行目)　Chart.min.jsを利用するため、chart.jsをインクルードします
    ( 8行目)　グラフを描画する canvas域を定義します
    (16行目)　サーバーと HTTP通信を行うため XMLHttpRequestオブジェクトを作ります
    (18行目)　open() メソッドで HTTPメソッド、アクセス先 URL、非同期実行を指定します
    (21行目)　responseTextで csv形式の文字列データを受取ったら、配列 dataに変換します
    (23行目)　配列 dataのデータでチャートを描画します
    (25行目)　sendメソッドでリクエストを送信，引数は GETなので nullを渡す。
    (29行目-) CSVから配列に変換します。
    (32行目)　１行目から項目を読みとる。
    (33行目-) ２行目以降から dataの各行配列を取得します。
    (40行目-) data配列からグラフを描画します。
    (43行目-) 各行毎のデータを読み込みます。
    (65行目-) <canvas>要素への参照を取得し、getContextメソッドを呼び出します。
    (66行目-) チャートオブジェクトを作成し、type及びdataプロパティを記述してゆきます。
    (67行目)　今回は棒グラフを利用します。
    (68行目-) dataプロパティの詳細を記述します。
    (69行目)　横軸ラベルに対応する配列を渡します。
    (71行目-) 各項目の、ラベル、データ値、色、積み上げを指定しました。
    (85行目)　グラフの一部に折れ線グラフを指定するため、'line'を記述しました。
    (93行目-) 折れ線グラフをさらに追加します。
    (98行目-) optionsプロパティを記述します。
    (99行目-) グラフタイトルを指定します。
    (106行目-) x軸の書式等を記述します。
    (114行目-) y軸の書式等を記述します。
    (130行目) <canvas>要素を設置します。
    1. 年,人口/万人,総有業者,15～19歳,20～24,25～29,30～34,35～39,40～44,45～49,50～54,55～59,60～64,65～69,70～74,75歳以上,男人口,男有業数,女人口,女有業数
    2. 1956,6041.9,3980.2,396.5,595.5,549.1,475.5,393.1,395.9,350.2,282.4,223.9,154.4,155.6,...,...,2902.3,2426,3139.7,1554.2
    3. 1959,6432.2,4133,385,565.6,558.3,544.7,434,387.1,375.6,299.2,241.4,165.1,168.2,...,...,3096.5,2589,3335.7,1543.9
    4. 1962,6722.2,4285.5,388.7,649.8,576.4,558.7,484,377.3,357.8,315.5,234.7,176.2,101.2,65,...,3239.8,2688.1,3482.3,1597.4
    5. 1965,7258.4,4477.9,352.1,681,563.8,566.8,547.7,445.4,362.8,322.4,260.7,186.2,115,73.9,...,3505.1,2819.8,3753.3,1658.1
    6. 1968,7655.1,4900.6,389.5,693.6,598.4,595.9,604.8,539.6,401.9,353.2,289.4,204.1,135.4,64.2,30.7,3703.2,3025.3,3951.9,1875.4
    7. 1971,7941.9,5063,271.6,806.9,585,587,625.7,584.5,477.3,360.5,304.8,221.3,138.2,68.4,31.9,3844.9,3159.8,4097,1903.2
    8. 1974,8281.5,5134.1,189.5,674.8,666.1,636.1,616.7,622.2,552,403,297.5,235.3,141.2,67.5,32.1,3998,3251.2,4283.6,1882.8
    9. 1977,8612.6,5364.9,156.8,571.8,770.9,633.2,660.2,661.9,605.1,482.9,323.6,238.4,151.2,71.5,37.3,4176.3,3354.7,4436.3,2010.3
    10. 1979,8829.7,5473.7,134.6,539.4,670.5,722.3,716.9,658.1,633,537.2,359.7,228.6,158.2,75.5,39.7,4282.5,3401.7,4547.2,2072
    11. 1982,9126.4,5788.8,152.2,552.5,596.2,800.6,715.5,717.5,676.4,588.2,433,249,169.2,89.1,49.4,4425.6,3508.3,4700.8,2280.5
    12. 1987,9733.7,6050.2,162.1,596,582,601.6,857.1,747.7,709.5,639.4,507,311.6,171.9,100.6,63.7,4723.8,3637.2,5010,2413
    13. 1992,10293.8,6575.6,171.9,701.1,648.9,588,660.5,914.5,761.8,698.8,594.5,397.8,241.6,113.9,82.3,4999.9,3877.6,5293.9,2698
    14. 1997,10665.3,6700.3,134,680.7,746.3,621.4,619.5,685.9,911.9,723.1,634.1,423.2,274,149.2,97,5174.6,3950.8,5490.7,2749.5
    15. 2002,10917.45,6500.93,122.04,527.3,745.63,710.33,642.14,639.47,673.35,845.23,635.85,423.42,270.65,151.73,113.77,5282.63,3803.41,5634.82,2697.53
    16. 2007,11030.15,6597.75,105.74,485.23,634.82,734.49,749.31,680.72,653.05,659.98,790.28,490.11,302.18,172.72,139.11,5328.25,3817.48,5701.89,2780.27
    17. 2012,11081.51,6442.07,93.88,406.19,575.49,628.06,756.53,775.89,688.15,636.34,614.15,612.02,320.16,182.56,152.64,5341.32,3674.45,5740.19,2767.62
    18. 2017,11097.67,6621.3,104.36,424.36,537.86,593.82,656.19,806.09,809.46,692.08,613.8,525.27,451.14,224.86,182.01,5354.29,3707.41,5743.39,2913.89


  4. chart.jsで色々なグラフを作成
    　こちらのサイトには以下のような色々な具体例があります。
  5. csv ファイルを選択して Google Charts を表示
    　ここでは電力会社が公開する発電種別 csvファイルを読み込んで Google Charts で表示する例を作ってみました。次の様に構成されています。 
    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4.   <meta charset="UTF-8">
    5.   <title>File 選択→表示</title>
    6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.   <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    8.   <script>
    9.     var ma = new Array();  var data = new Array(); var res = new Array();
    10.     // 1) ファイル名(idname)を選択する
    11.     function getValue(idname){
    12.       var obj = document.getElementById(idname);
    13.       var fname = obj.value;
    14.       // 2) 該当名の csvファイルをchartデータとして整形
    15.       ma = getCsv( fname );
    16.       // 3) 該当データ(ma)をgoogle.chartsで表示
    17.       google.charts.load('current', {'packages':['corechart']});
    18.       google.charts.setOnLoadCallback(drawVisualization);
    19.     }; // getValue(idname)  -------------------------
    20.       // 2) 該当名(url)の csvファイルをchartデータとして抽出
    21.       function getCsv(url){   //CSVファイルを文字列で取得。
    22.         var txt = new XMLHttpRequest();
    23.         txt.open('get', url, false);
    24.         txt.send();
    25.         // 改行ごとに配列化
    26.         var arr = txt.responseText.split('\n');
    27.         // 1次元配列を2次元配列に変換
    28.         res = [];
    29.         for(var i = 0; i < arr.length; i++){
    30.           // 空白行が出てきた時点で終了
    31.           if(arr[i] == '') break;
    32.           // ","ごとに配列化
    33.           res[i] = arr[i].split(',');
    34.           for(var i2 = 1; i2 < res[i].length; i2++){
    35.             // 数字の場合は「"」を削除 ･･･ 2列目以降に適用
    36.             if(res[i][i2].match(/\-?\d+(.\d+)?(e[\+\-]d+)?/)){
    37.               res[i][i2] = parseFloat(res[i][i2].replace('"', ''));
    38.             }
    39.           }
    40.         }
    41.         return res;
    42.       }; // getCsv(url)  ---------------------------
    43.       // 3) 該当データ(ma)をgoogle.chartsで表示
    44.       function drawVisualization() {
    45.         data = google.visualization.arrayToDataTable( ma );
    46.         var options = {
    47.           title : '供給電力推移',
    48.             titleTextStyle : { color: '#333', fontSize: 24 },
    49.           vAxis: {title: '電力 [MWh]'},
    50.           hAxis: {title: '日・時'},
    51.           seriesType: 'bars',            // 全体は棒グラフ(default='line')
    52.           series: {0: { color: '#666',type: "line"},7:{visibleInLegend: false},9:{visibleInLegend: false}},                   // 平均だけ折れ線グラフ, 7,9 非表示
    53.             legendTextStyle : { color: '#333', fontSize: 12 },
    54.             isStacked: true              // 積み上げグラフ
    55.         };
    56.         var chart = new google.visualization.ComboChart(document.getElementById('graph'));
    57.         chart.draw(data, options);
    58.       }; // end of drawVisualization() -------------------
    59.   </script>
    60.   <style>
    61.      .waku1 { text-align:center; font-size:14px; width:1200px; height:500px; margin:0 auto; padding:0; background:#eee; }
    62.      #graph { width:100%; height:99%; }
    63.   </style>
    64. </head>
    65. <body>
    66.   <div class="waku1">
    67.     <h2>選択 csvデータをグラフ表示</h2>
    68.     <!--  1) ファイル名(idname)を取得する  -->
    69.     <select id="sel1">
    70.       <option value="data/kyuden_H30_623-25.csv">九電_H30_623-25</option>
    71.       <option value="data/shikoku201704F.csv">四国201704F</option>
    72.       <option value="data/kanden2018_4B.csv">関電2018_4B</option>
    73.       <option value="data/tepco-2018-624-30.csv">東電-2018-624-30</option>
    74.       <option value="data/hokud2018_6B.csv">北電2018_6B</option>
    75.       <option value="data/t-hoku20180801-10.csv">東北電20180801-10</option>
    76.     </select>
    77.     <input type="button" value="→作図" onclick="getValue('sel1');">
    78.     <!--  3) グラフを表示  -->
    79.     <div id="graph">ここにグラフを表示</div>
    80.   </div>
    81. </body>
    82. </html>
    ( 7行目)　Google Chartsを利用するため、Google Charts のライブラリを読み込みます
    (11行目-) 1) ファイル名(idname)を選択し、2) 該当名の csvファイルをchartデータ用に整形し、3) google.chartsで表示します
    (17行目)　チャートを読み込むために'current'バージョンの corechartパッケージを呼び出します。
    (18行目)　JavaScript function (drawVisualization) のコールバックを登録します
    (21行目)　CSVファイルを chartデータ用文字列で取得する functionを記述します
    (26行目)　文字列をまず１次元配列に分解します。
    (33行目)　さらに、２次元配列に分解します。
    (37行目)　各行の２列以降のデータを数値データにします。
    (44行目)　チャートの詳細を指定する JavaScript function (drawVisualization) を記述します。
    (52行目)　数値である最初の列データを線グラフで表示し、８(=7+1)番目及び10(=9+1)番目の列を非表示に指定しました。
    (54行目)　棒グラフを積み上げで表示するように指定しました。
    (56行目)　ComboChartを id='graph' 領域に表示するように指定しました。
    (70行目)　ファイル選択ウインドを用意しました。
    (80行目)　グラフを表示エリア id='graph' を用意しました。
    1. DATE_TIME,エリア需要,原子力,火力,水力,地熱,バイオマス,太陽光,太陽光抑制量,風力,風力抑制量,揚水,連系線
    2. 2018/6/23 0:00,8245,2585,5870,1277,95,27,0,0,105,0,70,-1784
    3. 2018/6/23 1:00,7951,2585,5675,1245,95,27,0,0,102,0,0,-1778
    4. 2018/6/23 2:00,8027,2585,5914,1239,95,27,0,0,81,0,-54,-1860
    5. 2018/6/23 3:00,8381,2585,6195,1286,95,27,0,0,77,0,-26,-1858
    6. 2018/6/23 4:00,8699,2578,6466,1305,95,27,0,0,90,0,0,-1862
    7. 2018/6/23 5:00,8609,2581,6396,1292,95,27,10,0,82,0,-104,-1770
    8. 2018/6/23 6:00,8306,2582,6302,1251,95,27,158,0,73,0,-458,-1724
    9. 2018/6/23 7:00,8448,2586,6414,1261,95,27,281,0,69,0,-559,-1726
    10. 2018/6/23 8:00,9037,2586,6552,1255,95,27,331,0,77,0,-52,-1834
    11. 2018/6/23 9:00,9542,2583,7013,1298,95,27,382,0,68,0,0,-1924
    12. 2018/6/23 10:00,9482,2584,6465,1273,95,27,1115,0,45,0,-86,-2036
    13. 2018/6/23 11:00,9519,2583,6283,1317,95,27,1416,0,29,0,-195,-2036
    14. 2018/6/23 12:00,9293,2583,6263,1273,100,27,1474,0,13,0,-396,-2044
    15. 2018/6/23 13:00,9430,2582,6321,1330,100,27,1459,0,23,0,-384,-2028
    16. 2018/6/23 14:00,9398,2580,6422,1300,100,27,1017,0,34,0,-58,-2024
    17. 2018/6/23 15:00,9241,2582,6562,1299,100,27,688,0,25,0,0,-2042
    18. 2018/6/23 16:00,9226,2581,6695,1310,95,27,561,0,15,0,0,-2058
    19. 2018/6/23 17:00,9416,2577,7007,1311,95,27,312,0,20,0,147,-2080
    20. 2018/6/23 18:00,9484,2575,6728,1352,95,27,90,0,32,0,743,-2158
    21. 2018/6/23 19:00,9526,2579,6307,1466,95,27,11,0,41,0,1186,-2186
    22. 2018/6/23 20:00,9227,2581,6170,1317,95,27,0,0,24,0,1175,-2162
    23. ････････････････････････････････････････････････････････････････

  6. 参考サイト