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://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();
});
/////