Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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/

like image 742
agrublev Avatar asked Dec 04 '22 11:12

agrublev


1 Answers

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);
                                    }
                                }
                            }
                       }],
like image 82
Mark Avatar answered Jan 03 '23 20:01

Mark