smimar
Posts: 7
Joined: Tue Jul 05, 2022 1:24 pm

How too pass mean value from bell curve to a function in javascript?

I am using Highcharts and I have a histogram with bull curve behind. Everything works well, bell curve generates mean and standard deviation numbers . I would like to know if there is a way of passing the mean and standard deviation numbers that are on top of the curve to an outside function so that I can conduct another statistical operation with them.

Thanks,
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: How too pass mean value from bell curve to a function in javascript?

Hello smimar!
Welcome to our forum and thanks for contacting us with your question!

You can get values of mean and standard deviation from the bell curve series object. I prepared a simple demo for you with an example, where in a chart load event I am looking for bell curve series and then I am calling a function with values taken from bellcurveSeries.mean and bellcurveSeries.standardDeviation properties.

Demo: https://jsfiddle.net/BlackLabel/fcwj0dzn/
API Reference: https://api.highcharts.com/highcharts/chart.events.load

Let me know if you have any further questions!
Kind regards!
Hubert Kozik
Highcharts Developer
smimar
Posts: 7
Joined: Tue Jul 05, 2022 1:24 pm

Re: How too pass mean value from bell curve to a function in javascript?

Thank you so much ! it worked as expected.

I have one more question, How can I display only 3 digits after comma on the bell curve for both mean and standard deviation?

On your example it displays 3.05733333333332986 (17 digits as default) and I would like to display only 3.057 on the chart.

Thanks,
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: How too pass mean value from bell curve to a function in javascript?

smimar,
I think the easiest way is to call toFixed method on these numbers (optionally parseFloat to return a number). You can also use Math.round or Math.floor methods :)
I have changed the demo a little bit here: https://jsfiddle.net/BlackLabel/dh36uega/
Best regards!
Hubert Kozik
Highcharts Developer
smimar
Posts: 7
Joined: Tue Jul 05, 2022 1:24 pm

Re: How too pass mean value from bell curve to a function in javascript?

Hi Hubert,

I am talking about the numbers on top of the bell curve not the numbers submitted to external function. I set valueDecimals to 3 for the tooltips but it didn't work .

Thanks,
smimar
Posts: 7
Joined: Tue Jul 05, 2022 1:24 pm

Re: How too pass mean value from bell curve to a function in javascript?

This is what I have done. It works for standard deviation but not for the mean. I couldn't figure out the issue.

tooltip: {
shared: true,
useHTML: true,
headerFormat: '<table><tr><th colspan="2">MEAN</th></tr>',
pointFormat: '<tr><td style="color: {series.color}">{series.name} </td>' +
'<td style="text-align: right"><b>{point.x} </b></td></tr>',
footerFormat: '</table>',
valueDecimals: 3
},
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: How too pass mean value from bell curve to a function in javascript?

smimar,
Sadly, the pointFormat property is overriding the valueDecimals property, so to show the desired number of digits after the decimal point you have to use JS methods. To do this you have to use a callback function in e.g. pointFormatter property and return a proper string. You can check it in the demo below.

Demo: https://jsfiddle.net/BlackLabel/zyjfgaw5/
API Reference: https://api.highcharts.com/highcharts/t ... tFormatter

Feel free to ask any further questions!
Regards!
Hubert Kozik
Highcharts Developer
smimar
Posts: 7
Joined: Tue Jul 05, 2022 1:24 pm

Re: How too pass mean value from bell curve to a function in javascript?

Hi Hubert,

Its works great, however now I lost the tooltip on the histogram and now its just showing the mean value of the bell curve no matter where I point the mouse .
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: How too pass mean value from bell curve to a function in javascript?

smimar,
In my demo, everything works correctly. I assume you are working with your code and it is hard to tell you what is not working and what could be done without taking look at the code from your project. Could you reproduce the issue in an online editor that I could work on? You can use the demo from my previous post.

I am waiting for your response.
Regards!
Hubert Kozik
Highcharts Developer
smimar
Posts: 7
Joined: Tue Jul 05, 2022 1:24 pm

Re: How too pass mean value from bell curve to a function in javascript?

Hi Hubert,

I have just created the jsfiddle . In this example no matter where you point the mouse it only shows the statistical values of the bell curve and not the histogram . Before using the tooltip option I was able to see both histogram and bell curve values separately .

https://jsfiddle.net/oj42qvmn/

Thanks,
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: How too pass mean value from bell curve to a function in javascript?

smimar,
Tooltips from your demo are not showing the same values, if you mouse over the histogram series it will show values for the histogram. If you mouse over the bell curve there will be values for the bell curve series.

I am not sure if I understand you correctly, but I assume you want to have a different (or default) tooltip for histogram and a different (with e.g. pointFormatter) tooltip for the bell curve series. You can change these tooltips in plotOptions property (docs: https://api.highcharts.com/highcharts/p ... ve.tooltip https://api.highcharts.com/highcharts/p ... am.tooltip).

I have also changed your demo a little bit to show different tooltips. You can check it here: https://jsfiddle.net/BlackLabel/9cph0trw/

Let me know if that was what you were looking for.
Regards!
Hubert Kozik
Highcharts Developer
smimar
Posts: 7
Joined: Tue Jul 05, 2022 1:24 pm

Re: How too pass mean value from bell curve to a function in javascript?

Hubert,

Thank you for all your support, everything works very well now. :)

Regards,
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: How too pass mean value from bell curve to a function in javascript?

You're welcome! If you will have any further questions I am here to help you :)
Hubert Kozik
Highcharts Developer

Return to “Highcharts Usage”