radiance32
Posts: 18
Joined: Thu Apr 08, 2021 4:10 am

multiple charts on one page with shared x-axis view/range selection/zoom

Hi,

I would like to have multiple charts (highcharts-stock) on one webpage,
not different sets of data in one chart,
but many (between 3 and 7 depending on the page) different, individual charts,
the next one below the previous one.

All these charts should behave independently, load their own data from their own data source,
however, what all the charts share is the x-axis (the date/time given as timestamps).

Is it possible to, if the user changes the view of one of the charts by sliding or resizing the rangeselector,
or selecting a part of the chart, to have all the charts on the page duplicate this change ? (eg, so the x-axis / view of the data on all the charts is always identical and data can be compared among the differnt charts as they are all looking at the same x-axis points).


One other issue though is that i haven't managed to put more than one chart on a page.
if i add another "container2" object, with a 2nd script somewhere below the first chart's script,
nothing works and both charts are invisible...

So, to cut things short, how do i put multiple individual charts on one page,
with each chart having it's own data-source and settings (title, subtitlle, spline or line etc.., colour etc...),
and, having the x axis view always be identical for all charts when zooming in / out and moving the view using the range-selector.

I hope I explained everything in away that makes sense,
otherwise please ask me...

I'm a proficient C/C++ developer with moderate PHP/MySQL experience,
but, I know hardly anything about javascript,
so if you answer, could you answer with code snippets/examples, instead of using terms that only make sense to javascript developers...

If i can get something like what i described above working properly,
I am getting close to my final objective and would be going ahead and purchasing a commercial license for highcharts-stock...

BTW, If i buy a license, is there a support ticketing system of some kind or will I have to rely on this forum for my user support ?

Thanks,
Terrence Vergauwen
pawelys
Posts: 962
Joined: Wed Sep 02, 2020 10:37 am

Re: multiple charts on one page with shared x-axis view/range selection/zoom

Hello Terrence, thanks for contacting us with your question!
Check this demo, where I put multiple charts on the page, and then I added the callback function to the event, that changes the xAxis extremes of other charts: https://jsfiddle.net/BlackLabel/pfqv5e6s/
Here are some API references, that describes functions/methods that I used:

https://api.highcharts.com/class-refere ... etExtremes
https://api.highcharts.com/highcharts/x ... etExtremes

I used the same configuration for all of the charts, but you can change it how you like :).

Regarding the question about the licence, we have several support channels, including this forum, Stack Overflow, freshdesk, github, slack and skype. Some are public (forum, SO, github) others are private, and others are only available for users with premium license.

The closest one to what you described is freshdesk, which you can reach via email: [email protected].
you can read more about our licences and support forms here:
https://shop.highsoft.com/developer-license
https://www.highcharts.com/blog/support/

Hope this answers your questions well, in case of any further questions feel free to contact us again! Kind regards
Paweł Lysy
Highcharts Developer
radiance32
Posts: 18
Joined: Thu Apr 08, 2021 4:10 am

Re: multiple charts on one page with shared x-axis view/range selection/zoom

pawelys wrote: Wed Apr 14, 2021 10:51 am Hello Terrence, thanks for contacting us with your question!
Check this demo, where I put multiple charts on the page, and then I added the callback function to the event, that changes the xAxis extremes of other charts: https://jsfiddle.net/BlackLabel/pfqv5e6s/
Here are some API references, that describes functions/methods that I used:

https://api.highcharts.com/class-refere ... etExtremes
https://api.highcharts.com/highcharts/x ... etExtremes

I used the same configuration for all of the charts, but you can change it how you like :).

Regarding the question about the licence, we have several support channels, including this forum, Stack Overflow, freshdesk, github, slack and skype. Some are public (forum, SO, github) others are private, and others are only available for users with premium license.

The closest one to what you described is freshdesk, which you can reach via email: [email protected].
you can read more about our licences and support forms here:
https://shop.highsoft.com/developer-license
https://www.highcharts.com/blog/support/

Hope this answers your questions well, in case of any further questions feel free to contact us again! Kind regards
Hi,

I tried to write a reply with some code snippets in bbcode code blocks and I got a "you are blocked" from this site page.
Seems I can't write my reply...

Terrence
radiance32
Posts: 18
Joined: Thu Apr 08, 2021 4:10 am

Re: multiple charts on one page with shared x-axis view/range selection/zoom

pawelys wrote: Wed Apr 14, 2021 10:51 am Hello Terrence, thanks for contacting us with your question!
Check this demo, where I put multiple charts on the page, and then I added the callback function to the event, that changes the xAxis extremes of other charts: https://jsfiddle.net/BlackLabel/pfqv5e6s/
Here are some API references, that describes functions/methods that I used:

https://api.highcharts.com/class-refere ... etExtremes
https://api.highcharts.com/highcharts/x ... etExtremes

