I'm trying to create a plot of temperature change over a period of time, so to start off, I'm trying to get a graph up with some test data plotted on it, but none of the data seems to want to show. I'm a bit new to JavaScript and flot, so I tried piecing together the needed code based off of seeing how other people created graphs in flot.
The data for the time on the x-axis, I created in the code just to have something to plot the temperature against, whilst I retrieved the temperature data from a .json file with test data in it. Getting the data points into a set to pass into the plot function seems to be coming together okay, but I just can't get a display. Instead, all I get is what is shown in the image that I will display after my code. Could anyone please let me know what I did wrong or what I'm missing? I'm honestly stumped here.
Source code (made by editing a flot example page):
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Flot Examples: Resizing</title>
<link href="../examples.css" rel="stylesheet" type="text/css">
<link href="../shared/jquery-ui/jquery-ui.min.css" rel="stylesheet" type="text/css">
<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="../../excanvas.min.js"></script><![endif]-->
<script language="javascript" type="text/javascript" src="../../jquery.js"></script>
<script language="javascript" type="text/javascript" src="../shared/jquery-ui/jquery-ui.min.js"></script>
<script language="javascript" type="text/javascript" src="../../jquery.flot.js"></script>
<script language="javascript" type="text/javascript" src="../../jquery.flot.time.js"></script>
<script type="text/javascript">
$(document).ready(function() {
//Creating an array to hold the plot data
var plotdata = new Array();
$.getJSON('test_data.json', function (data) {
//Creating a base date to make times off of
var basedate = new Date("February 20, 2017 08:00");
for(var i = 0; i < 10; i++)
{
var datepoint = new Date(basedate.getTime() + 600000*i).getTime();
switch(i) {
case 0:
var temppoint = data["node 10"][0]["2017-02-22 20:00"][0];
break;
case 1:
var temppoint = data["node 10"][0]["2017-02-18 22:50"][0];
break;
case 2:
var temppoint = data["node 10"][0]["2017-02-20 22:00"][0];
break;
case 3:
var temppoint = data["node 10"][0]["2017-02-20 13:50"][0];
break;
case 4:
var temppoint = data["node 10"][0]["2017-02-19 7:00"][0];
break;
case 5:
var temppoint = data["node 10"][0]["2017-02-21 15:30"][0];
break;
case 6:
var temppoint = data["node 10"][0]["2017-02-18 3:50"][0];
break;
case 7:
var temppoint = data["node 10"][0]["2017-02-16 5:20"][0];
break;
case 8:
var temppoint = data["node 10"][0]["2017-02-19 6:10"][0];
break;
case 9:
var temppoint = data["node 10"][0]["2017-02-16 0:40"][0];
break;
}
//plotdata[i] = [datepoint, temppoint];
plotdata.push(new Array(datepoint, temppoint));
}
console.log(plotdata)
}) //End of getJSON
var dataset = [
{
label: "temperature",
data: plotdata
}
];//End of var dataset declaration
$.plot($("#placeholder"), dataset, {
series: {
lines: { show: true },
points: {show: true },
},
grid: {
hoverable: true,
clickable: true
},
xaxis:
{
mode: "time",
timeformat: "%h: %M\n %m/%d/%y",
min: (new Date("2017/02/19")).getTime(),
max: (new Date("2017/02/21")).getTime()
},
yaxis:
{
min: 50, max: 100, tickSize: 5
}
});
}) //End of (document).ready
</script>
</head>
<body>
<div id="content">
<div class="demo-container">
<div id="placeholder" class="demo-placeholder"></div>
</div>
</div>
</body>
</html>This is what results from the code: https://i.stack.imgur.com/nEuDF.jpg
Any insights as to what I can do to fix this would be much appreciated. Thanks!
