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="jquery.mobile-1.0.1.min.css" />
<script src="jquery.js"></script>
<script src="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"]});
$("#index").live('pagecreate',function(){
var ary = new Array();
ary.push(['地域', '件数']);
$.getJSON("ramen/ramen.json",
function(data){
$.each(data.ラーメン.地域, function(key,val){
var i = 0;
$.each(val,function(key,val){
i++;
});
var buff = new Array();
buff.push(key);
buff.push(i);
ary.push(buff);
});
});
google.setOnLoadCallback(drawChart);
function drawChart(){
var ary2d = new Array();
for(var i = 0; i < ary.length; i++){
ary2d.push(ary[i]);
}
var data = google.visualization.arrayToDataTable(ary2d);
var options = {
title:'ラーメン屋件数',
vAxis:{title:'地域',titleTextStyle:{color:'#0000FF'}},
chartArea:{height:"70%"}
};
var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
});
</script>
<title></title>
</head>
<body>
<div data-role="page" id="index" data-theme="f">
<div data-role="header">
<h1>ラーメン屋件数</h1>
</div>
<div data-role="content">
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</div>
<div data-role="footer">
<h4>Yohsuke Nakano</h4>
</div>
</div>
</body>
</html>