once again I apologise for my naivety. I would now like to add a suffix to my tooltip to indicate % humidity and °C for temperature. the result I derived from ppotaczek (thanks) with a few small modifications is good, but when I try to add a valueSuffix in a variety of ways, it always comes back undefined, probably due to the multiple series (I will be adding more series later that will include the symbol for pressure). I have tried adding a variable to the series and using valueSuffix but I can't get it right. I am happy with the rest of the code but would always appreciate advice.
Tooltip as it is - suffix undefined
I hope I have been clear. Many thanks in advance
...
<?php $json_data = include ('database.php');
?>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Line Graph</title>
</head>
<body>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<style type="text/css">
#container {
min-width: 310px;
max-width: 800px;
height:400px;
margin: 0 auto
}
</style>
<div id="container"></div>
<script type="text/javascript">
var data = <?= $json_data?>
var series = [{
name: "Temperature",
valueSuffix: '°C',
data: []
},
{
name: "Humidity",
valueSuffix: '%',
data: [],
yAxis: 1
}
];
//alert(series[1].appendor);// from a previous attempt
data.forEach(function(dataEl) {
series[0].data.push([
new Date(dataEl.Timestamp).getTime(),
Number(dataEl.temperature)
]);
series[1].data.push([
new Date(dataEl.Timestamp).getTime(),
Number(dataEl.humidity)
]);
});
Highcharts.chart('container', {
series: series,
yAxis: [{
title: {
text: 'Temperature'
}
},
{
title: {
text: 'Humidity'
},
opposite: true
}
],
title: {
text: 'Temperature and Humidity',
x: -20 //center
},
subtitle: {
text: 'Source: The Caravan',
x: -20
},
tooltip: {
formatter: function () {
var suff = this.series.valueSuffix, heading = this.series.name
return "<b>" + heading + "</b><br/>" + Highcharts.dateFormat('%a %d %b %H:%M.', this.x, true) + ":<br/>" + Highcharts.numberFormat(this.y, 0) + suff +" " ;
},
backgroundColor: 'rgba(0, 0, 0, .75)',
borderWidth: 2,
style: {
color: '#CCCCCC'
}
},
// fix for x-axxis from: https://stackoverflow.com/questions/7101464/how-to-get-highcharts-dates-in-the-x-axis
xAxis: {
type: 'datetime',
labels: {
formatter: function() {
return Highcharts.dateFormat('%a %d %b', this.value);
}
}
},
});
</script>
</body>
</html>
...
Here is a block of the json_data that is being read from a Mysql database - which is dynamic and changing all of the time: [{"Timestamp":"10:04 02/01/21","temperature":"5","humidity":"66"},{"Timestamp":"10:19 02/01/21","temperature":"6","humidity":"65"},{"Timestamp":"10:35 02/01/21","temperature":"6","humidity":"64"},{"Timestamp":"10:50 02/01/21","temperature":"6","humidity":"64"},{"Timestamp":"11:06 02/01/21","temperature":"6","humidity":"64"},{"Timestamp":"11:21 02/01/21","temperature":"7","humidity":"63"},{"Timestamp":"11:34 02/01/21","temperature":"10","humidity":"66"},{"Timestamp":"04:21 02/01/21","temperature":"15","humidity":"64"},{"Timestamp":"04:36 02/01/21","temperature":"16","humidity":"61"},{"Timestamp":"04:51 02/01/21","temperature":"15","humidity":"59"},{"Timestamp":"05:07 02/01/21","temperature":"15","humidity":"60"},{"Timestamp":"05:22 02/01/21","temperature":"14","humidity":"61"}]
