Google Chart API でパレート図を作る (実験)
Google Chart API入門
/////
Google Chart API (4)
(上のサイトは、1回ごとにクリックしてね)
/////
/////
http://99blues.dyndns.org/pareto.js
/////
Google Chart API入門
/////
Google Chart API (4)
(上のサイトは、1回ごとにクリックしてね)
/////
上のグラフを作成するため、Google Chart APIサーバへ次のリクエストを送信してます。
作成済みの固定画像を表示するだけでは面白くないので、値が変更されたら随時、画像を更新するようにしてみました。
以下の入力欄を変更すると、パレート図を更新します。
タイトル
データ
No | 要因 | 件数 | 比率(%) |
---|---|---|---|
1 |
0.0
|
||
2 |
0.0
|
||
3 |
0.0
|
||
4 |
0.0
|
||
5 |
0.0
|
||
* | 合計 |
150
|
100.0
|
(補足)
件数は 0 ~ 100 まで数字を入力して下さい。
/////
<script type='text/javascript' src='http://99blues.dyndns.org/pareto.js'></script></p>
<div>
<image id="chart" alt="*** Pareto chart by Google Chart API ***"/>
</div>
<p>上のグラフを作成するため、Google Chart APIサーバへ次のリクエストを送信してます。</p>
<p id="src_text" style="background-color:#F0E68C;padding:10px;">
<p><br/></p>
<p>作成済みの固定画像を表示するだけでは面白くないので、値が変更されたら随時、画像を更新するようにしてみました。<br />
以下の入力欄を変更すると、パレート図を更新します。</p>
<div>
<h5>タイトル</h5>
<input type="text" id="title" value="パレート図" onChange="update_all()">
</div>
<p><br/></p>
<h5>データ</h5>
<table >
<tr>
<th>No</th>
<th>要因</th>
<th>件数</th>
<th>比率(%)</th>
</tr>
<tr>
<td>1</td>
<td>
<input type="text" id="name1" class="my_name" value="要因(1)"></td>
<td>
<input type="text" id="number1" class="my_number" value="10" onChange="update_all()"></td>
<td>
<div id="ratio1" class="my_ratio" >0.0</div>
</td>
</tr>
<tr>
<td>2</td>
<td>
<input type="text" id="name2" class="my_name" value="要因(2)"></td>
<td>
<input type="text" id="number2" class="my_number" value="20" onChange="update_all()"></td>
<td>
<div id="ratio2" class="my_ratio" >0.0</div>
</td>
</tr>
<tr>
<td>3</td>
<td>
<input type="text" id="name3" class="my_name" value="要因(3)"></td>
<td>
<input type="text" id="number3" class="my_number" value="30" onChange="update_all()"></td>
<td>
<div id="ratio3" class="my_ratio" >0.0</div>
</td>
</tr>
<tr>
<td>4</td>
<td>
<input type="text" id="name4" class="my_name" value="要因(4)"></td>
<td>
<input type="text" id="number4" class="my_number" value="40" onChange="update_all()"></td>
<td>
<div id="ratio4" class="my_ratio" >0.0</div>
</td>
</tr>
<tr>
<td>5</td>
<td>
<input type="text" id="name5" class="my_name" value="要因(5)"></td>
<td>
<input type="text" id="number5" class="my_number" value="50" onChange="update_all()"></td>
<td>
<div id="ratio5" class="my_ratio" >0.0</div>
</td>
</tr>
<tr>
<td>*</td>
<td>合計</td>
<td>
<div id="sum" style="text-align: right;">150</div>
</td>
<td>
<div id="sum_ratio" style="text-align: right;">100.0</div>
</td>
</tr>
</table>
<p><strong>(補足)</strong><br />
件数は 0 ~ 100 まで数字を入力して下さい。</p>
<p><br/></p>
///// http://99blues.dyndns.org/pareto.js
/////
// require jquery var rows = 5; function update_all(){ update_table(); update_chart(); } function update_chart(){ var data = new Array(); var sum = 0; for(i=1; i<=rows; i++){ var id_name = "#name" + String(i); var id_number= "#number" + String(i); var number = Number($(id_number).val()); data[i-1]={"name":$(id_name).val(), "number":number}; sum += number; } data.sort(function(a,b){ return(b["number"] - a["number"]); }); var x_label=""; var bar_data=""; var ratio_data=""; var n=0; for(i=0; i<rows; i++){ x_label += ("|" + data[i]["name"]); if(i != 0){ bar_data += ","; ratio_data += ","; } bar_data += String(data[i]["number"]); n += data[i]["number"]; ratio_data += String((n/sum * 100.0).toFixed(2)); } var src = "http://chart.apis.google.com/chart" + "?cht=bvg" + "&chco=0033ff,aa0000" + "&chm=D,aa0000,1,-1,3,1|o,aa0000,1,-1,10,1" + "&chd=" + "t1:" + bar_data + "|" + ratio_data + "&chbh=a,5,30" + "&chxt=x,x,y,r" + "&chxl=" + "0:" + x_label + "|1:|隕∝屏" + "|2:|0|25|50|75|(莉カ)100" + "|3:|0|25|50|75|100(%)" + "&chxp=1,50" + "&chg=100,25" + "&chdl=莉カ謨ー|豈皮紫(%)" + "&chtt=" + $('#title').val() +"|+" + "&chts=0000FF,12" + "&chf=c,lg,90,ffffff,0.5,a8FBa8,1" + "&chs=480x320"; $("#chart").attr("src", src); $("#src_text").text( src); } function update_table(){ var sum=0; for(i=1; i<=rows; i++){ var id = "#number" + String(i); sum += Number($(id).val()); } $("#sum").text(String(sum)); for(i=1; i<=rows; i++){ var id_number = "#number" + String(i); var id_ratio = "#ratio" + String(i); $(id_ratio).text(String((Number($(id_number).val())/sum * 100.0).toFixed(2))); } } $(function(){ update_all(); });/////
コメント