I'm trying to do this type of chart, I modified and combined both examples. Here is the result in jsfiddle: http://jsfiddle.net/cp0ux9qp/4/
$(function () {
$(document).ready(function () {
Highcharts.setOptions({
global: {
useUTC: false
}
});
$('#container').highcharts({
chart: {
zoomType: 'xy',
type: 'spline',
animation: Highcharts.svg, // don't animate in old IE
marginRight: 10,
events: {
load: function () {
// set up the updating of the chart each second
var serie1 = this.series[0];
var serie2 = this.series[1];
setInterval(function () {
var x = (new Date()).getTime(), // current time
y = Math.floor((Math.random() * 10) + 5),
z = Math.floor((Math.random() * 20) + 15);
serie1.addPoint([x, y], true, true);
serie2.addPoint([x, z], true, true);
}, 1000);
}
}
},
title: {
text: 'Oxygen and Temperature'
},
xAxis: {
type: 'datetime',
tickPixelInterval: 150
},
yAxis: [{ // Primary yAxis
labels: {
format: '{value}mg/L',
style: {
color: Highcharts.getOptions().colors[0]
}
},
title: {
text: 'Oxygen',
style: {
color: Highcharts.getOptions().colors[0]
}
}
}, { // Secondary yAxis
title: {
text: 'Temperature',
style: {
color: Highcharts.getOptions().colors[1]
}
},
labels: {
format: '{value}C',
style: {
color: Highcharts.getOptions().colors[1]
}
},
opposite: true
}],
tooltip: {
shared: true
},
legend: {
enabled: false
},
exporting: {
enabled: false
},
series: [{
name: 'Oxygen',
data: (function () {
// generate an array of random data
var data = [],
time = (new Date()).getTime(),
i;
for (i = -19; i <= 0; i += 1) {
data.push({
x: time + i * 1000,
y: Math.floor((Math.random() * 10) + 5)
});
}
return data;
}())
},
{
name: 'Temperature',
data: (function () {
// generate an array of random data
var data = [],
time = (new Date()).getTime(),
i;
for (i = -19; i <= 0; i += 1) {
data.push({
x: time + i * 1000,
y: Math.floor((Math.random() * 20) + 15)
});
}
return data;
}()),
yAxis:1
}
]
});
});
});
It doesn't show secondary Y axi, Why? Another problem occurs when data are the same for a range of time, for example: oxygen: 6.74 temperature: 16.7 The X axis scale is modified and graph just show one line.
The issue with the hidden secondary axis is because with your min-width declaration in the container style property + your chart.marginRight: 20
you draw the axis off div. If you comment out your margin you see the secondary axis.
As for when you have the same scaled temp/oxygen content - how should it behave?
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.