chapter63.html
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
var under20 = 0;
var age20 = 0;
var age30 = 0;
var age40 = 0;
var age50 = 0;
var age60 = 0;
var over70 = 0;
$("#index").live('pagecreate',function(){
google.setOnLoadCallback(drawChart(""));
});
$(function(){
$("#under20").live("change",function(){
drawChart("under20")
});
$("#age20").live("change",function(){
drawChart("age20")
});
$("#age30").live("change",function(){
drawChart("age30")
});
$("#age40").live("change",function(){
drawChart("age40")
});
$("#age50").live("change",function(){
drawChart("age50")
});
$("#age60").live("change",function(){
drawChart("age60")
});
$("#over70").live("change",function(){
drawChart("over70")
});
$("#reset").live("click",function(){
under20 = 0;
age20 = 0;
age30 = 0;
age40 = 0;
age50 = 0;
age60 = 0;
over70 = 0;
$("iframe").attr({
width:"400px",
height:"200px"
});
drawChart("");
});
});
function drawChart(age){
switch(age){
case "under20":
under20 = parseInt($("#under20").val());
break;
case "age20":
age20 = parseInt($("#age20").val());
break;
case "age30":
age30 = parseInt($("#age30").val());
break;
case "age40":
age40 = parseInt($("#age40").val());
break;
case "age50":
age50 = parseInt($("#age50").val());
break;
case "age60":
age60 = parseInt($("#age60").val());
break;
case "over70":
over70 = parseInt($("#over70").val());
break;
default:
break;
}
var data = new google.visualization.DataTable();
data.addColumn('string', '年代');
data.addColumn('number', '割合');
data.addRows([
['20歳未満', under20],
['20代', age20],
['30代', age30],
['40代', age40],
['50代', age50],
['60代', age60],
['70代以上', over70],
]);
var options = {
title: '年代別割合チャート'
};
var chart = new google.visualization.PieChart(document.getElementById('chart'));
chart.draw(data, options);
}
</script>
<title></title>
</head>
<body>
<div data-role="page" id="index">
<div data-role="header">
<h1>円グラフをスライダーで動かす</h1>
</div>
<div data-role="content">
<input type="range" id="under20" value="0" min="0" max="100">20代未満</input><br>
<input type="range" id="age20"value="0" min="0" max="100">20代</input><br>
<input type="range" id="age30"value="0" min="0" max="100">30代</input><br>
<input type="range" id="age40"value="0" min="0" max="100">40代</input><br>
<input type="range" id="age50"value="0" min="0" max="100">50代</input><br>
<input type="range" id="age60"value="0" min="0" max="100">60代</input><br>
<input type="range" id="over70"value="0" min="0" max="100">70代以上</input><br>
<a data-role="button" id="reset">リセット</a>
<div id="chart"></div>
</div>
<div data-role="footer">
<h4>Yohsuke Nakano</h4>
</div>
</div>
</body>
</html>