Highcharts - Provide URL's for series data to open clickable link

Question

I would like to add a url to each of my data points inside my series that when clicked user is redirected to that page. For example jsfiddle .

series:[{data: [ [123.12,'http://xyz.com'],[332.32,'http://zzs.com'] ] }]

I was able to get the points to be clickable, but how I actually get them to find the point I am clicking on and which url to use I can't figure out. I can obviously hack it by using an alternative array that stores the links... but I would like to use chart as it's meant.

Now that it has been solved for future reference to be able to add links to your points here is the code:

http://jsfiddle.net/awasM/2/

The link no longer works.

user3088202
– user3088202

2015-02-02 17:32:06 +00:00
Commented Feb 2, 2015 at 17:32 — user3088202
– user3088202, Commented Feb 2, 2015 at 17:32

Mark · Accepted Answer · 2013-04-23 22:36:56Z

11

Here's one way to do this (fiddle here):

                       series: [{
                            name: 'Batch',
                            URLs: ['www.google.com', null, null, 'www.yahoo.com', null, null, 'www.cnn.com', null, null, 'www.minecraft.net'], // pass in array of URLs
                            data: [4375.48, 113599.39, 1278, 83950.12, 6579.65, 94582, 1285.65, 48700.39, 500, 62917.27],
                            color:'#b8ecce',
                            point: {
                                events: {
                                    click: function() {
                                        var someURL = this.series.userOptions.URLs[this.x]; // onclick get the x index and use it to find the URL
                                        if (someURL)
                                            window.open('http://'+someURL);
                                    }
                                }
                            }
                       }],

answered Apr 23, 2013 at 22:36

Mark

109k20 gold badges180 silver badges238 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

agrublev Over a year ago

Thanks for the working code, but I like Sebastians way a little better as it resembles what I will be passing from backend.

David Boshton Over a year ago

Could you repost the fiddle as that's exactly what I need please?

Sebastian Bochan · Accepted Answer · 2013-04-24 08:33:48Z

5

You can use structure:

 data:[{
   y:10,
   ownURL:'http://www.google.com'
 },{
   y:11,
   ownURL:'http://www.google2.com'
 },{
   y:5,
   ownURL:'http://www.google3.com'
 }]

and then you have ability to "get" this value by

this.point.options.ownURL

answered Apr 24, 2013 at 8:33

Sebastian Bochan

37.6k3 gold badges51 silver badges75 bronze badges

3 Comments

agrublev Over a year ago

Thank you, i've implemented the solution and it works like a charm. I wasn't aware of the ability to structure your data. And for those who are interested in how I pulled it off here is a real example (the "this" doesn't really work with my method). jsfiddle.net/awasM/2

Sebastian Bochan Over a year ago

You should catch point click event inside series. So please take look at example: jsfiddle.net/awasM/5

jlbriggs Over a year ago

Fiddle above seems to be missing, so here's one demonstrating the answer: jsfiddle.net/jlbriggs/3pxosb4x

Collectives™ on Stack Overflow

Highcharts - Provide URL's for series data to open clickable link

2 Answers 2

2 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related