I used the same configuration for all of the charts, but you can change it how you like :).

Regarding the question about the licence, we have several support channels, including this forum, Stack Overflow, freshdesk, github, slack and skype. Some are public (forum, SO, github) others are private, and others are only available for users with premium license.

The closest one to what you described is freshdesk, which you can reach via email: [email protected].
you can read more about our licences and support forms here:
https://shop.highsoft.com/developer-license
https://www.highcharts.com/blog/support/

Hope this answers your questions well, in case of any further questions feel free to contact us again! Kind regards
Hi Pawelys,

Thanks very much for your reply,
I tried it and it does what I would like it to do (produce multiple charts with the range selection working on all charts in parallel.
But, I am illiterate in javascript (I'm a C/C++ and php/mylsq programmer),
so how do I put this example and my previously working one-chart (with my own working json datasource i coded yesterday together ?

Eg, I need to have 5 charts, which each have their own json datasource, and load, on demand data, just like the 1.7million point candelstick demo that I based my chart on.

Eg, how do I make this my previously working json chart, with this javascript code:

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));

Do the same but 5 times, eg I need 5 of those on one page, each with their own different json datasource,
although the date values supplied will be identical, so the data on each of the 5 charts' x-axis will be the same,
just the y axis values served will be different, because each chart uses it's own json data source...

This is the code you gave me, but I wouldn't have a clue how to start modifying it so it works as I would like it to work,
all the 5 charts have the same names etc... they don't have json datasources, and it's all Chinese to me...
I wonder how to set all the individual options for the different charts etc...

Here's the javascript code from your multiple chart example:

Code: Select all


let options = (interval) => ({
  rangeSelector: {
	selected: 4
  },

  title: {
	text: 'AAPL Stock Price'
  },

  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 / interval)))
  }]
});


let charts = [
	Highcharts.stockChart('container', options(10)),
  Highcharts.stockChart('container2', options(20)),
  Highcharts.stockChart('container3', options(30)),
  Highcharts.stockChart('container4', options(40)),
  Highcharts.stockChart('container5', options(5))
]

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 mix these 2 scripts together in an easy to understand, customizable multi-chart with json data loading and customization of every chart in the same way i could customize the one chart script I created before, it would be a real, REAL big help, and my application will be nearly finished...

Thank you,
Terrence
radiance32
Posts: 18
Joined: Thu Apr 08, 2021 4:10 am

Re: multiple charts on one page with shared x-axis view/range selection/zoom

seems like after removing the script tags from the code blocks solved the "you are blocked from highcharts.com" message...
pawelys
Posts: 962
Joined: Wed Sep 02, 2020 10:37 am

Re: multiple charts on one page with shared x-axis view/range selection/zoom

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,
Paweł Lysy
Highcharts Developer
radiance32
Posts: 18
Joined: Thu Apr 08, 2021 4:10 am

Re: multiple charts on one page with shared x-axis view/range selection/zoom

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
pawelys
Posts: 962
Joined: Wed Sep 02, 2020 10:37 am

Re: multiple charts on one page with shared x-axis view/range selection/zoom

hi! No problem, since you are asking for rather basic things, it doesn't take a lot of time. Here is the example: https://jsfiddle.net/BlackLabel/685rxe0v/

You just need to pass the object with chart configuration as the second argument to the Highcharts constructor. Let me know if you need any more help! Kind regards,
Paweł Lysy
Highcharts Developer
radiance32
Posts: 18
Joined: Thu Apr 08, 2021 4:10 am

Re: multiple charts on one page with shared x-axis view/range selection/zoom

pawelys wrote: Mon Apr 19, 2021 7:13 am hi! No problem, since you are asking for rather basic things, it doesn't take a lot of time. Here is the example: https://jsfiddle.net/BlackLabel/685rxe0v/

You just need to pass the object with chart configuration as the second argument to the Highcharts constructor. Let me know if you need any more help! Kind regards,
Hi,

Great! :) we're half way done :)
Now I can configure each chart individualy (title, etc...) yay! progress :)

I've been trying to modify this to get the JSON data hooked up but I can't make it work... :(

Would you mind doing me one more favour ? (this should be the last one)
Could you modify this javascript example you created your last post, so that the data that is shown in the 5 charts, instead of being generated from a sine function in the javascript,
is "lazy" loaded on an as needed basis from a JSON source ? Exactly like the "1.7 million points candlestick" demo, but i', just using line or spline type instead with 2 values eg timestamp for x-axis and the value for the y-axis.
so the charts only load the timestamps for the x axis by requesting the "start" and "end" variables to the JSON URL GET request ?
Each chart should have it's own JSON URL though, as obviously, they all should show their own data not all the same :)

So, when loading the page, all the charts load their data from the JSON URLs they have,
and when the user changes the view on one of the charts by selecting a range, zooming, or moving/scaling the range selector,
they all update in unison to show the same data on the x-axis, and they all get their data from JSON urls...

Would you mind doing this please ?
I tried to put the function "afterSetExtremes" and a few other things from the "1.7 million points candlestick" demo javascript code into your latest example,
but I can't get it to work...

I'm terribly sorry about asking so much, I know it's bad forum etiquete, but i'm really stuch with this and I'm NEARLY there ;) just this last part (hooking all charts up to my JSON server) and i will be done :)

