<html>
<head>
<meta charset="utf-8">
<style type="text/css">
</style>
<script src="./amcharts/amcharts.js"></script>
<script src="./amcharts/serial.js"></script>
<script src="mergeddata.json"></script>
</head>
<body>
<div id="tempdiv" style="width: 100%; height:50%"></div>
<div id="humiddiv" style="width: 100%; height:50%"></div>
<script>
var tempchart= AmCharts.makeChart("tempdiv", {
"type": "serial",
"dataProvider": data,
"categoryField": "datetime",
"chartScrollbar": {
"autoGridCount": true,
"graph": "tempscale",
"selectedGraphLineAlpha": 1,
"selectedGraphFillAlpha": 0,
"selectedBackgroundColor": "#c0d0e0",
"graphLineAlpha": 1,
"graphFillAlpha": 0,
"scrollbarHeight": 30
},
"categoryAxis": {
"parseDates": true,
"minPeriod": "mm",
"labelsEnabled": false,
},
"listeners": [{
"event": "zoomed",
"method": syncZoom
}],
"chartCursor": {
"listeners": [{
"event": "changed",
"method": syncCursors
}, {
"event": "onHideCursor",
"method": hideCursors
}],
"oneBalloonOnly": true,
"cursorPosition": "mouse",
"valueLineEnabled": true,
"categoryBalloonEnabled": false,
"valueBalloonFormat": "%d"
},
"mouseWheelZoomEnabled": true,
"legend": {
"valueText": "[[value]]℃",
"position": "left"
},
"graphs": [
{"type":"line", "valueField": "temp-1", "title": "01",
"balloonText": "<b>01</b>", },
{"type":"line", "valueField": "temp-2", "title": "02",
"balloonText": "<b>02</b>", },
{"type":"line", "valueField": "temp-4", "title": "04",
"balloonText": "<b>03</b>", },
{"type":"line", "valueField": "temp-8", "title": "8 outside",
"balloonText": "<b>08℃</b>", },
{"type":"line", "valueField": "temp-11", "title": "11",
"balloonText": "<b>11", },
{"type":"line", "valueField": "temp-12", "title": "12",
"balloonText": "<b>12</b>", },
{"type":"line", "valueField": "temp-13", "title": "13",
"balloonText": "<b>13</b>", },
{"type":"line", "valueField": "temp-14", "title": "14",
"balloonText": "<b>14</b>", },
{"type":"line", "valueField": "temp-15", "title": "15",
"balloonText": "<b>15</b>", },
{"type":"line", "valueField": "temp-16", "title": "16",
"balloonText": "<b>16</b>", },
{"type":"line", "valueField": "temp-17", "title": "17",
"balloonText": "<b>17</b>", },
{"type":"line", "valueField": "temp-18", "title": "18",
"balloonText": "<b>18</b>", },
{"type":"line", "valueField": "temp-19", "title": "19",
"balloonText": "<b>19</b>", },
{"type":"line", "valueField": "temp-20",
"balloonText": "<b>20</b>",
"title": "20 outside", "id": "tempscale" },
]
});
var humidchart = AmCharts.makeChart("humiddiv", {
"type": "serial",
"dataProvider": data,
"categoryField": "datetime",
"valueAxis": {
"ignoreAxisWidth": true
},
"listeners": [{
"event": "zoomed",
"method": syncZoom
}],
"chartCursor": {
"oneBalloonOnly": true,
"cursorPosition": "mouse",
"valueLineEnabled": true,
"categoryBalloonDateFormat": "MMM DD, YYYY JJ:NN",
"listeners": [{
"event": "changed",
"method": syncCursors
}, {
"event": "onHideCursor",
"method": hideCursors
}]
},
"categoryAxis": {
"parseDates": true,
"minPeriod": "mm",
"labelRotation": 25
},
"mouseWheelZoomEnabled": true,
"legend": {
"valueText": "[[value]]%",
"position": "left"
},
"graphs": [
{"type":"line", "valueField": "humid-1", "title": "01",
"balloonText": "<b>01: [[value]]%</b>"},
{"type":"line", "valueField": "humid-2", "title": "02",
"balloonText": "<b>02: [[value]]%</b>"},
{"type":"line", "valueField": "humid-4", "title": "04",
"balloonText": "<b>04: [[value]]%</b>"},
{"type":"line", "valueField": "humid-8", "title": "08 outside",
"balloonText": "<b>08 out : [[value]]%</b>"},
{"type":"line", "valueField": "humid-11", "title": "11",
"balloonText": "<b>11: [[value]]%</b>"},
{"type":"line", "valueField": "humid-12", "title": "12",
"balloonText": "<b>12: [[value]]%</b>"},
{"type":"line", "valueField": "humid-13", "title": "13",
"balloonText": "<b>13: [[value]]%</b>"},
{"type":"line", "valueField": "humid-14", "title": "14",
"balloonText": "<b>14: [[value]]%</b>"},
{"type":"line", "valueField": "humid-15", "title": "15",
"balloonText": "<b>15: [[value]]%</b>"},
{"type":"line", "valueField": "humid-16", "title": "16",
"balloonText": "<b>16: [[value]]%</b>"},
{"type":"line", "valueField": "humid-17", "title": "17",
"balloonText": "<b>17: [[value]]%</b>"},
{"type":"line", "valueField": "humid-18", "title": "18",
"balloonText": "<b>18: [[value]]%</b>"},
{"type":"line", "valueField": "humid-19", "title": "19",
"balloonText": "<b>19: [[value]]%</b>"},
{"type":"line", "valueField": "humid-20",
"balloonText": "<b>20 out: [[value]]%</b>",
"title": "20 outside", "id": "humidscale"
},
]
});
function syncCursors(e) {
console.log("sync"+e.chart)
if(tempchart !== e.chart) {
tempchart.chartCursor.syncWithCursor(e.chart.chartCursor);
} else {
humidchart.chartCursor.syncWithCursor(e.chart.chartCursor);
}
}
function hideCursors(e) {
console.log("hidef"+e)
if(tempchart !== e.chart) {
tempchart.chartCursor.hideCursor();
tempchart.chartCursor.clearSelection();
} else {
humidchart.chartCursor.hideCursor();
humidchart.chartCursor.clearSelection();
}
}
function syncZoom(e) {
console.log("zoomg"+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);
}
}
console.log(humidchart.chartCursor.syncWithCursor(tempchart.charCursor));
console.log("hoge");//+ humidchart.chartCursor);
//humidchart.chartCursor.syncWithCursor(tempchart.chartCursor);
</script>
</body>
</html>
