I have a working Highcharts, where my data comes from MYSQL with a PHP query. Result from MYSQL looks like this:
[{"name":"Datum","data":["2015-10-02 07:51","2015-10-02 07:56","2015-10-02 08:01"]},{"name":"Temp","data":[20.3,20.2,20.2]},{"name":"Fukt","data":[48.6,48.5,48.5]},{"name":"Comment","data":["Basement",null,null]}]
I am measuring Temperature and Humidity on different locations and each time I change location I type in the name of the location as a comment to MYSQL.
Now i want to show that comment in Highcharts.
This is my Highchart PHP file
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" / >
<meta http-equiv="refresh" content="150">
<title>DHT22</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var options = {
chart: {
zoomType: 'xy',
renderTo: 'container',
marginRight: 140,
marginBottom: 55
},
title: {
text: 'DHT22',
x: -20 //center
},
xAxis: {
crosshair: true,
tickInterval: 250,
labels: {
align: 'center',
}
},
yAxis: [{
title: {
style: {
color: Highcharts.getOptions().colors[10]
},
text: 'Fukt %',
rotation: -90,
x:0,
},
labels: {
style: {
color: Highcharts.getOptions().colors[10]
},
overflow: 'justify'
}
},
{
title: {
style: {
color: Highcharts.getOptions().colors[0]
},
tickInterval: 1,
text: 'Temp °C',
rotation: -90,
x:0,
},
labels: {
style: {
color: Highcharts.getOptions().colors[0]
},
overflow: 'justify'
},
},
{
title: {
style: {
color: Highcharts.getOptions().colors[0]
},
tickInterval: 1,
text: 'Temp °C',
rotation: 90,
x:10,
},
labels: {
style: {
color: Highcharts.getOptions().colors[0]
},
overflow: 'justify'
},
linkedTo:1,
opposite:true
},
{
title: {
style: {
color: Highcharts.getOptions().colors[10]
},
tickInterval: 1,
text: 'Fukt %',
rotation: 90,
x:10,
},
labels: {
style: {
color: Highcharts.getOptions().colors[10]
},
overflow: 'justify'
},
linkedTo:0,
opposite:true
}
],
legend: {
enabled: false,
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom',
y: 20,
borderWidth: 0
},
tooltip: {
shared: true,
},
series : [],
credits: {
enabled: false
}
}
$.getJSON("data_dht22.php", function(json) {
options.xAxis.categories = json[0]['data'];
options.series[0] = json[1];
options.series[0].yAxis = 1;
options.series[0].type = "spline",
options.series[1] = json[2];
options.series[1].type = "spline";
options.series[1].yAxis = 0;
chart = new Highcharts.Chart(options);
});
});
</script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
</head>
<body>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
<form action="comment.php" method="get">
<strong>Kommentar</strong>
<input type=text name="comment">
<br>
<input type="submit" value="Lägg till" />
</form>
</body>
</html>
Something like this https://www.dropbox.com/sh/t0t3f6lcstwq6m7/AAAtrajWgVndziwfE6REx26fa?dl=0
Anyone that have an idea about a text poping up inside the graph?