I managed to create the graph I want but I have some troubles to get the min and max values for the y-axis to work.
I tried to make my primary (left) y-axis go from 15 to 50 and the secundary y-axis from 0 to 100.
Unfortunately the result is 0 to 75 and 0 to 120
The code I use to replicate this issue:
Code: Select all
<script type="text/javascript">
eval('var time = [1537639969000,1537640271000,1537640573000,1537640874000,1537641176000,1537641478000,1537641780000,1537642081000,1537642383000,1537642685000,1537642987000,1537643289000,1537643590000,1537643892000,1537644194000,1537644496000,1537644797000,1537645099000,1537645401000,1537645703000,1537646004000,1537646306000,1537646608000,1537646910000,1537647212000]');
eval('var TemperatureVal1 = [22.87,22.62,22.37,22.12,22,21.87,21.62,21.37,21.25,21.25,21.25,21.37,21.5,21.5,21.62,21.62,21.75,21.75,21.75,21.87,21.87,22,22,22,22.12]');
eval('var TemperatureVal2 = [29,29,29,29,29,29,28.87,28.87,28.87,28.87,28.87,28.87,28.87,29,29,29,29,29,29,29,29,29.12,29.12,29.12,29.12]');
eval('var TemperatureVal3 = [36.95,37.11,37.15,37.22,37.22,37.22,37.22,37.19,37.13,37.09,37.05,37.13,37.17,37.19,37.19,37.19,37.18,37.23,37.25,37.24,37.26,37.28,37.32,37.31,37.35]');
eval('var HumidityVal = [36.67,36.4,36.3,36.31,36.3,36.24,36.24,36.27,36.29,36.22,36.29,36.44,36.41,36.45,36.37,36.34,36.34,36.31,36.31,36.27,36.27,36.31,36.31,36.24,36.25]');
</script>
<html>
<HEAD>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="http://code.highcharts.com/highcharts.js"></script>
<script type="text/javascript" src="http://code.highcharts.com/themes/grid.js"></script>
<script type="text/javascript" src="http://code.highcharts.com/modules/exporting.js"></script>
<script type="text/javascript">
function comArr(unitsArray)
{
var outarr = [];
for (var i = 0; i < time.length; i++) {
outarr[i] = [time[i], unitsArray[i]];
}
return outarr;
}
$(function () {
var chart;
$(document).ready(function()
{
var highchartsOptions = Highcharts.setOptions(Highcharts.theme);
Highcharts.setOptions({
lang: {
decimalPoint: '.'
}
});
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
zoomType: 'x',
type: 'spline',
marginBottom: 60,
plotBorderColor: '#346691',
plotBorderWidth: 1,
events:
{
load: function () {
var series1 = this.series[0];
var series2 = this.series[1];
setInterval(function ()
{
time.push(Math.max.apply(null,time) + 15000);
TemperatureVal.push(30);
HumidityVal.push(70);
//series1.addPoint([Math.max.apply(null,time), 30], true, true);
//series2.addPoint([Math.max.apply(null,time), 70], true, true);
document.getElementById("demo").innerHTML = Math.max.apply(null,time);
}, 1000);
}
}
},
title: {
text: 'Temperaturen van de afgelopen 24 uur',
x: -20
},
subtitle: {
text: 'Varanus auffenbergi terrarium',
x: -20
},
credits: {
text: '© Reptile-addict.nl',
href: ''
},
xAxis: {
type: 'datetime',
startOnTick: false,
},
yAxis: [{ // 1st yAxis (Nr 0)
gridLineWidth: 0,
min: 15,
max: 50,
labels: {
formatter: function() {
return this.value +'°C';
},
style: {
color: '#FF0000'
}
},
title: {
text: 'Temperature',
style: {
color: '#FF0000'
}
},
}, { // 2nd yaxis (Nr 1)
gridLineWidth: 0,
min: 0,
max: 100,
title: {
text: 'Humidity',
style: {
color: '#3399FF'
}
},
labels: {
formatter: function() {
return this.value +' %';
},
style: {
color: '#3399FF'
}
},
opposite: true
}],
tooltip: {
crosshairs:[true],
borderColor: '#4b85b7',
shared: true,
//backgroundColor: '#edf1c8',
formatter: function() {
var s = '<b>'+ Highcharts.dateFormat('%e %B @ %H:%M:%S', this.x) +'</b>';
$.each(this.points, function(i, point) {
var unit = {
'Kamertemperatuur': ' °C',
'Bodemtemperatuur': ' °C',
'Boven temperatuur': ' °C',
'Luchtvochtigheid': ' %'
}[this.point.series.name];
s = s + '<br>' + '<span style="color:'+ point.series.color +'">' + point.series.name + '</span> : '+ Highcharts.numberFormat(point.y,1,"."," ") + unit;
});
return s;
},
},
plotOptions: {
series: {
marker: {
enabled: false
},
animation: {
duration: 0
}
}
},
series: [
{
name: 'Kamertemperatuur',
min:15,
max:50,
zIndex: 1,
yAxis: 0,
color: '#ff0000',
lineWidth: 3,
type: 'spline',
data: comArr(TemperatureVal1)
},
{
name: 'Bodemtemperatuur',
min:15,
max:50,
zIndex: 1,
yAxis: 0,
color: '#ff33cc',
lineWidth: 3,
type: 'spline',
data: comArr(TemperatureVal2)
},
{
name: 'Boven temperatuur',
min:15,
max:50,
zIndex: 1,
yAxis: 0,
color: '#cc6600',
lineWidth: 3,
type: 'spline',
data: comArr(TemperatureVal3)
},
{
name: 'Luchtvochtigheid',
min:0,
max:100,
color: '#3399FF',
yAxis: 1,
type: 'spline',
data: comArr(HumidityVal)
}
]
});
});
});
</script>
</head>
<body>
<div id="container" style="width: 1000px; height: 300px; margin: 0 auto"></div>
<p id="demo"></p>
</body>
</html>