I am trying to create a simple program that takes weather data from my database that I have setup, and display it on a webpage. The way I have it setup right now is that you have to enter a value in the text box in order to get the data to pull.
My HTML Code:
<!DOCTYPE html>
<html>
<head>
<title>Database</title>
</head>
<body>
Name: <input type="text" id="name">
<input type="submit" id="name-submit" value="Grab">
<div id="name-data"></div>
<div id="container" style="min-width: 310px; height: 400px;
margin: 0 auto"></div>
<script src="http://code.jquery.com/jquery-1.8.0.min.js">
</script>
<script src="js/global.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"> </script>
</body>
</html>
My PHP Code:
<?php
if(isset($_POST['name']) === true && empty($_POST['name']) === false) {
mysql_connect("localhost", "root", "Logilube163");
mysql_select_db("Weather_Test_Simple_Schema__Rev1");
$query = mysql_query("SELECT * FROM Location");
while($row = mysql_fetch_array($query)){
$time = strtotime($row['time']) * 1000;
$tempF = $row['temp_f'];
![enter image description here][1]$data []= [(int)$time, (int)$tempF];
}
echo json_encode($data);
}
?>
The code is able to query my database, and put the data into the data array $data.
The array of data is then encoded using the json_encode(); function and is transferred to the javascript file where it is successfully being read out and placed in a on the html page.
My JS code:
$('input#name-submit').on('click', function(){
var name = $('input#name').val();
if($.trim(name)!=''){
$.post('/ajaxdb/ajax/name.php',{name: name}, function(data){
$('div#name-data').text(data); // Outputs the data before the graph
$('#container').highcharts({
chart: {
zoomType: 'x'
},
xAxis: {
type: 'datetime',
minRange: 24 * 3600000
},
title : {
text : 'Weather Data'
},
series : [{
data: data // <-- This data is not being read in by the graph
//[[1432813308000,78],[1432813904000,77],[1432813968000,77],[1432814016000,77],[1432815600000,78],[1432832464000,66],[1432843057000,65],[1432843731000,65]]
//The above data is read in by the graph and plots just fine.
}]
});
});
}
});
My output result looks like this:
The problem is that this same data that is read out in the javascript, and is not being able to be placed in the highcharts graph. Instead, the chart gets created with the correct axis but without any data points. However, when I enter the data points being created by the tag, the data gets plotted just fine.
