Google Chart API でパレート図を作る  (実験中)ブログ内    課題あり

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

*** Pareto chart by Google Chart API ***

上のグラフを作成するため、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://www.google.com/chart"></script> 
<script type="text/javascript"> 
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();
});
</script>
 <script type='text/javascript' src='update_all()'></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>
/////