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.sstatic.net/nEuDF.jpg
Any insights as to what I can do to fix this would be much appreciated. Thanks!
As it turns out, the problem was that the plot function was outside of the .getJSON function. As someone whose main programming knowledge is based on C, I assumed that having the plotdata variable outside of the .getJSON function tied it to that scope, but after the end of .getJSON, the plotdata variable showed to have a size of 0, instead of the 10 points of test data that I set into it in the .getJSON function.
To fix this, I just moved the plot function into the .getJSON function, and now it keeps the changes made to plotdata and displays the proper graph.
