Google Chart API でレーダーチャートを作る(ブログ内) 実験中

Google Chart API入門

/////
Google Chart API (4)
(上のサイトは、1回ごとにクリックしてね)
/////

*** Radar chart by Google Chart API ***

Google Chart APIサーバへのリクエスト

以下の入力欄を変更すると、グラフを更新します。

タイトル


データ
No ParamName データA データB
1
2
3
4
5
6

///// 
Google Chart API でレーダーチャートを作る(ブログ内)
 
<script type='text/javascript' src='http://99blues.dyndns.org/radar.js'></script>

<script type="text/javascript" src="update_chart()"></script> 
に変更した。(失敗)
/////
<script type="text/javascript" src="update_chart()"></script> 
<script type="text/javascript">
 // require jquery
var rows = 6;

function update_chart(){
var n = "";
var a = "";
var b = "";

for(i=1; i<=rows; i++){
var index = String(i);
a += ($('#number-a' + index).val() + ",");
b += ($('#number-b' + index).val() + ",");
n += ("|" + $('#name' + index).val());
}
a += $('#number-a1').val();
b += $('#number-b1').val();

var src = "http://chart.apis.google.com/chart"
+ "?cht=r"
+ "&chxt=y,x"
+ "&chls=4|4"
+ "&chco=FF0000,00FF00"
+ "&chxp=0,0,20,40,60,80,100"
+ "&chd=t:"
+ a + "|" + b
+ "&chxl=1:" + n 
+ "&chm=s,FF0000,0,-1,12,0|s,FFFFFF,0,-1,8,0|o,00FF00,1,-1,12,0|o,FFFFFF,1,-1,8,0"
+ "&chts=000000,20"
+ "&chtt=" + $('#title').val()
+ "&chdl=DateA|DateB"
+ "&chs=400x400"
$("#chart").attr("src", src);
$("#src_text").text( src);
}

$(function(){
update_chart();
});
</script> 
<script type='text/javascript' src='update_chart()'></script></p>
<div>
<image id="chart" alt="*** Radar chart by Google Chart API ***"/>
</div>
<p>Google Chart APIサーバへのリクエスト</p>
<p id="src_text" style="background-color:#F0E68C;padding:10px;">
<p>以下の入力欄を変更すると、グラフを更新します。</p>
<div>
<h5>タイトル</h5>
<input type="text" id="title"  value="レーダーチャート" onChange="update_chart()">
</div>
<p><br/></p>
<h5>データ</h5>
<table>
<tr>
<th>No</th>
<th>ParamName</th>
<th>データA</th>
<th>データB</th>
</tr>
<tr>
<td>1</td>
<td>
<input type="text" id="name1"  class="my_name"  value="項目(1)" onChange="update_chart()"></td>
<td>
<input type="text" id="number-a1" class="my_number" value="76"  onChange="update_chart()"></td>
<td>
<input type="text" id="number-b1" class="my_number" value="55"  onChange="update_chart()"></td>
</tr>
<tr>
<td>2</td>
<td>
<input type="text" id="name2"  class="my_name"  value="項目(2)" onChange="update_chart()"></td>
<td>
<input type="text" id="number-a2" class="my_number" value="78"  onChange="update_chart()"></td>
<td>
<input type="text" id="number-b2" class="my_number" value="65"  onChange="update_chart()"></td>
</tr>
<tr>
<td>3</td>
<td>
<input type="text" id="name3"  class="my_name"  value="項目(3)" onChange="update_chart()"></td>
<td>
<input type="text" id="number-a3" class="my_number" value="91"  onChange="update_chart()"></td>
<td>
<input type="text" id="number-b3" class="my_number" value="59"  onChange="update_chart()"></td>
</tr>
<tr>
<td>4</td>
<td>
<input type="text" id="name4"  class="my_name"  value="項目(4)" onChange="update_chart()"></td>
<td>
<input type="text" id="number-a4" class="my_number" value="78"  onChange="update_chart()"></td>
<td>
<input type="text" id="number-b4" class="my_number" value="77"  onChange="update_chart()"></td>
</tr>
<tr>
<td>5</td>
<td>
<input type="text" id="name5"  class="my_name"  value="項目(5)" onChange="update_chart()"></td>
<td>
<input type="text" id="number-a5" class="my_number" value="58"  onChange="update_chart()"></td>
<td>
<input type="text" id="number-b5" class="my_number" value="87"  onChange="update_chart()"></td>
</tr>
<tr>
<td>6</td>
<td>
<input type="text" id="name6"  class="my_name"  value="項目(6)" onChange="update_chart()"></td>
<td>
<input type="text" id="number-a6" class="my_number" value="72"  onChange="update_chart()"></td>
<td>
<input type="text" id="number-b6" class="my_number" value="45"  onChange="update_chart()"></td>
</tr>
</table>
/////