参考：google charts
Google Chart を使う
web-saku.net/google-charts-basics/ ... new
www.tagtec.net/google-charts-basic
yohshiy.blog.fc2.com...古い
--------
html5 でグラフ.....
グラフ(g_chart,chart,dygraphなど)
Dygraphを使う...時系列の折れ線グラフ
dyg5.html
chart.jsを使う
csvをchart.jsでグラフ化
注意：var da= の直接指定のため、
""(null) は undefined で OK。 - は数値でなくだめ。
var da = [
['月','電気量A','電気量B'],
['1',756,621],
['2',704,574],
['3',650,734],
['4',562,544],
['5',459,513]
];
textarea_load 後 、
data部(0行0列以外)は、数値でないといけない。
注意：nullはすべて-に変換で グラフなし(NaN)。(null=0 を避ける。
重要::: da0[1][2]="";////test ---- ここで、"" にしても drawChart(1) のようにならない。error
グラフ：0:ColumnChart 棒 , 3:PieChart 円, 2:BarChart , 1:LineChart 折れ線
注意：文字nullは、数値化で0になる。すべて-に変換で グラフなし(NaN)。(null=0 を避ける。) ------ 未処理
DATA の 例
見出し(0行)は、必ず、文字行のこと。
Dataの先頭(0列)も文字が良い。数値の場合は数値順に表示。
-----------
月,電気量17,電気量18,電気量19,電気量20
1,1497,,756,621
2,1392,-,704,574
3,1257,-,650,734
4,1300,164,562,544
5,901,331,459,513
月,電気量17,電気量18,電気量19,電気量20
1,1497,90,756,621
2,1392,90,704,574
3,1257,90,650,734
4,1300,164,562,544
5,901,331,459,513
6,704,325,309,351
7,690,274,304,256
8,732,340,349,301
9,751,302,378,330
10,730,267,304,255
11,821,309,387,361
12,1139,458,483,419
//------------------0行,0列は文字列、それ以外は数値化(文字はNaN...Not a Number)。 (nullは0扱いの為-に変換)
for (i=0;i<=(gyousuu-1);i++){
for (j=0;j<=(komokusuu-1);j++){
if(da0[i][j]==""){da0[i][j]="-"}
//alert(dd[j]) ;////********************** nullは 数値化で0 になり グラフが0になるのを避けるため-に変換。
if(i==0 || j==0 ){}
///1行目と1列目の文字のところだけそのまま。それ以外は、数値化。や文字はNaNになり グラフなし(NaN)で OK
else{da0[i][j]=da0[i][j]*1}
}
}
-------csv 分離
for(var i = 1; i < arr.length; i++){
// 空白行が出てきた時点で終了
if(arr[i] == '') break;
// ","ごとに配列化
res[i] = arr[i].split(',');
for(var i2 = 1; i2 < res[i].length; i2++){
// 数字の場合は「' "」を削除 ･･･ 2列目以降に適用
if(res[i][i2].match(/\-?\d+(.\d+)?(e[\+\-]d+)?/)){
res[i][i2] = parseFloat(res[i][i2].replace(/'?"?/g, ""));
}}}
