Sr270
Posts: 83
Joined: Tue Aug 23, 2022 12:15 pm

Add or remove series dynamically

Hi,

To give an idea of what I am trying to achieve. I will explain how my checkboxes are shown now.

The first three check boxes are constant (always displayed on the menu).
Other check boxes are shown on menu based on 'A' or 'B' is passed from json.
If user receives "A", two more check boxes are added (shown on the menu). (eg: Apple, Banana)
If user receives "B", only one check box is added (eg: Carrot) along with existing three constant check boxes.

So based on the number of checkboxes shown at any point of time, I want the series as well to be dynamic.
Example:
For 'A' - 5 checkboxes are shown, I should be able to create five charts by checking all of them (so two more series need to be added here dynamically).
For 'B' - 4 checkboxes are shown, I should be able to create four charts by checking all of them (so only one more series need to be added dynamically).
Data for all newly added charts are different from each other.

So, how can I add or remove series dynamically based on 'A or 'B' passed.

Fiddle: https://jsfiddle.net/ozctfbsL/23/
michal.f
Posts: 1114
Joined: Thu Aug 12, 2021 12:04 pm

Re: Add or remove series dynamically

Hello,

The issue of adding and removing checkboxes depending on what you get from the JSON file is not related to Higcharts, so it goes beyond the scope of the forum.

The chart.addAxis() and chart.addSeries() methods are used to dynamically add series and axes, and axis.remove() and series.remove() are used to remove them.

In your case of this demo, it is enough that you add logic to check if a given series and axis exist, if not, you add them dynamically.

Demo: https://jsfiddle.net/BlackLabel/mvuabe4q/
API: https://api.highcharts.com/class-refere ... rt#addAxis
https://api.highcharts.com/class-refere ... #addSeries
https://api.highcharts.com/class-refere ... xis#remove
https://api.highcharts.com/class-refere ... ies#remove

Best regards!
Michał Filipiec
Highcharts Developer
https://blacklabel.pl/highcharts/
Sr270
Posts: 83
Joined: Tue Aug 23, 2022 12:15 pm

Re: Add or remove series dynamically

Perfect. Exactly what I wanted to know. I have explained regarding checkboxes to give an idea of what's happening behind. I already have those in place. So no issues.

I have actually implemented the same little differently. Added series for all checkboxes (until checkbox6) , but showing checkboxes only that are needed to be shown. Depending on the checkbox shown, I use that particular series. And not use the series whose checkboxes were not shown.
- Assume, 'B' is passed now. Checkbox6 is shown along with first three constant checkboxes.

Fiddle: https://jsfiddle.net/kt9covpz/29/

1) Is this method fine to use, instead of adding or removing series dynamically ?
2) Also, I have an issue irrespective of any method I use. The dark grey line that separates charts gets a little to the left (beyond Y axis) when zoomed or goes above zero for every chart when unzoomed (when Reset Zoom is pressed). I could not replicate that in fiddle. Please find the link with pics showing the same. My I know where I am going wrong and why this would happen.

https://ibb.co/0nYzL0s
https://ibb.co/rfvYTyw
michal.f
Posts: 1114
Joined: Thu Aug 12, 2021 12:04 pm

Re: Add or remove series dynamically

Hello,
1) Is this method fine to use, instead of adding or removing series dynamically ?
It depends on how you will get the data of individual series because if you can set them up as in your example when generating the chart, then it's okay.
2) Also, I have an issue irrespective of any method I use. The dark grey line that separates charts gets a little to the left (beyond Y axis) when zoomed or goes above zero for every chart when unzoomed (when Reset Zoom is pressed). I could not replicate that in fiddle. Please find the link with pics showing the same. My I know where I am going wrong and why this would happen.
This is because the position of the drawn lines is not updated when zooming in because it was not included (you didn't mention it before). You can use the chart.events.render() callback function where you will update the position and width of these lines.

Demo: https://jsfiddle.net/BlackLabel/ujpv3mnx/
API: https://api.highcharts.com/highcharts/c ... nts.render


Regards!
Michał Filipiec
Highcharts Developer
https://blacklabel.pl/highcharts/
Sr270
Posts: 83
Joined: Tue Aug 23, 2022 12:15 pm

Re: Add or remove series dynamically

Sorry for not mentioning earlier. It was an issue that was already existing. Thank you for the demo.

I tried on my codebase:
Now black line does not go beyond Yaxis ( to the left).
But still black line either goes below zero when zoomed or goes above zero while unzoomed.
michal.f
Posts: 1114
Joined: Thu Aug 12, 2021 12:04 pm

Re: Add or remove series dynamically

Hi,

I can't reproduce something like that in an online demo. Can you explain in more detail in which case it behaves like this or send a GIF?

Regards!
Michał Filipiec
Highcharts Developer
https://blacklabel.pl/highcharts/
Sr270
Posts: 83
Joined: Tue Aug 23, 2022 12:15 pm

Re: Add or remove series dynamically

1)The way how initial three graphs look:
https://ibb.co/WVBty1k

2)When I zoom (black line separator goes below zero)
https://ibb.co/3St43p2

3)When I unzoom, it goes back fine.
https://ibb.co/Zhb0Pn9

4)Whereas assume, I zoomed in when I had only one graph, and later added two more graphs.
In already zoomed in scenario, black line separator works fine
https://ibb.co/bshZZQW

5)But when I unzoom already zoomed in graph (black line separator goes above zero)
https://ibb.co/PxwfRF0

Scenarios 2 and 5 are the issues.

Thank you.
michal.f
Posts: 1114
Joined: Thu Aug 12, 2021 12:04 pm

Re: Add or remove series dynamically

Hi,

So instead of updating only the x and width of the lines, it's best to move the entire logic of generating them to the chart.events.render() callback function.

Demo: https://jsfiddle.net/BlackLabel/tdn2h8kv/

Regards!
Michał Filipiec
Highcharts Developer
https://blacklabel.pl/highcharts/
Sr270
Posts: 83
Joined: Tue Aug 23, 2022 12:15 pm

Re: Add or remove series dynamically

That is perfect. Thanks a lot.
michal.f
Posts: 1114
Joined: Thu Aug 12, 2021 12:04 pm

Re: Add or remove series dynamically

That's great to hear!

Best regards!
Michał Filipiec
Highcharts Developer
https://blacklabel.pl/highcharts/

Return to “Highcharts Usage”