NicoMdeLille
Posts: 5
Joined: Fri Sep 16, 2022 3:28 pm

Adding a group in the SVG Object disables the javascript functionnalities

Hi,
First of all, thanks a lot for reading me, spending time on my problem and helping me !

I want to add a group of rectangle in the highcharts SVG object, like this :
https://drive.google.com/file/d/1m-a0rR ... sp=sharing

The positions of the rectangles are calculated on the servers, and received by AJAX request under HTML format :

Code: Select all

<g class="highcharts-operations" data-z-index="7">
    <rect class="navigator-operations" x="57.368094351335%" y="80%" width="0.32216014897579%" height="10" style="fill: rgb(175, 0, 124); opacity: 0.5;"></rect>
    <rect class="navigator-operations" x="10%" y="80%" width="4.591351127664%" height="10" style="fill: rgb(175, 0, 124); opacity: 0.5;"></rect>
    <rect class="navigator-operations" x="40.525553486447%" y="80%" width="1.576660459342%" height="10" style="fill: rgb(175, 0, 124); opacity: 0.5;"></rect>
    <rect class="navigator-operations" x="57.920546244569%" y="80%" width="0.014380302089799%" height="10" style="fill: rgb(175, 0, 124); opacity: 0.5;"></rect>
    <rect class="navigator-operations" x="10%" y="80%" width="3.0525553486447%" height="10" style="fill: rgb(175, 0, 124); opacity: 0.5;"></rect>
    <rect class="navigator-operations" x="39.404096834264%" y="80%" width="2.1832195323815%" height="10" style="fill: rgb(175, 0, 124); opacity: 0.5;"></rect>
    <rect class="navigator-operations" x="62.594661700807%" y="80%" width="4.1674943099524%" height="10" style="fill: rgb(175, 0, 124); opacity: 0.5;"></rect>
    <rect class="navigator-operations" x="89.562383612663%" y="80%" width="1.4917235671426%" height="10" style="fill: rgb(175, 0, 124); opacity: 0.5;"></rect>
    <rect class="navigator-operations" x="99.875853507138%" y="80%" width="0.2991930477964%" height="10" style="fill: rgb(175, 0, 124); opacity: 0.5;"></rect>
    <rect class="navigator-operations" x="89.810676598386%" y="80%" width="0.039416511483551%" height="10" style="fill: rgb(175, 0, 124); opacity: 0.5;"></rect>
    <rect class="navigator-operations" x="89.562383612663%" y="80%" width="1.8388164701014%" height="10" style="fill: rgb(175, 0, 124); opacity: 0.5;"></rect>
    <rect class="navigator-operations" x="99.275812124974%" y="80%" width="0.024001655286571%" height="10" style="fill: rgb(175, 0, 124); opacity: 0.5;"></rect>
</g>


So I .append() the result in the SVG Object created by HighCharts :

Code: Select all

<svg version="1.1" class="highcharts-root" xmlns="http://www.w3.org/2000/svg" width="1715" height="400" viewBox="0 0 1715 400">
It works, and my page shows the picture I previously insert.
But, no functionnality works anymore : no tooltip, no cursor, the time navigator doesn't work, etc..

So my questions are :
-How can I reload the JS code linked to the chart, is it possible ?
-Or, anyone knows how to insert SVG group in the HighCharts SVG Object ?


Best regards,
Nicolas
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: Adding a group in the SVG Object disables the javascript functionnalities

Hi Nicolas!
Welcome to our forum and thanks for contacting us with your question!

I suggest you change the logic of drawing the rectangles. Highcharts have a built-in feature, which is called Highcharts SVG Renderer. Thanks to that you can draw any shape you would like to, e.g. rectangles beyond the chart. I know, that it will need you to change an AJAX Request, or take some data from it, but I think it will be better to use a native HC SVG Element due to built-in methods, events etc. You can draw these rectangles e.g. in chart load event and you will gain a possibility to base position relative to the chart.

Here you can find an article written by my colleague with some sample demos:
https://support.highcharts.com/support/ ... -renderer-

Here you can find the documentation of mentioned HC SVG Renderer:
https://api.highcharts.com/class-refere ... VGRenderer
https://api.highcharts.com/class-refere ... SVGElement

Let me know if that could fit your requirements.
Kind regards!
Hubert Kozik
Highcharts Developer
NicoMdeLille
Posts: 5
Joined: Fri Sep 16, 2022 3:28 pm

Re: Adding a group in the SVG Object disables the javascript functionnalities

Hi Hubert,

Thanks a lots for your answer, and for your idea to use the HighCharts SVG Renderer, despite my searchs, I didn't it exist...
So I have (simply) adapted a code without AJAX :
https://jsfiddle.net/1jreyq7k/47/

But you'll see that the time navigator doesn't work anymore.. Do you know why ?

Furthermore, is it possible to adapt the rectangle to a xy-zoom ? If yes, could you guid me in this way ?

Best regards, Nicolas
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: Adding a group in the SVG Object disables the javascript functionnalities

Nicolas,
navigator didn't work, due to your data, pointInterval was set to a really small value and there was no possibility to zoom it. Just set some pointInterval value and it works correctly :)

To adapt the rectangle to a xy-zoom you can use afterSetExtremes event in xAxis/yAxis. You can make a function, which will be called after zooming on the chart. In the demo below, I used some random numbers to show you, that rectangle is moving after zooming.

Demo: https://jsfiddle.net/BlackLabel/up7yr8v0/
API Reference: https://api.highcharts.com/highcharts/x ... etExtremes
https://api.highcharts.com/class-refere ... nt#destroy
https://api.highcharts.com/class-refere ... ement#attr

Regards!
Hubert Kozik
Highcharts Developer
NicoMdeLille
Posts: 5
Joined: Fri Sep 16, 2022 3:28 pm

Re: Adding a group in the SVG Object disables the javascript functionnalities

Hubert,

Thanks you for your precious help ! You answered to all my questions, my problems are resolved !

Have a good day,
Nicolas
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: Adding a group in the SVG Object disables the javascript functionnalities

Nicolas,
That's great to hear! In case of any further questions, feel free to contact us again.
Hubert Kozik
Highcharts Developer

Return to “Highcharts Usage”