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

Y axis should get updated when conversion happens from Min Max values

Pllease follow below steps
1)Changing Celsius to Fahrenheit (by clicking Fahrenheit check box), Y axis value changes accordingly.
2) Now, when I click "Change MinMax of Line Chart" button, the Y axis changes as per min max values.

Now my problem is, when I click on Celsius checkbox again, I want Y axis values to be converted from current min max values to Celsius values. And should be displayed on Y axis accordingly.
Also, I am not sure where why Fahrenheit checkbox gets unchecked automatically , when I click on "Change MinMax of Line Chart" or anywhere outside. Thank you.

My fiddle:
https://jsfiddle.net/4otchks2/199/
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: Y axis should get updated when conversion happens from Min Max values

Hello there,

Unfortunately, it is really hard to work on your code since it contains a lot of errors like trying to get HTML elements by the ID that does not exist, using the same ID on two elements, or trying to set the checked property on undefined. Instead of a standard checkbox, you can use a radio, or write a correct logic for toggling between checking each of them.

On this forum, we provide support for Highcharts implementations, whereas most of these problems come from HTML and JS.

Please work on those errors, try to simplify your demo as much as possible (as it will help you while debugging), and I'll be more than happy to help you work with various Highcharts methods, without writing everything from scratch.

Best regards!
Kamil Musiałowski
Highcharts Developer
Sr270
Posts: 83
Joined: Tue Aug 23, 2022 12:15 pm

Re: Y axis should get updated when conversion happens from Min Max values

Sorry about not removing few ids that weren't needed. Intention was to use class name that are same (instead used same ID, my mistake).

1) Y axis gets updated for Fahrenheit by clicking on 'Fahrenheit' check box,
2) Zooms Y axis as per min max values, when we click on "Change MinMax of Line Chart" button.

When I click on Celsius after following above two steps, I want Y-axis to be updated from the zoomed (min, max) values ((that was set by clicking "Change MinMax of line chart" button). i.e. [44,45,46,47,48,49,50,51,52,53,54] to Celsius. But Y axis does not get updated now.

Fiddle below:
https://jsfiddle.net/2hLyvek0/6/

Thank you.
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: Y axis should get updated when conversion happens from Min Max values

If you want to update the yAxis extremes again on checkbox click, you have to invoke that method in the event listener which handles this particular checkbox change event. Take a look at the demo below, where I have added this function and grabbed the initial min/max extremes on chart load.

DEMO: https://jsfiddle.net/BlackLabel/yumrb1s5/

Regards!
Kamil Musiałowski
Highcharts Developer
Sr270
Posts: 83
Joined: Tue Aug 23, 2022 12:15 pm

Re: Y axis should get updated when conversion happens from Min Max values

Thank you. When clicking minmax button, we get zoomed in values. I want those values to be updated as series data and convert that to Celsius or Fahrenheit. Only zoomed in value should be converted, but it unzooms and converts the olddata in the series (instead of converting exactly what is set on y axis(zoomed vlaues)). Hope I am more clear now.

Also, as per demo sent, when I click on Fahrenheit after that step, Y axis is not updated for Fahrenheit values.. i.e. from [0,2,4,6,8,1,0,12,14] to Fahrenheit. thanks again.
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: Y axis should get updated when conversion happens from Min Max values

I'm not sure if I understand correctly what you want to achieve. Maybe you could tell me in general what would you like to achieve in your project? If I will be able to understand the whole purpose of the chart, then maybe there will be a better, more optimized solution for you.

For example, if you just need to toggle between the same data but converted, how about you create a chart with two series and just toggle between their visibility? That could make your code much shorter, cleaner and more performant.
I have prepared a clean code example of this implementation, feel free to upgrade it to your requirements.
DEMO: https://jsfiddle.net/BlackLabel/x10jsht3/

Let me know what you think about this solution,
Best regards!
Kamil Musiałowski
Highcharts Developer
Sr270
Posts: 83
Joined: Tue Aug 23, 2022 12:15 pm

Re: Y axis should get updated when conversion happens from Min Max values

Hi,

I will try to give an overview. I need to toggle between Celsius and Fahrenheit, but not same data always. That is because, when user sets min max using setExtremes for that particular series, then min max range need to be taken (assume tick labels in min max range need to be converted) for toggling. Instead of using original series data.

I am wondering if I could get the tick labels of Y axis after setting min max using setExtremes. So, we could pass that for conversion. Just like how we rite now do for Celsius and Fahrenheit conversion.

newData = oldData.map(fahren => Math.round((fahren - 32) / 1.8 ));
series.setData(newData)

oLdData in the above code needs to be setExtremes tick label range. So that we can convert from minmax range to one of the temperatures.
From then on, we can use same data for toggling unless another min max range is set again.
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: Y axis should get updated when conversion happens from Min Max values

Thank you for the overview, let me point out some general tips.

Toggling between Celsius and Fahrenheit:
I think we have that covered in previous posts, basically make sure to store the original data in a variable, and then update the series with the converted data (so that you can always go back to the original data).

Setting the minMax:
How about creating some global variable called isCelsius, that will have a type of boolean. You can update it while clicking the checkboxes, and use it while setting the min max range.
For example:

Code: Select all

if (isCelsius) {
	setExtremes(x1, x2);
} else {
	setExtremes( Math.round((x1 * 1.8) + 32)), Math.round((x2 * 1.8) + 32)) );
}
If you need the yAxis ticks, you can grab them from chart.yAxis[0].tickPositions, demo example below.
DEMO: https://jsfiddle.net/BlackLabel/1bLr5qv2/

