I want to plot data points with the attributes 'value' and 'date'. Problem is, the format is data: [[...], [...]] where the first bracket is, say, 'value' and the second 'date'. I'd like to know how to split the two vectors, that is, take one value from each vector and put it into that format to create a data point. Perhaps there's some other way to do this?
'values' are stored as $data[] = $row['value']; 'date' are stored as $data2[] = $row['date'];
Fully working code with only one working vector 'value' down below:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>My first column chart by Highcharts</title>
<!-- 1. Add JQuery and Highcharts in the head of your page -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<!-- 2. You can add print and export feature by adding this line -->
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<!-- 3. Add the JavaScript with the Highchart options to initialize the chart -->
<script type="text/javascript">
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<?php
$con=mysql_connect('localhost','root','');
mysql_select_db("sensordb", $con);
$result=mysql_query('select value, date from data');
while($row = mysql_fetch_array($result)) {
$data[] = $row['value'];
$data2[] = $row['date'];
}
?>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<script type="text/javascript">
$(function () {
$('#container').highcharts({
title: {
text: 'Monthly Average Temperature',
x: -20 //center
},
subtitle: {
text: 'Source: WorldClimate.com',
x: -20
},
xAxis: {
},
yAxis: {
title: {
text: 'Temperature (°C)'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
valueSuffix: '°C'
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
series: [{
name: 'Tokyo',
data: [<?php echo join($data, ',') ?>]
}]
});
});
</script>
</head>
<body>
<!-- 3. Add the container -->
<div id="container" style="width: 600px; height: 400px; margin: 0 auto"></div>
</body>
</html>
So based on your comments, you need your data in the standard format of
data: [[date,value],[date,value]...]
Which is a very different thing from splitting the data into two arrays. :)
Take this:
$data[] = $row['value'];
$data2[] = $row['date'];
And change it to this:
$data[] = array($row['date'],$row['value']);
Keep in mind that your dates will need to be in epoch format, as milliseconds, and you will need to json_encode the array.
You'll also need to make sure your values are numeric, by casting them to either integers or floats, depending on which they are expected to be.
You can get the date and value in the right format like this:
$data[] = array(
strtotime($row['date']) * 1000, //convert to epoch time, multiply for milliseconds
(float)$row['value'] //cast value as a float; use (int) to cast as integer
);
When you add the data to the chart, try it this way:
series:[{
data: <?echo json_encode($data); ?>
}]
(note that I do not include the brackets - the json_encode() does that already)