The following code is what I'm using as a "placeholder" for the moment as it is the closest to what I need.
It does everything I need, except, it does'nt load it's data from a JSON URL, but it just generates sine waves.
Code: Select all
let optionsForFirstChart = {
rangeSelector: {
selected: 2
},
title: {
text: 'Heart Rate / Beats per minute'
},
subtitle: {
text: 'Patient: SAL246, Mrs. Jane Watson'
},
legend: {
enabled: true
},
plotOptions: {
series: {
showInLegend: true
}
},
series: [{
pointStart: Date.UTC(2020, 1, 1),
pointInterval: 1000 * 24 * 3600,
data: Array.from({
length: 1000
}, (_, x) => Math.floor(100 * Math.sin(x / 10)))
}]
};
let optionsForSecondChart = {
rangeSelector: {
selected: 2
},
chart: {
type: 'column'
},
title: {
text: 'SpO2 - Blood Oxygen Saturation'
},
subtitle: {
text: 'Patient: SAL246, Mrs. Jane Watson'
},
legend: {
enabled: true
},
plotOptions: {
series: {
showInLegend: true
}
},
series: [{
pointStart: Date.UTC(2020, 1, 1),
pointInterval: 1000 * 24 * 3600,
data: Array.from({
length: 1000
}, (_, x) => Math.floor(100 * Math.sin(x / 3)))
}]
};
let optionsForNextChart = {
rangeSelector: {
selected: 2
},
chart: {
type: 'spline'
},
title: {
text: 'Body Temperature (°C)'
},
subtitle: {
text: 'Patient: SAL246, Mrs. Jane Watson'
},
legend: {
enabled: true
},
plotOptions: {
series: {
showInLegend: true
}
},
series: [{
pointStart: Date.UTC(2020, 1, 1),
pointInterval: 1000 * 24 * 3600,
data: Array.from({
length: 1000
}, (_, x) => Math.floor(100 * Math.sin(x / 5)))
}]
};
let optionsFornextnextChart = {
rangeSelector: {
selected: 2
},
chart: {
type: 'area'
},
title: {
text: 'ECG (Heart / electrocardiogram)'
},
subtitle: {
text: 'Patient: SAL246, Mrs. Jane Watson'
},
legend: {
enabled: true
},
plotOptions: {
series: {
showInLegend: true
}
},
series: [{
pointStart: Date.UTC(2020, 1, 1),
pointInterval: 1000 * 24 * 3600,
data: Array.from({
length: 1000
}, (_, x) => Math.floor(100 * Math.sin(x / 5)))
}]
};
let optionsForlastChart = {
rangeSelector: {
selected: 2
},
chart: {
type: 'bar'
},
title: {
text: 'Sleep Stages'
},
subtitle: {
text: 'Patient: SAL246, Mrs. Jane Watson'
},
legend: {
enabled: true
},
plotOptions: {
series: {
showInLegend: true
}
},
series: [{
pointStart: Date.UTC(2020, 1, 1),
pointInterval: 1000 * 24 * 3600,
data: Array.from({
length: 1000
}, (_, x) => Math.floor(100 * Math.sin(x / 5)))
}]
};
let charts = [
Highcharts.stockChart('container', optionsForFirstChart),
Highcharts.stockChart('container2', optionsForSecondChart),
Highcharts.stockChart('container3', optionsForNextChart),
Highcharts.stockChart('container4', optionsFornextnextChart),
Highcharts.stockChart('container5', optionsForlastChart)
]
charts.forEach(chart => {
chart.xAxis[0].update({
events: {
afterSetExtremes: function (event) {
charts.forEach(otherChart => {
if (otherChart.xAxis[0].min != event.min || otherChart.xAxis[0].max != event.max) {
otherChart.xAxis[0].setExtremes(event.min, event.max)
}
})
}
}
})
});
If someone could modify this code so that each chart loads it's data from it's own JSON URL (a different JSON URL for each chart),
with the "start" and "end" options passed to the JSON server so the server can give a small subset of the many millions of points of data it has for the chart in question. So it has to be loaded "lazy", just like how the data is loaded in the "1.7 million points candelstick demo", except i'm just using x/y value pairs for lines and splines, not candlesticks...
If someone could do this, my charts part of my application will be done and I can move on to hopefully finish it in time...
Thanks for your time,
Terrence