Maybe combine both of the solutions stated above? It's all up to you, but I'm always ready to help you in case of any troubles with implementing them.

Best regards!
Kamil Musiałowski
Highcharts Developer
Sr270
Posts: 83
Joined: Tue Aug 23, 2022 12:15 pm

Re: Y axis should get updated when conversion happens from Min Max values

Very helpful. I really appreciate it. Thanks a lot.
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: Y axis should get updated when conversion happens from Min Max values

You're welcome! You can always ask for assistance here if you need it :)
Kamil Musiałowski
Highcharts Developer
Sr270
Posts: 83
Joined: Tue Aug 23, 2022 12:15 pm

Re: Y axis should get updated when conversion happens from Min Max values

I have incorporated "Toggle between the same data but converted" as per this suggestion https://jsfiddle.net/BlackLabel/x10jsht3/ in my code.
Conversion works perfect. But my existing column and spline chart does not work now. Because of new series being added for Fahrenheit.
{
// Farenhiet series
data: CData.map(cel => Math.round(cel * 2.2046)),
visible: false
}

May I know how I can handle this.
My Fiddle below:
https://jsfiddle.net/g3xds54v/3/
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: Y axis should get updated when conversion happens from Min Max values

Hello again,

I will gladly help you with this one, but just to clarify could you please tell me how your chart should work now?

Would you like to have this solution: https://jsfiddle.net/BlackLabel/aonbm5g0/
combined with the possibility to toggle between Celsius and Fahrenheit on the line chart, with the rest of the functionality remaining the same (which is implemented here https://jsfiddle.net/BlackLabel/x10jsht3/)?

Waiting for your reply,
Regards!
Kamil Musiałowski
Highcharts Developer
Sr270
Posts: 83
Joined: Tue Aug 23, 2022 12:15 pm

Re: Y axis should get updated when conversion happens from Min Max values

Yes exactly, below fiddle is my current code with all functionalities included (inclusive of toggling between Celsius and Fahrenheit on the line chart);
https://jsfiddle.net/g3xds54v/3/

But displaying charts based on checkbox selection (line, column, spline) does not work as expected in the above code because of newly added Fahrenheit series. Should be working like this: https://jsfiddle.net/BlackLabel/aonbm5g0/
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: Y axis should get updated when conversion happens from Min Max values

I have combined these two requests in one demo, but since we already toggle between visible series (in your 3 chart configuration), implementing the another toggle would be hard.

That's why, the solution for this case was to simply recalculate the original provided data. Similarly how you did it at the beginning of this topic.

DEMO: https://jsfiddle.net/BlackLabel/0js7muLa/

Take a look at it, and let me know if that's what you were looking for,
Best regards!
Kamil Musiałowski
Highcharts Developer

Return to “Highcharts Usage”