【20140506】【jqPlot】サーフィンポイント別人数シュア可視化アプリ
お題
下記のサイトの「トップサンテ」「大貫」「大洗」の直近の人数のシェア状況を
円グラフで表す
https://www.i92surf.com/area/ibaraki.php
ソース
pointpie.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" >
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css"/>
<link rel="stylesheet" href="js/jqplot/jquery.jqplot.min.css"/>
<!--<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> -->
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="js/jqplot/jquery.jqplot.min.js"></script>
<script src="js/jqplot/plugins/jqplot.pieRenderer.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
<script src="js/jquery.xdomainajax.js"></script>
<script src="js/custom-point.js"></script>
</head>
<body>
<div data-role="page" id="p-piechart">
<div data-role="header">
<h1>茨城情報</h1>
</div>
<div data-role="content">
<div id="piechart"></div>
</div>
</div>
</body>
</html>
custom-point.js
$.jqplot.config.enablePlugins = true;
var piedatatemp = [];
var piedata;
var ajaxDone = false;
function addPie(place, tempNinzu) {
var ninzu = tempNinzu.replace(/[^0-9]/g, '');
var array = [place, parseInt(ninzu, 10)];
piedatatemp.push(array);
}
function doAjax(url) {
$.ajax({
async: false,
type: 'GET',
url: url,
success: function(res) {
// ここから加工ロジック
// 直近情報を格納する変数
var latestTime;
var latestNinzu = "0";
// 人数を一時的に格納する変数
var tempNinzu;
$(res.responseText).find('td.flame tr').has('td:contains(トップサンテ下)').each(
function(i, e) {
if($(e).text().match(/名/)) {
$(e).find('td').each(function(j, e){
if(j == 1) {
tempNinzu = $(this).text();
}
// latestTimeがundefinedであれば日時をセット
if (latestTime == undefined && j == 4) {
latestTime = $(this).text();
} else if(j == 4 && (latestTime < $(this).text())) { // latestTimeより大きければlatestTimeを上書き
latestTime = $(this).text();
latestNinzu = tempNinzu;
}
});
}
});
// piedataに追加
addPie('トップサンテ', latestNinzu);
latestTime = undefined;
latestNinzu = "0";
$(res.responseText).find('td.flame tr').has('td:contains(大貫)').each(
function(i, e) {
if($(e).text().match(/名/)) {
$(e).find('td').each(function(j, e){
if(j == 1) {
tempNinzu = $(this).text();
}
// latestTimeがundefinedであれば日時をセット
if (latestTime == undefined && j == 4) {
latestTime = $(this).text();
} else if(j == 4 && (latestTime < $(this).text())) { // latestTimeより大きければlatestTimeを上書き
latestTime = $(this).text();
latestNinzu = tempNinzu;
}
});
}
});
addPie('大貫', latestNinzu);
latestTime = undefined;
latestNinzu = "0";
$(res.responseText).find('td.flame tr').has('td:contains(大洗)').each(
function(i, e) {
if($(e).text().match(/名/)) {
$(e).find('td').each(function(j, e){
if(j == 1) {
tempNinzu = $(this).text();
}
// latestTimeがundefinedであれば日時をセット
if (latestTime == undefined && j == 4) {
latestTime = $(this).text();
} else if(j == 4 && (latestTime < $(this).text())) { // latestTimeより大きければlatestTimeを上書き
latestTime = $(this).text();
latestNinzu = tempNinzu;
}
});
}
});
addPie('大洗', latestNinzu);
latestTime = undefined;
latestNinzu = 0;
// ここまで加工ロジック
piedata = new Array();
piedata.push(piedatatemp);
ajaxDone = true;
},
error: function(XMLHttpRequest, textStatus, errorThrown){
alert('読み込み失敗:' + errorThrown);
}
});
};
var opts = {
title:'茨城ポイント別シェア',
seriesDefaults: {
renderer: jQuery.jqplot.PieRenderer,
rendererOptions: {
showDataLabels: true,
padding: 8
}
},
legend :{
show:true,
location: 'n',
rendererOptions: {
numberRows: 2
},
}
}
$(document).on("pageshow", "#p-piechart", function(e){
doAjax('http://www.i92surf.com/area/ibaraki.php/');
testTimer=setInterval(function(){
if(ajaxDone == true) {
plot = $.jqplot("piechart",piedata, opts);
clearInterval(testTimer);
}
} , 1000);
});
$(window).on("orientationchange", function(e){
plot.replot;
});
$(document).on("pagehide", "#p-piechart", function(e){
plot.destroy();
});