I hope you can help me,
Yours,
Terrence
radiance32
Posts: 18
Joined: Thu Apr 08, 2021 4:10 am

Re: multiple charts on one page with shared x-axis view/range selection/zoom

pawelys wrote: Mon Apr 19, 2021 7:13 am hi! No problem, since you are asking for rather basic things, it doesn't take a lot of time. Here is the example: https://jsfiddle.net/BlackLabel/685rxe0v/

You just need to pass the object with chart configuration as the second argument to the Highcharts constructor. Let me know if you need any more help! Kind regards,
I took a stab at it myself, trying to add the json data loading to the last example you gave me, and "merging" it with the code from the 1.7 million points demo...
but it does'nt work properly, it only loads the data once (when you load the page), but it does'nt load anything when you change the sliders,
which behave strange, sometimes they cling to your mouse and keep moving, sometimes they go completely haywire and keep moving until chrome locks up... I can't continue, i've hit a wall now... I've no clue how to fix this...

here's my code i made:

Code: Select all


const dataURL = 'https://demo-live-data.highcharts.com/aapl-historical.json';

/**
 * 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]]);


		
let optionsForFirstChart = {
	rangeSelector: {
		selected: 2
	},

	navigator: {
		adaptToUpdatedData: false,
		series: {
		data: data
		}
	},
	
	title: {
		text: 'stock value 1'
	},

	subtitle: {
		text: 'test'
	},

	legend: {
		enabled: true
	},

	plotOptions: {
		series: {
			showInLegend: true
		}
	},

	xAxis: {
		minRange: 3600 * 1000 // one hour
	},
	
	series: [{
		data: data,
		dataGrouping: {
			enabled: false
		}
	}]
};

let optionsForSecondChart = {
	rangeSelector: {
		selected: 2
	},
	
	navigator: {
		adaptToUpdatedData: false,
		series: {
		data: data
		}
	},
	
	chart: {
		type: 'column'
	},
	title: {
		text: 'stock value 2'
	},

	subtitle: {
		text: 'test'
	},
	
	legend: {
		enabled: true
	},

	plotOptions: {
		series: {
			showInLegend: true
		}
	},

	xAxis: {
		minRange: 3600 * 1000 // one hour
	},
	
	series: [{
		data: data,
		dataGrouping: {
			enabled: false
		}
	}]
};

let optionsForNextChart = {
	rangeSelector: {
		selected: 2
	},
	
	navigator: {
		adaptToUpdatedData: false,
		series: {
		data: data
		}
	},
	
	chart: {
		type: 'spline'
	},

	navigator: {
		adaptToUpdatedData: false,
		series: {
		data: data
		}
	},
	
	title: {
		text: 'stock value 3'
	},

	subtitle: {
		text: 'test'
	},
	
	legend: {
		enabled: true
	},

	plotOptions: {
		series: {
			showInLegend: true
		}
	},

	xAxis: {
		minRange: 3600 * 1000 // one hour
	},
	
	series: [{
		data: data,
		dataGrouping: {
			enabled: false
		}
	}]
};

let optionsFornextnextChart = {
	rangeSelector: {
		selected: 2
	},
	
	navigator: {
		adaptToUpdatedData: false,
		series: {
		data: data
		}
	},
	
	chart: {
		type: 'area'
	},

	navigator: {
		adaptToUpdatedData: false,
		series: {
		data: data
		}
	},
	
	title: {
		text: 'stock value 4'
	},

	subtitle: {
		text: 'test'
	},
	
	legend: {
		enabled: true
	},

	plotOptions: {
		series: {
			showInLegend: true
		}
	},

	xAxis: {
		minRange: 3600 * 1000 // one hour
	},
	
	series: [{
		data: data,
		dataGrouping: {
			enabled: false
		}
	}]
};


let optionsForlastChart = {
	rangeSelector: {
		selected: 2
	},
	
	navigator: {
		adaptToUpdatedData: false,
		series: {
		data: data
		}
	},
	
	chart: {
		type: 'bar'
	},

	navigator: {
		adaptToUpdatedData: false,
		series: {
		data: data
		}
	},
	
	title: {
		text: stock value 5'
	},
	
	subtitle: {
		text: 'test'
	},
	
	legend: {
		enabled: true
	},

	plotOptions: {
		series: {
			showInLegend: true
		}
	},

	xAxis: {
		minRange: 3600 * 1000 // one hour
	},
	
	series: [{
		data: data,
		dataGrouping: {
			enabled: false
		}
	}]
};


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)
						afterSetExtremes(otherChart.xAxis[0]) // ??? load the new json data from event.min and event.max ??? does'nt seem to work though... :(
					}
				})
				
			}
		}
	})
});

}).catch(error => console.error(error.message));

To finish my application, all I need at this time would be:

* Debug and cleanup the code i made (or write new code, whatever suits you best, i'm sure my code is full of errors and unnecessary things), so the charts all load their data lazy from the JSON URL, whenever the view is changed on one of the charts, so they all in unison load the same x-axis segment from the JSON URL, for which i'm using the example 1.7 million points JSON URL from the demos.

* Once everything works as it should, modify the code so that I can have a different JSON URL for each chart, as they, off course, need to display different y-values for the same x-axis range that is shown... It would be handy if it's written in such a way that i can easily add more charts than 5, with additional JSON URLS...


If you or someone else could do this, I should be done with my application! :)

I hope you can help me out :)

Terrence
pawelys
Posts: 962
Joined: Wed Sep 02, 2020 10:37 am

Re: multiple charts on one page with shared x-axis view/range selection/zoom

Hi! Here is the example, where I replaced the Array.from function to simple array instance: https://jsfiddle.net/BlackLabel/e8s2q7y6/

Regarding the rest of your message, please ask specific questions, because I don't really understand what is the issue here. And please, provide some simple demo, where you try to achieve something, and something doesn't work.

Kind regards,
Paweł Lysy
Highcharts Developer
radiance32
Posts: 18
Joined: Thu Apr 08, 2021 4:10 am

Re: multiple charts on one page with shared x-axis view/range selection/zoom

pawelys wrote: Tue Apr 20, 2021 7:53 am Hi! Here is the example, where I replaced the Array.from function to simple array instance: https://jsfiddle.net/BlackLabel/e8s2q7y6/

Regarding the rest of your message, please ask specific questions, because I don't really understand what is the issue here. And please, provide some simple demo, where you try to achieve something, and something doesn't work.

Kind regards,
Hi Pawelys,

First of all, thanks for replying to my post, I appreciate it very, very much! :)
Your example is going into the right way,
but, please excuse me, but my english is rather incoherent sometimes...
I'll try to explain things in a more simple way, so hopefully you'll understand...

If you could take your latest javascript code, the one you posted in the post above this one,
where you changed the sine waves to arrays,
and modify it so each chart loads it's data from a json URL (not all from the same json URL, but from different JSON URLs, each specific for each chart).
These different JSON urls all take the same variables for "start" and "end", and have the same x values, just the y values are different for each chart.
It should work exactly like how the "1.7 million points candelstick" demo code works, with the lazy loading of data from the JSON URLs of the charts,
whenever the view of the chart is changed, but, with the functionality you added in this topic, eg so that when you change the view of one chart, all the other charts change their view to the same view too...

Does that explain things ?

If you could modify your latest example to add the JSON lazy loading functionality as described above to it, all will be done and my charts should be finished ! :)
Because you don't have these 5 different JSON URLs, just use the same JSON URL used in the "1.7 million points candlestick demo" code for all charts (but as 5 individual sources, so i can change the 5 sources to my 5 JSON URLs...

That's all I need to get things done...

I really hope you have the time to make this last change, as my attempt ended in a messy tragedy... :(

Thank you very much,
Terrence
pawelys
Posts: 962
Joined: Wed Sep 02, 2020 10:37 am

Re: multiple charts on one page with shared x-axis view/range selection/zoom

hi! Here is demo: https://jsfiddle.net/BlackLabel/k8azegtq/

In case of any further questions feel free to contact us again! Kind regards
Paweł Lysy
Highcharts Developer
radiance32
Posts: 18
Joined: Thu Apr 08, 2021 4:10 am

Re: multiple charts on one page with shared x-axis view/range selection/zoom

pawelys wrote: Fri Apr 23, 2021 7:07 am hi! Here is demo: https://jsfiddle.net/BlackLabel/k8azegtq/

In case of any further questions feel free to contact us again! Kind regards
wow!, this looks exactly like what I need :)

I'm away for the weekend, but i'll try it out monday morning at the office :)
But I think I can take it from here on :)

Thanks you very, very much! :)

Terrence
pawelys
Posts: 962
Joined: Wed Sep 02, 2020 10:37 am

Re: multiple charts on one page with shared x-axis view/range selection/zoom

You're welcome! Feel free to contact us again!
Paweł Lysy
Highcharts Developer

Return to “Highcharts Stock”