<----------------------------DrawGraph.html-------------------->
<html>
<head>
<title></title>
</head>
<body>
<div class="container-fluid">
<p>IN container </p>
<div id="chartContainer" style="height: 370px; max-width: 920px; margin: 0px auto;"></div>
</div>
</div>
<input type="date" name="gsdate" id="gsdate"></div>
<input type="date" name="gedate" id="gedate"></div>
<select name="gitem" id="gitem">
<option value="">Select item</option>
<option value="SetPoint">Set Point</option>
<option value="SupplyWater">Supply Water</option>
</select>
<select name="gAHU" id="gAHU">
<option value="">Select AHU</option>
<option value="AHU 1-1">AHU 1-1</option>
<option value="AHU 1-2">AHU 1-2</option>
<option value="AHU 2-1">AHU 2-1</option>
<option value="AHU 2-2">AHU 2-2</option>
</select>
<button type="button" id="run" onclick="drawgraph()">Draw Graph</button>
<script type="text/javascript" src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="https://cdn.canvasjs.com/jquery.canvasjs.min.js"></script>
<script type="text/javascript">
function drawgraph()
{
var gsdate = $("#gsdate").val();
var gedate = $("#gedate").val();
var gAHU = $("#gAHU").val();
var gitem = $('#gitem').val();
DataArray =
{
"gsdate" : gsdate,
"gedate" : gedate,
"gAHU" : gAHU ,
"gitem" : gitem
}
$.ajax({
type:"POST",
url : "myphpService.php",
data : DataArray,
datatype : 'html',
}).done(function(data,Status)
{
$("#gmessage").html(data);
})
}
$.getJSON("myphpService.php", function(result)
{
var dps= [];
for(var i=0; i<result.length;i++)
{
dps.push({
"label":result[i].year,
"y":[result[i].minivalue,result[i].maxivalue]
});
}
var chart = new CanvasJS.Chart("chartContainer",
{
animationEnabled:true,
title:
{
text: "BMS Performance Monitroing",
},
axisX:
{
title: "Date",
},
axisY:
{
title: "Range",
},
data: [{
type: "rangeColumn",
dataPoints: dps
}]
});
chart.render();
});
</script>
</body>
</html>
.
