<html>
<head>
<meta charset="utf-8">
<style type="text/css">
.group { float: left;
display: table-cell;
position: relative;
vertical-align: middle;
}
.group svg {
position: absolute;
top: 0;
bottom: 0;
margin: auto;
height: 252px;
}
.fl {
position: relative;
top:86%;
width: 180px;
border: solid 1px;
font-size: 8pt;
}
.chart { float: right; }
.waitboard {
position: absolute;
display: none;
top: 0;
left:0;
opacity: 0.6;
background-color: #f0f0ff;
width: 100%;
height: 100%;
}
.waititem {
padding: 34% 20% 40% 30% ;
font-size: 50px;
font-family: Impact;
color: purple;
}
</style>
<link rel="stylesheet" href="./preloader.css">
<script src="./amcharts/amcharts.js"></script>
<script src="./amcharts/serial.js"></script>
<script src="./mergeddata.json"></script>
</head>
<body>
<div class="group" style="width: 1%; height:50%">
<svg id="tempgroup" viewBox="0 0 19 270"></svg>
</div>
<div id="tempdiv" class="chart" style="width: 99%; height:50%"></div>
<div class="group" style="width: 1%; height:50%">
<svg id="humidgroup" viewBox="0 0 19 270"></svg>
<!-- <div class="fl">
気象庁:三田観測所では湿度を記録していないため、代わりに神戸の情報を表示しています
</div>-->
</div>
<div id="humiddiv" class="chart" style="width: 99%; height:50%"></div>
<script>
var colorss =
["#FF6600", "#FCD202", "#309E09", "#0D8ECF", "#2A0CD0",
"#CD0D74", "#CC0000", "#00CC00", "#0000CC", "#0D9D9D",
"#999999", "#333333", "#990000", "#507e70", "#af90ff", "#0030f0"] ;
function paint_day(day, color) {
var today = new Date(day);
var tomorrow = new Date(day);
tomorrow.setDate(tomorrow.getDate() + 1);
return {
date: today, toDate: tomorrow,
fillColor: color, fillAlpha: 0.1, lineAlpha: 0
};
}
function make_guides(data) {
var today = new Date(data[0].datetime);
var to = new Date(data[data.length-1].datetime);
var guides = [];
for (;today <= to;) { // FF to Sat or Sun
var d = today.getDay();
if (d == 0) {
guides.push(paint_day(today, "#f08080"));
today.setDate(today.getDate()+1);
} else if (d == 6) {
guides.push(paint_day(today, "#8080f0"));
today.setDate(today.getDate()+1);
guides.push(paint_day(today, "#f08080"));
today.setDate(today.getDate()+6);
} else {
today.setDate(today.getDate()+1);
}
}
return guides;
}
var guides = make_guides(data);
sensors = [
[ 1, "工作室"], [ 2, "実験室LB"],
[ 4, "実験室RB"], [11, "ist準備室"],
[12, "ML2"], [13, "ML1"],
[14, "GRL"], [19, "サーバ室"],
[16, "HUB ML2"], [17, "HUB ML1"],
[18, "HUB GRL"], [15, "窓"],
[08, "外気1"], [20, "外気2"],
["jma", "気象庁"],
];
tempgraphs = [];
humidgraphs = [];
for (idx in sensors) {
var sensor = sensors[idx];
var k = {"type": "line", "valueField": "temp-" + sensor[0],
"title": sensor[1], "valueAxis": "v1",
"balloonText": "<b>" + sensor[1] + "(" + sensor[0] +") [[value]]℃</b>" }
if (sensor[0] == "jma") {
k['dashLength'] = 4;k['lineThickness'] = 1;
k['title'] += "(三田)";
k['bullet'] = "round";
k['bulletSize'] = 3;
}
tempgraphs.push(k);
var l = {"type": "line", "valueField": "humid-" + sensor[0],
"title": sensor[1], "valueAxis": "v1",
"balloonText": "<b>" + sensor[1] + "(" + sensor[0] + ") [[value]]%</b>" }
if (sensor[0] == "jma") {
l['dashLength'] = 4;l['lineThickness'] = 1;
l['title'] += "(神戸)";
l['bullet'] = "round";
l['bulletSize'] = 3;
}
humidgraphs.push(l);
}
tempgraphs[tempgraphs.length-1].id = "tempscale";
humidgraphs[humidgraphs.length-1].id = "humidscale";
humidgraphs.push(
{"type": "column", "valueField": "rainfall",
"bulletSize": 16,
//"fixedColumnWidth": 5,
"columnWidth": 60,
"fillAlphas": 1,
"color": "blue",
"title": "降水量(三田)", "valueAxis": "v2",
"balloonText": "<b>降水量 [[value]]mm</b>" });
var tempchart= AmCharts.makeChart("tempdiv", {
"type": "serial",
"dataProvider": data,
"categoryField": "datetime",
valueAxes: [{
id: 'v1',
guides: [{
value: 10,
toValue: 25,
fillColor: "#30CC30",
inside: true,
fillAlpha: 0.1,
lineAlpha: 0
}]
}, {
id: 'v2',
position: "right",
}],
"chartScrollbar": {
"autoGridCount": true,
"graph": "tempscale",
"color": "#c0f0e0",
"selectedGraphLineAlpha": 1,
"selectedGraphFillAlpha": 0,
"selectedBackgroundColor": "#c0d0e0",
"graphLineAlpha": 1,
"graphFillAlpha": 0,
"scrollbarHeight": 30
},
"categoryAxis": {
"parseDates": true,
"minPeriod": "mm",
"labelsEnabled": false,
guides: guides
},
"listeners": [{
"event": "zoomed",
"method": syncZoom
}, {
"event": "init",
"method":
function() {
var today = new Date(data[data.length-1].datetime);
var weekbefore = today.getTime() - 7* 24*3600*1000;
console.log(new Date(weekbefore) + " - " + today);
setTimeout(function() {tempchart.zoomToDates(new Date(weekbefore), today); adjustGroupHeight();}, 10);
}
}],
"chartCursor": {
"listeners": [{
"event": "changed",
"method": syncCursors
}, {
"event": "onHideCursor",
"method": hideCursors
}],
"oneBalloonOnly": true,
"cursorPosition": "mouse",
"valueLineEnabled": true,
"categoryBalloonEnabled": false,
"valueBalloonFormat": "%d"
},
"mouseWheelZoomEnabled": true,
"legend": {
//"rollOverColor": "#104090",
"valueText": "[[value]]℃",
"verticalGap": 0,
"position": "left",
"rollOverGraphAlpha": 0.1,
"listeners": [{
"event": "rollOverItem",
"method":
function(e) {
if (!tempchart.locktoggle) {
var value = e.dataItem.index;
humidchart.highlightGraph(humidchart.graphs[value]);
}
}
},{
"event": "clickMarker",
"method":
function(e) {
if (e.dataItem.hidden) {
let i = e.dataItem.index;
humidchart.hideGraph(humidchart.graphs[i]);
} else {
humidchart.showGraph(humidchart.graphs[e.dataItem.index]);
}
}
},{
"event": "rollOutItem",
"method":
function(e) {
if (!tempchart.locktoggle) {
emphasize(humidchart, 0, -1);
}
}
}],
},
/*
# group : I->ist, R->HSJ-R, L->HSJ-L, O->outside, H->kousaku, F->field-Lab
{ title => 'out', dir => '8', # sensor no. group => 'O', },
{ title => 'out2', dir => '20', group => 'O', },
{ title => 'win', dir => '15', group => 'O', },
{ title => 'ent', dir => '1', group => 'H', },
{ title => '3D', dir => '6', group => 'H', },
{ title => 'fun', dir => '7', group => 'H', },
{ title => 'RF', dir => '5', group => 'R', },
{ title => 'RC', dir => '10', group => 'R', },
{ title => 'RB', dir => '4', group => 'R', },
{ title => 'LF', dir => '3', group => 'L', },
{ title => 'LC', dir => '9', group => 'L', },
{ title => 'LB', dir => '2', group => 'L', },
{ title => 'GRL', dir => '14', group => 'I', },
{ title => 'ML1', dir => '13', group => 'I', },
{ title => 'ML2', dir => '12', group => 'I', },
{ title => 'F1', dir => '18', group => 'F', },
{ title => 'F2', dir => '17', group => 'F', },
{ title => 'F3', dir => '16', group => 'F', },
{ title => 'ist', dir => '11', group => 'I', },
{ title => 'SRV', dir => '19', group => 'I', }, */
"colors": colorss,
"graphs": tempgraphs
});
var humidchart = AmCharts.makeChart("humiddiv", {
"type": "serial",
"dataProvider": data,
"categoryField": "datetime",
"valueAxes": [{
id: 'v1',
guides: [{
value: 30,
toValue: 70,
fillColor: "#30CC30",
inside: true,
fillAlpha: 0.1,
lineAlpha: 0
}]}, {
id: 'v2',
axisAlpha: 0,
labelsEnabled: false,
maximum:49,
}],
"listeners": [{
"event": "zoomed",
"method": syncZoom
}, {
"event": "init",
"method":
function() {
today = new Date();
humidchart.zoomToDates(new Date(today.getTime() - 7*24*3600*1000), today);
}
}
],
"chartCursor": {
"oneBalloonOnly": true,
"cursorPosition": "mouse",
"valueLineEnabled": true,
"categoryBalloonDateFormat": "MMM DD, YYYY JJ:NN",
"listeners": [{
"event": "changed",
"method": syncCursors
}, {
"event": "onHideCursor",
"method": hideCursors
}]
},
"categoryAxis": {
"color": "#205020",
"fillColor": "#40a090",
"parseDates": true,
"dateFormats": [
{period: "fff", format: "NN:SS.QQQ"},
{period: "ss", format: "JJ:NN:SS"},
{period: "mm", format: "JJ:NN"},
{period: "hh", format: "JJ:NN"},
{period: "DD", format: "MM/DD(EEE)"},
{period: "WW", format: "MMM DD"},
{period: "MM", format: "MMM"},
{period: "YYYY", format: "YYYY"}],
"minPeriod": "mm",
"labelRotation": 0,
guides: guides,
},
"mouseWheelZoomEnabled": true,
"legend": {
"align": "top",
"rollOverColor": "#00f0f0",
"valueText": "[[value]]%",
"verticalGap": 0,
"position": "left",
"rollOverGraphAlpha": 0.2,
"listeners": [{
"event": "rollOverItem",
"method":
function(e) {
if (!tempchart.locktoggle) {
var value = e.dataItem.index;
tempchart.highlightGraph(tempchart.graphs[value]);
}
}
},{
"event": "clickMarker",
"method":
function(e) {
if (e.dataItem.hidden) {
let i = e.dataItem.index;
tempchart.hideGraph(tempchart.graphs[i]);
} else {
let i = e.dataItem.index;
tempchart.showGraph(tempchart.graphs[i]);
}
}
},{
"event": "rollOutItem",
"method":
function(e) {
if (!tempchart.locktoggle) {
emphasize(tempchart, 0, -1);
}
}
}],
},
"colors": colorss,
"graphs": humidgraphs,
});
function syncCursors(e) {
if(tempchart !== e.chart) {
tempchart.chartCursor.syncWithCursor(e.chart.chartCursor);
} else {
humidchart.chartCursor.syncWithCursor(e.chart.chartCursor);
}
}
function hideCursors(e) {
if(tempchart !== e.chart) {
tempchart.chartCursor.hideCursor();
tempchart.chartCursor.clearSelection();
} else {
humidchart.chartCursor.hideCursor();
humidchart.chartCursor.clearSelection();
}
}
function syncZoom(e) {
if (e.chart.ignoreZoom) {
e.chart.ignoreZoom = false;
return;
}
if(tempchart !== e.chart) {
tempchart.ignoreZoom = true;
tempchart.zoomToDates(e.startDate, e.endDate);
} else {
humidchart.ignoreZoom = true;
humidchart.zoomToDates(e.startDate, e.endDate);
}
}
function emphasize(cht, from, to) {
for (var i = 0; i< cht.graphs.length; i++) {
if (to < 0 || (i >= from && i <= to)) {
cht.graphs[i].lineAlpha = 1.0;
} else {
cht.graphs[i].lineAlpha = 0.2;
}
}
cht.validateNow();
}
function adjustGroupHeight() {
var legend = document.getElementsByClassName("amcharts-legend-div");
var group = [document.getElementById("tempgroup"), document.getElementById("humidgroup")];
group[0].style.height = legend[0].style.height;
group[1].style.height = legend[0].style.height;
}
function drawGroup(path, color, from, to) {
var w = 19, unit=18;
path.setAttribute("stroke", color);
path.setAttribute("stroke-width", 4);
path.setAttribute("fill", "none");
var f = from * unit+4, t = to * unit+4;
path.setAttribute("d", "M "+w+" "+f+
" Q 5 "+f+" 5 "+(f+w)+ // curve
" L 5 "+(t+unit/2-w)+ // line
" Q 5 "+(t+unit/2)+" "+w+" "+(t+unit/2)); // last curve
}
function enterleave(from, to, thickness, pathes) {
if(!tempchart.locktoggle){
emphasize(tempchart, from, to);pathes[0].setAttribute("stroke-width", thickness);
emphasize(humidchart, from, to);pathes[1].setAttribute("stroke-width", thickness);
}
}
function lockfocus(from, to, tgt, pathes) {
if (tempchart.locktoggle == tgt) {
pathes[0].setAttribute("stroke-width", 10);
pathes[1].setAttribute("stroke-width", 10);
tempchart.locktoggle = null;
} else if (!tempchart.locktoggle){
pathes[0].setAttribute("stroke-width", 12);
pathes[1].setAttribute("stroke-width", 12);
tempchart.locktoggle = tgt;
} else {
emphasize(tempchart, from, -to); emphasize(tempchart, from, to);
pathes[0].setAttribute("stroke-width", 12);
emphasize(humidchart, from, -to); emphasize(humidchart, from, to);
pathes[1].setAttribute("stroke-width", 12);
tempchart.locktoggle = tgt;
}
}
function makeGroup(from, to, color) {
var path1 = document.createElementNS("http://www.w3.org/2000/svg", "path");
var path2 = document.createElementNS("http://www.w3.org/2000/svg", "path");
var svgdiv1 = document.getElementById("tempgroup");
var svgdiv2 = document.getElementById("humidgroup");
drawGroup(path1,color,from,to);
drawGroup(path2,color,from,to);
svgdiv1.appendChild(path1);
svgdiv2.appendChild(path2);
tempchart.locktoggle = null;
path1.addEventListener("mouseenter", function() {enterleave(from, to, 10, [path1, path2]);});
path1.addEventListener("mouseleave", function() {enterleave(from, -to, 4, [path1, path2]);});
path1.addEventListener("click", function(e){lockfocus(from, to, e.target, [path1, path2]);});
path2.addEventListener("mouseenter", function() {enterleave(from, to, 10, [path1, path2]);});
path2.addEventListener("mouseleave", function() {enterleave(from, -to, 4, [path1, path2]);});
path2.addEventListener("click", function(e){lockfocus(from, to, e.target, [path1, path2]);});
}
makeGroup(0, 2, "blue");
makeGroup(3, 7, "green");
makeGroup(8, 10, "purple");
makeGroup(11, 14, "red");
function toggle_graphs(state,chart) {
let args = Array.from(arguments);
let wait = document.querySelector(".waitboard");
let sentinel = args.length-1;
wait.style.display = "block";
function inner(i) {
if (state) {
tempchart.showGraph(tempchart.graphs[args[i]]);
humidchart.showGraph(humidchart.graphs[args[i]]);
} else {
tempchart.hideGraph(tempchart.graphs[args[i]]);
humidchart.hideGraph(humidchart.graphs[args[i]]);
}
if (i < sentinel) {
setTimeout(function() {inner(i+1);}, 0);
} else {
wait.style.display = "none";
}
}
inner(1);
}
window.onkeydown = function(e) {
switch (e.keyCode) {
case 191:
alert("? help\n\n---- toggle all ----\na ALL CLEAR (toggle)\n---- toggle indivisually ----\ni IST (toggle)\nh HSJ (toggle)\nf HUB (toggle)\no outside (toggle)");
break;
case 65:
toggle_graphs(tempchart.graphs[0].hidden, 0,1,2,3,4,5,6,7,8,9,10,11,12,13,14);
break;
case 73:
toggle_graphs(tempchart.graphs[3].hidden, 3,4,5,6,7);
break;
case 72:
toggle_graphs(tempchart.graphs[0].hidden, 0,1,2);
break;
case 70:
toggle_graphs(tempchart.graphs[8].hidden, 8,9,10);
break;
case 79:
toggle_graphs(tempchart.graphs[11].hidden, 11,12,13);
break;
default:
console.log(e.keyCode);
break;
}
};
</script>
<div class="waitboard">
<div class="waititem">
<center>Changing....</center>
<div id="preloader_1"><span></span><span></span><span></span><span></span><span></span></div>
</div>
</div>
</body>
</html>
