Page 1 of 1

Two questions.

Posted: Wed Nov 21, 2018 12:27 pm
by ZottoSL
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!

Re: Two questions.

Posted: Wed Nov 21, 2018 3:47 pm
by bastss
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

Re: Two questions.

Posted: Wed Nov 21, 2018 4:08 pm
by ZottoSL
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!

Re: Two questions.

Posted: Wed Nov 21, 2018 4:14 pm
by bastss
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!

Re: Two questions.

Posted: Wed Nov 21, 2018 5:55 pm
by ZottoSL
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?

Re: Two questions.

Posted: Thu Nov 22, 2018 10:38 am
by bastss
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!

Re: Two questions.

Posted: Thu Nov 22, 2018 12:16 pm
by ZottoSL
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.

Re: Two questions.

Posted: Fri Nov 23, 2018 11:39 am
by bastss
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!

Re: Two questions.

Posted: Tue Nov 27, 2018 11:59 am
by ZottoSL
Instead of using it in formatter(), use it in pointFormatter(), but the result was the same!

Thank you very much for all the help!