【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();
});
URL
【20140505】【jqPlot】Ajaxで取得したデータのグラフ化
お題
Ajaxで取得したjson形式のデータをjqPlotでグラフ化する
ソース
jqPlot_ajax_sample1.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="js/jqplot/jquery.jqplot.min.js"></script>
<script src="js/jqplot/plugins/jqplot.canvasTextRenderer.min.js"></script>
<script src="js/jqplot/plugins/jqplot.canvasAxisLabelRenderer.min.js"></script>
<script src="js/jqplot/plugins/jqplot.canvasAxisTickRenderer.min.js"></script>
<script src="js/jqplot/plugins/jqplot.mobile.min.js"></script>
<script src="js/jqplot/plugins/jqplot.cursor.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
<script src="js/custom-ajaxdata.js"></script>
</head>
<body>
<div data-role="page" id="p-ajaxchart">
<div data-role="header">
<h1>Ajaxによるデータの読み込み</h1>
</div>
<div data-role="content">
<div id="linechart-ajax"></div>
</div>
</div>
</body>
</html>custom-dateaxis.js
$.jqplot.config.enablePlugins = true;
var ajaxDataRenderer = function(url, plot, options) {
var ret = null;
$.ajax({
async: false,
url: url,
dataType:"json",
success: function(data) {
ret = data;
},
error: function(XMLHttpRequest, textStatus, errorThrown){
alert('読み込み失敗:' + errorThrown);
}
});
return ret;
};
var opts = {
title: 'グラフタイトルだよ',
dataRenderer: ajaxDataRenderer,
series: [
{
label:'データ1だよ',
showMaker:false
},
{
label:'データ2だよ',
showMaker:true
},
],
legend: {
show:true,
location:'ne',
},
axes: {
xaxis: {
label:'x軸だよ',
labelRenderer:$.jqplot.CanvasAxisLabelRenderer,
tickRenderer: $.jqplot.CanvasAxisTickRenderer,
tickOptions:{angle:-45}
},
yaxis: {
label:'y軸だよ',
labelRenderer:$.jqplot.CanvasAxisLabelRenderer,
tickRenderer: $.jqplot.CanvasAxisTickRenderer,
}
},
cursor:{zoom:true}
};
$(document).on("pageshow", "#p-ajaxchart", function(e){
plot = $.jqplot("linechart-ajax", "./ajaxdata.json", opts);
});
$(window).on("orientationchange", function(e){
plot.replot;
});
$(document).on("pagehide", "#p-ajaxchart", function(e){
plot.destroy();
});URL
http://www4386up.sakura.ne.jp/itiapp/jqplotsample/jqPlot_ajax_sample1.html
【20140501】【jQuery Mobile】フォトビューワを作る
お題
PhotoSwipeを使ってフォトビューワを作る
プログラム概要
画像をタッチするとスライドショーが始まる。
スワイプもしくはボタンで画像をスライドさせることもできるが
自動再生ボタンで自動でスライドさせることもできる
URL
【20140430】【jQuery Mobile】ペイントアプリを作る
お題
ペイントアプリを作る
プログラム概要
touchmoveイベントが発生すると緑色でペイントを行う
ソース
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1.0">
<title>ペイント</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" >
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="js/touchpaint.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
</head>
<body>
<div data-role="page" id="p-touchpaint" >
<div data-role="header">
<h1>ぺいんと</h1>
</div>
<div data-role="content">
<div id="canvas"></div>
</div>
</div>
</body>
</html>JS
color = ['rgb(255,0,0)','rgb(0,255,0)','rgb(0,0,255)','rgb(255,255,0)','rgb(255,0,255)'];
$(document).on("pageshow", "#p-touchpaint", function(){
$("#canvas").html('<canvas id="drawable" width="'+window.innerWidth+'" height="'+window.innerHeight+'" />');
canvas = document.getElementById('drawable');
ctx = canvas.getContext('2d');
$("#drawable").bind("touchmove", function(e){
ratioY = canvas.height / canvas.clientHeight;
ratioX = canvas.width / canvas.clientWidth;
e.preventDefault();
touch = e.originalEvent.touches[0];
x = (touch.pageX - canvas.offsetLeft) * ratioX;
y = (touch.pageY - canvas.offsetTop) * ratioY;
ctx.beginPath();
ctx.fillStyle = color[1];
ctx.arc(x, y, 10, 0, Math.PI * 2, true);
ctx.fill();
});
});
URL
※スマホでしか動きません
