pawelys wrote: ↑Thu Apr 15, 2021 11:06 am
Hi! AftersetExtremes function is firing after each changing of the extremes of the axis and is not related to the initial configuration of the chart. I made the function that creates the chart configuration, to keep the code as short as possible, in order to emphasize the tricky part, which is synchronizing the extremes. I also put all of the chart objects into the array, in order to make the looping over them easier.
If all of the charts should have completely different options, just insert them into the array:
https://jsfiddle.net/BlackLabel/pfqv5e6s/
let me know, if that works for you! In case of any further questions feel free to contact us again! Kind regards,
Hi,
I really have no clue how to do anything ...
For example:
Code: Select all
title: {
text: 'AAPL Stock Price'
},
How would I change this so each of the 6 "container"s on the page have their own different title than AAPL Stock Price for example ?
And that's just one of the many things, there's all the other options that I need to change per container aka "chart".
The problem is that I don't know any javascript at all, and I've no clue about all the specific highcharts objects/variables/functions etc...
All I can do is modify / stitch together the examples with failure being the common result.
Could you please do the following,
modify your 6 container example code,
in such a way that I can modify all the variables for each container individually,
and, have each container get it's data from the JSON 1.7 million record server (but with their own different URLs, as they should not all display the same data, they will each connect to their own unique JSON data source URL.
Basically, each chart will have to behave like the 1.7million record JSON demo with this function:
Code: Select all
const dataURL = 'https://www.xxxxxxxxx.co.nz/modcon.php';
/**
* Load new data depending on the selected min and max
*/
function afterSetExtremes(e) {
const { chart } = e.target;
chart.showLoading('Loading data from server...');
fetch(`${dataURL}?start=${Math.round(e.min)}&end=${Math.round(e.max)}`)
.then(res => res.ok && res.json())
.then(data => {
chart.series[0].setData(data);
chart.hideLoading();
}).catch(error => console.error(error.message));
}
fetch(dataURL)
.then(res => res.ok && res.json())
.then(data => {
// Add a null value for the end date
data = [].concat(data, [[Date.UTC(2011, 9, 14, 19, 59), null, null, null, null]]);
// create the chart
Highcharts.stockChart('container', {
chart: {
type: 'line',
zoomType: 'x'
},
navigator: {
adaptToUpdatedData: false,
series: {
data: data
}
},
scrollbar: {
liveRedraw: false
},
title: {
text: 'BPM (Heart Beats Per Minute)'
},
subtitle: {
text: 'Patient: SAL246, Mrs. Jane Watson'
},
rangeSelector: {
buttons: [{
type: 'hour',
count: 1,
text: '1h'
}, {
type: 'day',
count: 1,
text: '1d'
}, {
type: 'month',
count: 1,
text: '1m'
}, {
type: 'year',
count: 1,
text: '1y'
}, {
type: 'all',
text: 'All'
}],
inputEnabled: false, // it supports only days
selected: 4 // all
},
xAxis: {
events: {
afterSetExtremes: afterSetExtremes
},
minRange: 3600 * 1000 // one hour
},
yAxis: {
floor: 0
},
series: [{
data: data,
dataGrouping: {
enabled: false
}
}]
});
}).catch(error => console.error(error.message));
Basically I need the code just above, but have 5 charts on my page, with their own individual configuration (like above),
and, they each have their own different "const dataURL".
And, have the functionality from your example, so that when the user changes the view by scrolling the range selector, zooming in/out etc on one chart, the other 4 charts will follow and also update their view, so the view of the x axis is always identical for all the charts, eg the user can compare the data by looking at the 5 charts...
If you could do this, that's the end of my issues, and my highcharts-stock application will be done (for the graph / data visualization pages part),
that's all I need to finish
And I'm gonna buy a commercial license for highcharts if I can get it all to work...
Sorry to have to ask you this in this manner, I understand it's not proper forum behaviour/etiquette asking people to do so much / write code for them, but I'm working alone on this major project, doing everything a team normally does (installing Linux, load-balanced www servers with apache, mod-PHP, MySQL with master/slave replication, designing the relational database, writing the PHP website, developing a new data transfer protocol and writing a server daemon and client SDK for it in C++, etc...), so I would really appreciate if you could help me with this... My "Achilles heel" with this whole project is javascript, I've never programmed in it and everything I try just ends up not working...
Thank you,
Terrence