NeBox
Posts: 41
Joined: Sun Feb 05, 2023 4:12 am

Add dynamically series and indicators from localstorage

Hi.

I can't figure out how to make me add an indicator.

I automatically save the series data to localstorage so that I can load it again after reloading the page.

Code: Select all

[
	{
		"id": "EURUSD_price",
		"type": "candlestick",
		"name": "Price",
		"data": {},
		"_colorIndex": 0
	},
	{
		"id": "EURUSD_volume",
		"type": "column",
		"name": "Volume",
		"data": {},
		"yAxis": 1,
		"_colorIndex": 1
	},
	{
		"linkedTo": "EURUSD_price",
		"type": "disparityindex",
		"id": "highcharts-rd73r21-766",
		"params": {
			"index": 3,
			"period": 14,
			"average": "sma"
		},
		"yAxis": "highcharts-rd73r21-767",
		"_colorIndex": 2,
		"_symbolIndex": 0,
		"data": {}
	}
]
I load the basic data.

Code: Select all

let ohlc = [],
							volume = [],
							chart_counter = 0;

						for (chart_counter; chart_counter < dataLength; chart_counter += 1)
						{
							let dd = new Date(data[chart_counter]['time']);

							ohlc.push([
								dd.getTime(),
								data[chart_counter]['open'],
								data[chart_counter]['high'],
								data[chart_counter]['low'],
								data[chart_counter]['close']
							]);

							volume.push([
								dd.getTime(),
								data[chart_counter]['volume']
							]);
						}
						
						chart_obj.addSeries({id: tick_selected+'_price', type: 'candlestick', name: 'Price', data: ohlc});
						chart_obj.addSeries({id: tick_selected+'_volume', type: 'column', name: 'Volume', data: volume, yAxis: 1});
But I can not add an indicator.
UserOptions contains data from localstorage

Code: Select all

userOptions.series.forEach((element, index) =>
								{
									if (element.linkedTo)
									{
										if (element.yAxis)
										{
											chart_obj.addAxis({
												id: element.yAxis,
												lineWidth: 2,
												lineColor: '#08F',
												opposite: true
											});
										}

										chart_obj.addSeries({
											type: element.type,
											linkedTo: ''+element.linkedTo+'',
											yAxis: element.yAxis
										});
									}
								});
There can be several indicators and different ones.
Help me understand how to do this.
Thanks!
NeBox
Posts: 41
Joined: Sun Feb 05, 2023 4:12 am

Re: Add dynamically series and indicators from localstorage

Image

As a result, my height indicator is on a different indicator. The thing is that you have to set the height and position manually there.

But, when you add an indicator from the menu of indicators, it is added normally. Example

Image

How does adding yAxis automatically recalculate the height?

I tried different methods from the API, read the forum - but nowhere found information on how to do it.
kamil.k
Posts: 458
Joined: Thu Oct 06, 2022 12:49 pm

Re: Add dynamically series and indicators from localstorage

Hello NeBox,

Thanks for contacting us again!

An indicator is a series that needs to be added as a normal series and the way you did by using the addSeries method on a chart instance. The important factor is to properly define the linkedTo property with refers to the other series id property (the one you want to apply an indicator). Please, take a look at this demo for better visualization: https://jsfiddle.net/BlackLabel/3fg041m8/.

If the above way doesn't work for you, would be much more helpful if you reproduce your case in an online editor as now I can't debug your code directly. You can start here: https://jsfiddle.net/BlackLabel/zyxbna2q and send me a forked link.

Looking forward to your response,
Kind Regards!
Kamil Kubik
Highcharts Developer
NeBox
Posts: 41
Joined: Sun Feb 05, 2023 4:12 am

Re: Add dynamically series and indicators from localstorage

Thank you for reply.

Exactly, only addSeries is enough. Thank you.

The issue here is that I don't know the height of the series and its position.

If we add an indicator, it is added at the very bottom.
If I manually add an indicator, it appears HIGHER than the volume.
However, indicators added from the "Indicators window" are added correctly, below volume and at a small height.

There is also an error with deleting an indicator series.

Example here https://jsfiddle.net/NeBox/s8rt13nL/10/

If I add an indicator manually, then I cannot remove it from All indicators on the Edit tab.
kamil.k
Posts: 458
Joined: Thu Oct 06, 2022 12:49 pm

Re: Add dynamically series and indicators from localstorage

Thanks for the clarification, I've prepared a new example of recreation of built-in indicator adding, take a look: https://jsfiddle.net/BlackLabel/qtwyjxph/.

Looking at this example, you need to adjust the proper heights and positions of the other series when adding a new one (an indicator). Also, adding a new indicator (the ao type) creates a new y-axis with this indicator assigned to it.

Let me know if that works for you,
Kind Regards!
Kamil Kubik
Highcharts Developer
NeBox
Posts: 41
Joined: Sun Feb 05, 2023 4:12 am

Re: Add dynamically series and indicators from localstorage

Thank you for reply.

If I need to add more than 1 indicator?
Will I need to calculate the height of all of them?
Is there no method that will automatically add an indicator without manually recalculating the height?

Indicators like ao add a new axis - how do I know which ones add a new axis and which don't?
User avatar
dawid.d
Posts: 807
Joined: Thu Oct 06, 2022 11:31 am

Re: Add dynamically series and indicators from localstorage

Hi,

Indicators are series that add up on the same axis by default. You can set them on a different axis (x or y) as was done in the demos. The series itself has no height or position, it's just a set of data. However, you can adjust the position and size of the axes, as well as their extremes.

See: https://api.highcharts.com/highstock/xAxis.top

If I may clarify any issues/matters I am available at your convenience.
Best regards!
Dawid Draguła
Highcharts Developer
NeBox
Posts: 41
Joined: Sun Feb 05, 2023 4:12 am

Re: Add dynamically series and indicators from localstorage

Thanks for the reply.

I'm just wondering how you implement the addition with automatic height calculation as here https://drive.google.com/file/d/1uZmlDj ... share_link

I understand that I can calculate the height myself, but it's not right.

Ok, there are indicators like EMA that are added to one axis.
There are indicators like Disparity Index that have a separate axis.

How do I know which one to add when loading? If the man added 5 indicators, how do I find which one will be on which axis?
User avatar
dawid.d
Posts: 807
Joined: Thu Oct 06, 2022 11:31 am

Re: Add dynamically series and indicators from localstorage

Hi,

Basically, by default, no series adds its own axis. You can add a series to a given axis using the yAxis or xAxis options and passing there an axis' id.
See: https://api.highcharts.com/highstock/series.line.yAxis

As for setting the height of the y-axis, it's wholly data-independent and you can set it however you like.
API: https://api.highcharts.com/highcharts/yAxis.height

If this is not what you are looking for please tell me what you would like to create. Maybe then I can help better.
Kind regards!
Dawid Draguła
Highcharts Developer

Return to “Highcharts Stock”