Texsky
Posts: 11
Joined: Wed Mar 15, 2023 6:08 pm

Clickable Annotations

Hello to all,

First off, let me preface this by stating that I am NOT a programmer. However, I've been using some software that utilizes Highcharts for graphing Personal Weather Station data (in my case, stored on my computer, not a website). And despite not knowing what I'm doing, I have been able to make a number of mostly cosmetic changes to suit my personal tastes. Usually I try to hunt down what I'm trying to accomplish (that has been coded by others) and then essentially cut and paste, after which, I make my alterations. I've been largely successful doing this, however there's a particular issue that I haven't been able to figure out. The best way to describe it is by pointing to two sample/demos that are similar to what I would like to be able to do.

The first one is here --> https://jsfiddle.net/gh/get/library/pur ... ine-labels

And the second one is here --> https://jsfiddle.net/gh/get/library/pur ... /line-ajax

For the first link, imagine that the top blue line represents monthly Record High temperatures for a particular location, and the bottom black line represents Record Lows. Since these temperature values would be associated with a particular day, month, and year, I would like to be able to click on the data points and have an annotation that displays that information like in the second link listed above. If it's possible to do this in a relatively simple/easy way, I would greatly appreciate the assistance.

Thank you.
jakub.j
Posts: 1091
Joined: Tue Jan 24, 2023 11:14 am

Re: Clickable Annotations

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

I prepared a live demo with the annotation on click as you showed in the second example. I disabled the tooltip by setting chart.tooltip.enabled to false but if you want it to be visible simply change the value to true.

Demo: https://jsfiddle.net/BlackLabel/yeajnkm7/

Let me know if that was what you were looking for!
Best regards
Jakub
Texsky
Posts: 11
Joined: Wed Mar 15, 2023 6:08 pm

Re: Clickable Annotations

Hello Jakub,

Thank you very much for your reply and assistance.

The "look" of what you've presented is definitely what I'm after, but the remaining issue I see is that the date information on the data point click is the same and I'm looking for a way to tie that to the Temperature series. For instance, clicking on the Record High for June might return "Thursday, Jun 22, 1981". And then clicking on, say the December Record Low might read 'Monday, Dec. 25, 1952' and so on. Each point would undoubtedly have a different date, so I need some way of connecting that information to the markers.

Like I said, I'm not "programmer" savvy and maybe I'm missing something in your post, but I could use the clarification if this is the case. I hope this makes sense, and thank you again.

Take care,
Bobby
jakub.j
Posts: 1091
Joined: Tue Jan 24, 2023 11:14 am

Re: Clickable Annotations

Hey

I modified the "text" variable so that it displays the point's category which in you case is the month.

Demo: https://jsfiddle.net/BlackLabel/va7d4ezu/

Let me know if that was what you were looking for!
Best regards
Jakub
Texsky
Posts: 11
Joined: Wed Mar 15, 2023 6:08 pm

Re: Clickable Annotations

Hi Jakub,

Thanks for the reply.

What I would like to do is take the information in the image below, which are the dates when temperature records were set (yes, they're fahrenheit) and when I would click on the data point of the line graph, the annotation would then display these dates so it would be a simple matter of knowing when that record was set. Thanks for your help.
Attachments
Demo.jpg
Demo.jpg (91.38 KiB) Viewed 331 times
jakub.j
Posts: 1091
Joined: Tue Jan 24, 2023 11:14 am

Re: Clickable Annotations

Hi,

I changed the xAxis type to datetime so that it doesn't just display the months but it displays the whole dates that you provide in the data. Then in the annotation we can display point.x which is the date that you are looking for.

Demo: https://jsfiddle.net/BlackLabel/ondsebp7/

Let me know if you have any further questions!

Best regards
Jakub

Return to “Highcharts Usage”