戻る

ソース

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
<title></title>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css"W>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script src="js/mobiscroll.full.min.js"></script>
<link href="css/mobiscroll.full.min.css" rel="stylesheet">
<script type="text/javascript">
google.load('visualization', '1', {packages: ['corechart']});

$(document).bind("pagebeforeshow",function(){
	$('#hiduke').val('').scroller('destroy').scroller($.extend("date", { theme: "ios", mode: "scroller" }));
	
	$('#trigger').click(function() {
		$('#hiduke').scroller('show');
		return false;
	});
	
	$('#clear').click(function() {
		$('#hiduke').val('');
		return false;
	});
	
	$('#hiduke').bind("change",function(){
		
		var date = $('#hiduke').val().replace(/^([0-9]{2})\/([0-9]{2})\/([0-9]{4})$/, "$3$1$2");;
		
		var api = "http://vesta-tmp.sakura.ne.jp/json-jsonp.php?json=denki.cuppat.net/data/" + date + ".json&callback=?";
		
		$.ajax({
			url:api,
			dataType:'jsonp',
			success: function(data){
				
				var ary2D = new Array();
				
				var buff = new Array();
				buff.push("時刻");
				buff.push("電力使用量");
				buff.push("ピーク時供給量");
				ary2D.push(buff);
				
				for(var i = 0; i < 24; i++){
					var buff = new Array();
					buff.push(i + ":00");
					buff.push(data.hours[i]);
					buff.push(data.capability);
					ary2D.push(buff);
				}
				
				google.setOnLoadCallback(drawVisualization(ary2D));
				
			}
		});
	});
	
	function drawVisualization(ary2D) {
		var data = google.visualization.arrayToDataTable(ary2D);
		
		var options = {
			title : '東京電力・電力使用状況',
			vAxis: {title: "電力使用量（万kw）"},
			hAxis: {title: "時刻"},
			seriesType: "bars",
			series: {1: {type: "line"}}
		};
		
		var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
		chart.draw(data, options);
	}
});
</script>
<style>
#chart_div{
	width:100%;
	height:400px;
}
</style>
</head>
<body>
<div data-role="page" data-theme="f">
	<div data-role="header" data-theme="a">
		<h1>東京電力・電力状況 (グラフ表示)</h1>
	</div>
	<div data-role="content" data-theme="f">
		<form id="hidukeform">
			<div data-role="fieldcontain" class="inline">
				<label for="hiduke">日付を選択：</label>
				<input type="text" name="hiduke" id="hiduke">
				<div data-role="controlgroup" data-type="horizontal" id="buttons">
					<a href="#" id="trigger" data-role="button" data-icon="grid" data-theme="a">選択</a>
					<a href="#" id="clear" data-role="button" data-icon="delete" data-theme="a">クリア</a>
				</div>
			</div>
		</form>
		<div id="chart_div"></div>
	</div>
	<div data-role="footer" data-position="fixed" data-theme="a">
		<h4>Yohsuke Nakano</h4>
	</div>
</div>
</body>
</html>

inserted by FC2 system