Google Chart API でレーダーチャートを作る
Google Chart API入門
//////
Google Chart API (4)
(上のサイトは、1回ごとにクリックしてね)
//////
//////
http://99blues.dyndns.org/radar.js
/////
Google Chart API入門
//////
Google Chart API (4)
(上のサイトは、1回ごとにクリックしてね)
//////
Google Chart APIサーバへのリクエスト
以下の入力欄を変更すると、グラフを更新します。
タイトル
データ
No | ParamName | データA | データB |
---|---|---|---|
1 | |||
2 | |||
3 | |||
4 | |||
5 | |||
6 |
//////
<script type='text/javascript' src='http://99blues.dyndns.org/radar.js'></script><br />
<div>
<img 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>以下の入力欄を変更すると、グラフを更新します。</p>
<div>
<h5>タイトル</h5>
<input type="text" id="title" value="レーダーチャート" onchange="update_chart()">
</div>
<p><br /></p>
<h5>データ</h5>
<table>
<tbody><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>
</tbody></table>
/////http://99blues.dyndns.org/radar.js
/////
// 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=DetaA|DetaB" + "&chs=320x320" $("#chart").attr("src", src); $("#src_text").text( src); } $(function(){ update_chart(); });////
コメント