Newer
Older
ondotori / index.html
<html>
<head>
    <meta charset="utf-8">
    <style type="text/css">
    </style>
    <script src="../amchart/amcharts.js"></script>
    <script src="../amchart/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",
		    "pathToImages": "../smart/images/",
		    "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",
		      "labelRotation": 25
		    },
		    "chartCursor": {
		      "cursorPosition": "mouse",
		      "valueLineEnabled": true,
		      "categoryBalloonDateFormat": "MMM DD, YYYY JJ:NN",
		      "valueBalloonFormat": "%d"
		    },
		    "mouseWheelZoomEnabled": true,
		    "legend": {
			    "valueText": "[[value]]℃",
			    "position": "left"
		    },
		    "graphs": [
		    {"type":"line", "valueField": "temp-1", "title": "01",
			    "balloonText": "<b>01: [[value]]℃</b>", },
		      {"type":"line", "valueField": "temp-2", "title": "02",
			    "balloonText": "<b>02: [[value]]℃</b>", },
		      {"type":"line", "valueField": "temp-4", "title": "04",
			    "balloonText": "<b>03: [[value]]℃</b>", },
		      {"type":"line", "valueField": "temp-8", "title": "8 outside",
			    "balloonText": "<b>08 out: [[value]]℃</b>", },
		      {"type":"line", "valueField": "temp-11", "title": "11",
			    "balloonText": "<b>11: [[value]]℃</b>", },
		      {"type":"line", "valueField": "temp-12", "title": "12",
			    "balloonText": "<b>12: [[value]]℃</b>", },
		      {"type":"line", "valueField": "temp-13", "title": "13",
			    "balloonText": "<b>13: [[value]]℃</b>", },
		      {"type":"line", "valueField": "temp-14", "title": "14",
			    "balloonText": "<b>14: [[value]]℃</b>", },
		      {"type":"line", "valueField": "temp-15", "title": "15",
			    "balloonText": "<b>15: [[value]]℃</b>", },
		      {"type":"line", "valueField": "temp-16", "title": "16",
			    "balloonText": "<b>16: [[value]]℃</b>", },
		      {"type":"line", "valueField": "temp-17", "title": "17",
			    "balloonText": "<b>17: [[value]]℃</b>", },
		      {"type":"line", "valueField": "temp-18", "title": "18",
			    "balloonText": "<b>18: [[value]]℃</b>", },
		      {"type":"line", "valueField": "temp-19", "title": "19",
			    "balloonText": "<b>19: [[value]]℃</b>", },
		      {"type":"line", "valueField": "temp-20",
			    "balloonText": "<b>20 out: [[value]]℃</b>",
			      "title": "20 outside", "id": "tempscale" },
		    ] 
	    });
    
    var humidchart = AmCharts.makeChart("humiddiv", {
		    "type": "serial",
		    "pathToImages": "../smart/images/",
		    "dataProvider": data,
		    "categoryField": "datetime",
		    "chartCursor": {
		      "cursorPosition": "mouse",
		      "valueLineEnabled": true,
		      "categoryBalloonDateFormat": "MMM DD, YYYY JJ:NN"
		    },
		    "categoryAxis": {
		      "parseDates": true,
		      "minPeriod": "mm",
		    },
		    "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"
		       },
		    ] 
	    });
    </script>
</body>
</html>