ZottoSL
Posts: 17
Joined: Wed Oct 31, 2018 3:37 pm

Two questions.

Wed Nov 21, 2018 12:27 pm

Hi!

I have 3 series of spline type. When doing mouse over at some point, I need to get the 3 "Y" values ​​corresponding to that "X", and then send them. Currently I'm only getting 1 of these 3 values ​​(the one closest to the mouse pointer). This is what I tried:
https://jsfiddle.net/ZottoSL/vr2fkx3b/6/

The second doubt is the following. I have to graph those 3 values ​​in 3 different "gauge" graphics that are already drawn. I want to obtain the instance of said graphs in the following way:
https://jsfiddle.net/ZottoSL/tLz53q7j/2/

But I get an error of "$(...).Highcharts is not a function". As I understand it, this is the way to obtain the instance of these graphics.

Thanks!

bastss
Posts: 134
Joined: Wed Oct 17, 2018 10:59 am

Re: Two questions.

Wed Nov 21, 2018 3:47 pm

Hey ZottoSL,

There is a solution to your first question. https://jsfiddle.net/Bastss/75Lphn06/ Back to the second question - I don't really understand what you want to achieve. I've prepared a demo with my guesswork https://jsfiddle.net/Bastss/zyn59fLq/. If you had something different in your mind describe it more precisely, please.

Best regards
Last edited by bastss on Wed Nov 21, 2018 4:12 pm, edited 2 times in total.

ZottoSL
Posts: 17
Joined: Wed Oct 31, 2018 3:37 pm

Re: Two questions.

Wed Nov 21, 2018 4:08 pm

Friend, first of all thank you! It works perfectly.
Now, what I want to do is show those 3 values ​​in 3 different "gauge" graphs (a graph for each value). I have already drawn the graphics, as I showed in this script:
https://jsfiddle.net/ZottoSL/tLz53q7j/2/

I also have a function called "actualizarValor" that will update the value of each chart. The problem is that I do not know how to take the instance of each graph to pass the value to it.

I tried with $ ("#idContainer").Highcharts() but it does not work.

Thanks again!

bastss
Posts: 134
Joined: Wed Oct 17, 2018 10:59 am

Re: Two questions.

Wed Nov 21, 2018 4:14 pm

ZottoSL,

Check the previous post which I've just edited and look at the second demo. Is this what you had in mind?

Best regards!

ZottoSL
Posts: 17
Joined: Wed Oct 31, 2018 3:37 pm

Re: Two questions.

Wed Nov 21, 2018 5:55 pm

What I needed was not exactly that, but I used your example as a reference and I was able to build my graphics! The problem is solved and I thank you for that!

But I had a doubt. Is the sentence $("# ...").Highcharts() correct or not? Can we get the instance of a chart with this?

Thanks again!

Edit:

I add another thing.
When the number of points in the graph are too many, the "MouseOver" event does not fire. This is normal?

bastss
Posts: 134
Joined: Wed Oct 17, 2018 10:59 am

Re: Two questions.

Thu Nov 22, 2018 10:38 am

ZottoSL,

The sentence $("#...").highcharts() is correct, but with small "H" -> highcharts(). However, it is recommended to use pure JavaScript because of performance. Check this example: http://jsfiddle.net/Bastss/Lck3hyur/. The output is the same, but pure JS works faster and doesn't need a whole jQuery library.
When the number of points in the graph are too many, the "MouseOver" event does not fire. This is normal?
Could you send an online demo to check it?

Best regards!
Last edited by bastss on Thu Nov 22, 2018 12:51 pm, edited 2 times in total.

ZottoSL
Posts: 17
Joined: Wed Oct 31, 2018 3:37 pm

Re: Two questions.

Thu Nov 22, 2018 12:16 pm

bastss wrote:
Thu Nov 22, 2018 10:38 am
When the number of points in the graph are too many, the "MouseOver" event does not fire. This is normal?
Could you set an online demo to check it?

Best regards!

Look at this:
http://jsfiddle.net/ZottoSL/mypcrtox/19/

I create 2 variables: "dataShort" and "dataLarge". With "dataShort" the algorithm works perfectly. But with "dataLarge" the "MouseOver" event does not fires, and therefore the values ​​are not shown in the gauge graphics.

Thanks!

EDIT:
Sorry, the "MouseOver" event does fire, the problem is in this line:

Code: Select all

chart.series.forEach (series => {series.data.forEach (data => {...
It's as if the browser skipped it.

bastss
Posts: 134
Joined: Wed Oct 17, 2018 10:59 am

Re: Two questions.

Fri Nov 23, 2018 11:39 am

Hi Zotto SL,

This 'dataLarge' doesn't work because of performance. It is to many operations for a browser to loop through the loop so big data, push correct values to the array and update another chart with this value. But we've got a better idea how to improve this solution. Check this example: https://jsfiddle.net/Bastss/x8yLmf6t/. Because of using tooltip.formater, we actually are getting this point value, so we don't have loop through the loop. Also, check how gauges are defined and function to reset them. This solution is more efficiency than using mouseOver and mouseOut functions.

Kind regards!

ZottoSL
Posts: 17
Joined: Wed Oct 31, 2018 3:37 pm

Re: Two questions.

Tue Nov 27, 2018 11:59 am

Instead of using it in formatter(), use it in pointFormatter(), but the result was the same!

Thank you very much for all the help!

Return to “Highcharts Usage”