<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;
}
.chart { float: right; }
</style>
<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 14 252"></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 14 252"></svg>
</div>
<div id="humiddiv" class="chart" style="width: 99%; height:50%"></div>
<script>
var colorss =
["#FF6600", "#FCD202", "#309E09", "#0D8ECF", "#2A0CD0",
"#CD0D74", "#CC0000", "#00CC00", "#0000CC", "#DDDDDD",
"#999999", "#333333", "#990000", "#a0ee70", "#f0ff00",] ;
var tempchart= AmCharts.makeChart("tempdiv", {
"type": "serial",
"dataProvider": data,
"categoryField": "datetime",
valueAxes: [{
guides: [{
value: 10,
toValue: 25,
fillColor: "#30CC30",
inside: true,
fillAlpha: 0.1,
lineAlpha: 0
}]
}],
"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: [{
date: "2017-1-8", toDate: "2017-1-9",
fillAlpha: 0.1, fillColor: "#f08080", fillAlpha: 0.1, lineAlpha: 0
},{
date: "2017-1-7", toDate: "2017-1-8",
fillAlpha: 0.1, fillColor: "#8080f0", fillAlpha: 0.1, lineAlpha: 0
},{
date: "2017-1-1", toDate: "2017-1-2",
fillAlpha: 0.1, fillColor: "#f08080", fillAlpha: 0.1, lineAlpha: 0
},{
date: "2016-12-31 0:0", toDate: "2017-1-1 0:0",
fillAlpha: 0.1, fillColor: "#8080f0", fillAlpha: 0.1, lineAlpha: 0
},{
date: "2016-12-24 0:0", toDate: "2016-12-25 0:0",
fillAlpha: 0.1, fillColor: "#8080f0", fillAlpha: 0.1, lineAlpha: 0
},{
date: "2016-12-25 0:0", toDate: "2016-12-26 0:0",
fillAlpha: 0.1, fillColor: "#f08080", fillAlpha: 0.1, lineAlpha: 0
},{
date: "2016-12-17 0:0", toDate: "2016-12-18 0:0",
fillAlpha: 0.1, fillColor: "#8080f0", fillAlpha: 0.1, lineAlpha: 0
},{
date: "2016-12-18 0:0", toDate: "2016-12-19 0:0",
fillAlpha: 0.1, fillColor: "#f08080", fillAlpha: 0.1, lineAlpha: 0
},{
date: "2016-12-10 0:0", toDate: "2016-12-11 0:0",
fillAlpha: 0.1, fillColor: "#8080f0", fillAlpha: 0.1, lineAlpha: 0
},{
date: "2016-12-11 0:0", toDate: "2016-12-12 0:0",
fillAlpha: 0.1, fillColor: "#f08080", fillAlpha: 0.1, lineAlpha: 0
},{
date: "2016-12-03 0:0", toDate: "2016-12-04 0:0",
fillAlpha: 0.1, fillColor: "#8080f0", fillAlpha: 0.1, lineAlpha: 0
},{
date: "2016-12-04 0:0", toDate: "2016-12-05 0:0",
fillAlpha: 0.1, fillColor: "#f08080", fillAlpha: 0.1, lineAlpha: 0
}],
},
"listeners": [{
"event": "zoomed",
"method": syncZoom
}, {
"event": "init",
"method":
function() {
var today = new Date();
var weekbefore = today.getTime - 7* 24*3600*1000;
console.log(new Date(weekbefore) + " - " + today);
tempchart.zoomToDates(new Date(weekbefore), today);
}
}],
"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.2,
},
/*
# 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": [
{"type":"line", "valueField": "temp-1", "title": "01 ent H",
"balloonText": "<b>01 ent: [[value]]℃</b>", },
{"type":"line", "valueField": "temp-2", "title": "02 LB L",
"balloonText": "<b>02 LB: [[value]]℃</b>", },
{"type":"line", "valueField": "temp-4", "title": "04 RB R",
"balloonText": "<b>04 RB: [[value]]℃</b>", },
{"type":"line", "valueField": "temp-11", "title": "11 ist準備",
"balloonText": "<b>11 ist: [[value]]℃</b>", },
{"type":"line", "valueField": "temp-12", "title": "12 ML2",
"balloonText": "<b>12 ML2: [[value]]℃</b>", },
{"type":"line", "valueField": "temp-13", "title": "13 ML1",
"balloonText": "<b>13 ML1: [[value]]℃</b>", },
{"type":"line", "valueField": "temp-14", "title": "14 GRL",
"balloonText": "<b>14 GRL: [[value]]℃</b>", },
{"type":"line", "valueField": "temp-19", "title": "19 サーバ",
"balloonText": "<b>19 サーバ: [[value]]℃</b>", },
{"type":"line", "valueField": "temp-16", "title": "16 領域3 F",
"balloonText": "<b>16 領域3: [[value]]℃</b>", },
{"type":"line", "valueField": "temp-17", "title": "17 領域2 F",
"balloonText": "<b>17 領域2: [[value]]℃</b>", },
{"type":"line", "valueField": "temp-18", "title": "18 領域1 F",
"balloonText": "<b>18 領域1: [[value]]℃</b>", },
{"type":"line", "valueField": "temp-15", "title": "15 win O",
"balloonText": "<b>15 win: [[value]]℃</b>", },
{"type":"line", "valueField": "temp-8", "title": "08 out",
"balloonText": "<b>08 out: [[value]]℃</b>", },
{"type":"line", "valueField": "temp-20",
"balloonText": "<b>20 out: [[value]]℃</b>",
"title": "20 out", "id": "tempscale" },
]
});
var humidchart = AmCharts.makeChart("humiddiv", {
"type": "serial",
"dataProvider": data,
"categoryField": "datetime",
"valueAxes": [{
guides: [{
value: 30,
toValue: 70,
fillColor: "#30CC30",
inside: true,
fillAlpha: 0.1,
lineAlpha: 0
}]
}],
"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,
"minPeriod": "mm",
"labelRotation": 25,
guides: [{
date: "2017-1-8", toDate: "2017-1-9",
fillAlpha: 0.1, fillColor: "#f08080", fillAlpha: 0.1, lineAlpha: 0
},{
date: "2017-1-7", toDate: "2017-1-8",
fillAlpha: 0.1, fillColor: "#8080f0", fillAlpha: 0.1, lineAlpha: 0
},{
date: "2017-1-1", toDate: "2017-1-2",
fillAlpha: 0.1, fillColor: "#f08080", fillAlpha: 0.1, lineAlpha: 0
},{
date: "2016-12-31 0:0", toDate: "2017-1-1 0:0",
fillAlpha: 0.1, fillColor: "#8080f0", fillAlpha: 0.1, lineAlpha: 0
},{
date: "2016-12-24 0:0", toDate: "2016-12-25 0:0",
fillAlpha: 0.1, fillColor: "#8080f0", fillAlpha: 0.1, lineAlpha: 0
},{
date: "2016-12-25 0:0", toDate: "2016-12-26 0:0",
fillAlpha: 0.1, fillColor: "#f08080", fillAlpha: 0.1, lineAlpha: 0
},{
date: "2016-12-17 0:0", toDate: "2016-12-18 0:0",
fillAlpha: 0.1, fillColor: "#8080f0", fillAlpha: 0.1, lineAlpha: 0
},{
date: "2016-12-18 0:0", toDate: "2016-12-19 0:0",
fillAlpha: 0.1, fillColor: "#f08080", fillAlpha: 0.1, lineAlpha: 0
},{
date: "2016-12-10 0:0", toDate: "2016-12-11 0:0",
fillAlpha: 0.1, fillColor: "#8080f0", fillAlpha: 0.1, lineAlpha: 0
},{
date: "2016-12-11 0:0", toDate: "2016-12-12 0:0",
fillAlpha: 0.1, fillColor: "#f08080", fillAlpha: 0.1, lineAlpha: 0
},{
date: "2016-12-03 0:0", toDate: "2016-12-04 0:0",
fillAlpha: 0.1, fillColor: "#8080f0", fillAlpha: 0.1, lineAlpha: 0
},{
date: "2016-12-04 0:0", toDate: "2016-12-05 0:0",
fillAlpha: 0.1, fillColor: "#f08080", fillAlpha: 0.1, lineAlpha: 0
}],
},
"mouseWheelZoomEnabled": true,
"legend": {
"align": "top",
"rollOverColor": "#00f0f0",
"valueText": "[[value]]%",
"verticalGap": 0,
"position": "left",
"rollOverGraphAlpha": 0.2,
},
"colors": colorss,
"graphs": [
{"type":"line", "valueField": "humid-1", "title": "01 ent H",
"balloonText": "<b>01 ent: [[value]]%</b>"},
{"type":"line", "valueField": "humid-2", "title": "02 LB L",
"balloonText": "<b>02 LB: [[value]]%</b>"},
{"type":"line", "valueField": "humid-4", "title": "04 RB R",
"balloonText": "<b>04 RB: [[value]]%</b>"},
{"type":"line", "valueField": "humid-11", "title": "11 ist",
"balloonText": "<b>11 ist: [[value]]%</b>"},
{"type":"line", "valueField": "humid-12", "title": "12 ML2",
"balloonText": "<b>12 ML2: [[value]]%</b>"},
{"type":"line", "valueField": "humid-13", "title": "13 ML1",
"balloonText": "<b>13 ML1: [[value]]%</b>"},
{"type":"line", "valueField": "humid-14", "title": "14 GRL",
"balloonText": "<b>14 GRL: [[value]]%</b>"},
{"type":"line", "valueField": "humid-19", "title": "19 サーバ",
"balloonText": "<b>19 サーバ: [[value]]%</b>"},
{"type":"line", "valueField": "humid-16", "title": "16 領域3",
"balloonText": "<b>16 領域3: [[value]]%</b>"},
{"type":"line", "valueField": "humid-17", "title": "17 領域2",
"balloonText": "<b>17 領域2: [[value]]%</b>"},
{"type":"line", "valueField": "humid-18", "title": "18 領域1",
"balloonText": "<b>18 領域1: [[value]]%</b>"},
{"type":"line", "valueField": "humid-15", "title": "15 win O",
"balloonText": "<b>15 win: [[value]]%</b>"},
{"type":"line", "valueField": "humid-8", "title": "08 out",
"balloonText": "<b>08 out : [[value]]%</b>"},
{"type":"line", "valueField": "humid-20",
"balloonText": "<b>20 out: [[value]]%</b>",
"title": "20 out", "id": "humidscale"
},
]
});
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 makeGroup(cht, idgroup, from, to, color) {
var w = 14, unit=18;
var path = document.createElementNS("http://www.w3.org/2000/svg", "path");
path.setAttribute("stroke", color);
path.setAttribute("stroke-width", 4);
path.setAttribute("fill", "white");
var f = from * unit+4, t = to * unit+4;
path.setAttribute("d", "M "+w+" "+f+
" Q 0 "+f+" 0 "+(f+w)+ // curve
" L 0 "+(t)+ // line
" Q 0 "+(t+unit/2)+" "+w+" "+(t+unit/2)); // last curve
svg = document.getElementById(idgroup);
svg.appendChild(path);
path.addEventListener("mouseenter", function(){emphasize(cht, from, to);path.setAttribute("stroke-width", 10);});
path.addEventListener("mouseleave", function(){emphasize(cht, from, -to);path.setAttribute("stroke-width", 4);});
}
makeGroup(tempchart, "tempgroup", 0, 2, "blue");
makeGroup(tempchart, "tempgroup", 3, 7, "green");
makeGroup(tempchart, "tempgroup", 8, 10, "purple");
makeGroup(tempchart, "tempgroup", 11, 13, "red");
makeGroup(humidchart, "humidgroup", 0, 2, "blue");
makeGroup(humidchart, "humidgroup", 3, 7, "green");
makeGroup(humidchart, "humidgroup", 8, 10, "purple");
makeGroup(humidchart, "humidgroup", 11, 13, "red");
function toggle_graphs(state,chart) {
function inner(i, args) {
if (i < args.length-1) {
setTimeout(function() {inner(i+1, args);}, 0);
}
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]]);
}
}
inner(1, arguments);
}
window.onkeydown = function(e) {
switch (e.keyCode) {
case 191:
alert("?\thelp\ni\tIST\t\t(toggle)\nh\tHSJ\t\t(toggle)\nf\tField\t(toggle)\no\toutside\t(toggle)");
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>
</body>
</html>
