サーバサイドPG無しでサーバ上のCSVファイルを読み込み、GoogleChartsにてグラフ描画する

#0.やりたいこと

**サーバにあるCSVファイル（数、名前は可変）を読み込んでGoogleChartにてグラフを表示させる。**
（この記事では「Creating Material Line Charts」を使用しました）

サーバのCSVファイルを読み込む際、

    $.get
    $.ajax
だとXmlHTTPRequestが使われ、クロスドメイン制約にひっかかりNG。
　　　　　　　　　　　　　↓
CSVデータをJSON形式に変換してくれるjQueryライブラリ「csonv.js」をつかう。


#1.サーバのファイル構成
ルートディレクトリ
　├<Font color="red">グラフ表示.html</font>
　└data
　　├サーバ１
　　　　├<Font color="red">データ１.csv</font>
　　　　├<Font color="red">データ２.csv</font>
　　　　　　・
　　　　　　・
　　　　└<Font color="red">データn.csv</font>
　　├サーバ２
　　　　├<Font color="red">データ１.csv</font>
　　　　├<Font color="red">データ２.csv</font>
　　　　・
　　　　・
　　　　└<Font color="red">データn.csv</font>
　　└サーバn
　　　　├<Font color="red">データ１.csv</font>
　　　　├<Font color="red">データ２.csv</font>
　　　　・
　　　　・
　　　　└<Font color="red">データn.csv</font>





#2.csonv.jsで処理できるCSVの形式（初期状態）

1行目　項目名
2行目　データ型
3行目　データ
　・
　・
　・

↓↓↓↓ファイル例↓↓↓↓

    名前,年齢(歳),住所
    string,number,string
    一郎,24,島根県
    二郎,30,鳥取県[EOF]

<Font color="red">**注意点（フツーのCSVと違うとこ）：**</font>
・２行目にデータ型を入れる必要がある。
・一番最後のレコードは改行を入れたらNG。
・エンコードは「UTF-8」(BOM有無問わず)。
・ファイル例では項目の区切り文字は「,」ですが、初期状態は「;」となっているため、読み込む（Csonv.fetch）前に

    Csonv.separators.column = ",";
    Csonv.separators.array = ";";

　としてやる。


#3.処理の流れ
<Font color="blue">【手動でバッチ起動（バッチの中でVBScriptを起動）】</font>
①dataフォルダ配下のファイル一覧「**ファイルリスト.csv**」を作成し、読み込むCSVファイルを確定させる。
② **グラフの元データCSV**を加工する。（前項の注意点のとおり、csonv.jsで取り込める形式に。）

<Font color="blue">【ここから**グラフ表示.html**を開いた時にjavascriptで自動処理する】</font>
③csonv.jsにて、**加工したグラフの元データCSV**をJSON形式にて取得する。

    var members = Csonv.fetch("CSVファイルフルパス");

    var json = JSON.stringify(members, null, 2);

④JSON形式をオブジェクト形式に変換

    var jsontoobj = JSON.parse(json);

⑤オブジェクト形式のデータから必要なデータを抽出し、JSONデータを生成する

    var json_data = JsontoObj[index].プロパティ名
　<Font color="red">※JSONプロパティ名に()とか%とか変な動きをしそうなやつが入っているときの抽出の仕方</font>

    var json_data = JsontoObj[index]["使用率(%)"]

　<Font color="red">GoogleCharts 「Creating Material Line Charts」に取り込むJSONデータ例：</font>

         { "cols":[
             { "id":"date", "label":"Date", "type":"string" },
             { "id":"drive0", "label":"C", "type":"number" },
             { "id":"drive1", "label":"D", "type":"number" },
             { "id":"drive2", "label":"E", "type":"number" },
             { "id":"drive3", "label":"F", "type":"number" }],
           "rows":[
             { "c":[ { "v":"2016/02/09" }, { "v":19.47 }, { "v":61.93 }, { "v":1.22 }, { "v":2.27 } ] },
             { "c":[ { "v":"2016/02/10" }, { "v":19.46 }, { "v":61.94 }, { "v":1.21 }, { "v":2.28 } ] },
             { "c":[ { "v":"2016/02/12" }, { "v":19.45 }, { "v":61.95 }, { "v":1.20 }, { "v":2.29 } ] } ] };





⑥GoogleChartsに生成したJSONデータをセットし、グラフ描画する。

    var chart = new google.charts.Line(document.getElementById('グラフ描画する<div>のid'));

    chart.draw(json_data, options);

※GoogleChartsの全体的な描画方法は・・・
https://developers.google.com/chart/interactive/docs/gallery/linechart#creating-material-line-charts


#4.こんな感じでできました

　![googlecharts1.png](https://qiita-image-store.s3.amazonaws.com/0/128324/25db5a1a-686a-b9a5-e552-2d073e3c3bc0.png)
　![googlecharts2.png](https://qiita-image-store.s3.amazonaws.com/0/128324/48ad0230-5846-10c5-85dc-1eaa2bbacd3a.png)

#5.さいごに

サーバサイドPG無しでは、3.の①と②がどうしてもできなかったので、VBScriptを作り、手動でバッチ起動する手順としました。残念。
本当はHTMLを開くと完全自動で全処理をやりたかった。。なんかやり方ありそうなのになぁ。