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

#0.やりたいこと

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

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

$.get
$.ajax

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

#1.サーバのファイル構成
ルートディレクトリ
　├グラフ表示.html
　└data
　　├サーバ１
　　　　├データ１.csv
　　　　├データ２.csv
　　　　　　・
　　　　　　・
　　　　└データn.csv
　　├サーバ２
　　　　├データ１.csv
　　　　├データ２.csv
　　　　・
　　　　・
　　　　└データn.csv
　　└サーバn
　　　　├データ１.csv
　　　　├データ２.csv
　　　　・
　　　　・
　　　　└データn.csv

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

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

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

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

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

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

　としてやる。

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

【ここからグラフ表示.htmlを開いた時にjavascriptで自動処理する】
③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].プロパティ名

　※JSONプロパティ名に()とか%とか変な動きをしそうなやつが入っているときの抽出の仕方

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

　GoogleCharts 「Creating Material Line Charts」に取り込むJSONデータ例：

     { "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.こんな感じでできました

　
　

#5.さいごに

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