@@ -35,7 +35,13 @@ "#CD0D74", "#CC0000", "#00CC00", "#0000CC", "#0D9D9D", "#999999", "#333333", "#990000", "#a0ee70", "#f0ff00",] ; var guides = [{ - date: "2017/01/08", toDate: "2017/1/9", + date: "2017/01/15 00:00", toDate: "2017/1/16 00:00", + fillColor: "#f08080", fillAlpha: 0.1, lineAlpha: 0 + },{ + date: "2017/01/14 00:00", toDate: "2017/1/15 00:00", + fillColor: "#8080f0", fillAlpha: 0.1, lineAlpha: 0 + },{ + date: "2017/01/08 00:00", toDate: "2017/1/9 00:00", fillColor: "#f08080", fillAlpha: 0.1, lineAlpha: 0 },{ date: "2017/01/07 00:00", toDate: "2017/1/8 00:00", @@ -73,13 +79,13 @@ }]; sensors = [ - [ 1, "HSJ入口"], [ 2, "実験室LB"], + [ 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"], + [12, "ML2"], [13, "ML1"], + [14, "GRL"], [19, "サーバ室"], + [16, "HUB ML2"], [17, "HUB ML1"], + [18, "HUB GRL"], [15, "窓"], + [08, "外気1"], [20, "外気2"], ]; tempgraphs = []; @@ -159,11 +165,29 @@ }, "mouseWheelZoomEnabled": true, "legend": { - "rollOverColor": "#104090", + //"rollOverColor": "#104090", "valueText": "[[value]]℃", "verticalGap": 0, "position": "left", "rollOverGraphAlpha": 0.2, + "listeners": [{ + "event": "rollOverItem", + "method": + function(e) { + if (!tempchart.locktoggle) { + var value = e.dataItem.index; + emphasize(humidchart, value, value); + } + } + },{ + "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 @@ -247,6 +271,24 @@ "verticalGap": 0, "position": "left", "rollOverGraphAlpha": 0.2, + "listeners": [{ + "event": "rollOverItem", + "method": + function(e) { + if (!tempchart.locktoggle) { + var value = e.dataItem.index; + emphasize(tempchart, value, value); + } + } + },{ + "event": "rollOutItem", + "method": + function(e) { + if (!tempchart.locktoggle) { + emphasize(tempchart, 0, -1); + } + } + }], }, "colors": colorss, "graphs": humidgraphs, @@ -298,18 +340,12 @@ function adjustGroupHeight() { var legend = document.getElementsByClassName("amcharts-legend-div"); var group = [document.getElementById("tempgroup"), document.getElementById("humidgroup")]; - console.log(legend[0].style.height); group[0].style.height = legend[0].style.height; group[1].style.height = legend[0].style.height; } - - function makeGroup(cht, idgroup, from, to, color) { + function drawGroup(path, color, from, to) { var w = 19, unit=18; - var path = document.createElementNS("http://www.w3.org/2000/svg", "path"); - - cht.locktoggle = null; - cht.current_path = null; path.setAttribute("stroke", color); path.setAttribute("stroke-width", 4); path.setAttribute("fill", "none"); @@ -318,42 +354,58 @@ " 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 - - svg = document.getElementById(idgroup); - svg.appendChild(path); - path.addEventListener("mouseenter", function(){if(!cht.locktoggle){ - emphasize(cht, from, to);path.setAttribute("stroke-width", 10);}}); - path.addEventListener("mouseleave", function(){if(!cht.locktoggle){ - emphasize(cht, from, -to);path.setAttribute("stroke-width", 4);}}); - path.addEventListener("click", function(e){ - if (cht.locktoggle == e.target) { - path.setAttribute("stroke-width", 10); - cht.locktoggle = null; - cht.current_path = null; - } else if (!cht.locktoggle){ - path.setAttribute("stroke-width", 12); - cht.locktoggle = e.target; - cht.current_path = path; - } else { - emphasize(cht, from, -to); - emphasize(cht, from, to); - cht.current_path.setAttribute("stroke-width", 4); - path.setAttribute("stroke-width", 12); - cht.locktoggle = e.target; - cht.current_path = path; - } - }); } - makeGroup(tempchart, "tempgroup", 0, 2, "blue"); - makeGroup(tempchart, "tempgroup", 3, 7, "green"); - makeGroup(tempchart, "tempgroup", 8, 10, "purple"); - makeGroup(tempchart, "tempgroup", 11, 13, "red"); + 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); + } + } - 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 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, 13, "red"); function toggle_graphs(state,chart) { function inner(i, args) {