Apologies for my lack of experience once again. I am now looking to enhance my tooltip by adding a suffix to indicate % humidity and °C for temperature. While the code derived from ppotaczek with some tweaks is working well, I've been struggling to add a valueSuffix due to multiple series (I plan to include more series later that will involve pressure symbols). I have attempted various ways to add a valueSuffix but it keeps returning undefined. I've tried using a variable in the series and valueSuffix but haven't managed to get it right. Any advice on this issue would be greatly appreciated.
Tooltip as it stands - suffix undefined
I hope my request is clear. Thank you 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>
...
Below is an excerpt of the json_data fetched from a dynamic MySQL database: [{"Timestamp":"10:04 02/01/21","temperature":"5","humidity":"66"},{"Timestamp":"10:19 02/01/21","temperature":"6","humidity":"65"},...]