CODEWITHSUNDEEP
javascriptjqueryhighcharts
James
James

Reputation: 557

making series in Highcharts clickable

Does anyone know how to make the series in the highcharts clickable? as in if you click one of the items it will take you to an external link?

I looked through the documentation and could not find an option in the highcharts.

http://www.highcharts.com/docs/chart-concepts/series

Here is the fiddle provided in the doc. if anyone could make the series clickable that would be awesome!!

http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/highcharts/series/data-array-of-arrays/

$(function () {
    $('#container').highcharts({
        chart: {
        },
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },

        series: [{
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]        
        }]
    });
});

thank you!

Upvotes: 1

Views: 778

Answers (3)

Sebastian Bochan
Sebastian Bochan

Reputation: 37588

You can set url in your point object (or use global), catch click event on points and run window.location.

plotOptions: {
                 series: {
                     cursor: 'pointer',
                     point: {
                         events: {
                             click: function () {
                                 var url = this.options.url;
                                 window.open(url);
                             }
                         }
                     },
                 }
             },
    series: [{
                 data: [{
                     x: 0,
                     y: 29.9,
                     url: 'http://www.google.com'
                 }, {
                     x: 1,
                     y: 71.5,
                     url: 'http://www.yahoo.com'
                 }]
             }]

http://jsfiddle.net/287JP/2/

Upvotes: 1

notnotundefined
notnotundefined

Reputation: 3761

Try this. Run demo :-

$(function () {
$('#container').highcharts({
    chart: {
    },
    xAxis: {
        minPadding: 0.05,
        maxPadding: 0.05
    },

    series: [{
        data: [
            [0, 29.9], 
            [1, 71.5], 
            [3, 106.4]
        ]
    }],


     plotOptions: {
            series: {
                cursor: 'pointer',
                point: {
                    events: {
                        click: function() {
                            //do your stuff
                            alert([this.x,this.y]);
                        }
                    }
                },
                marker: {
                    lineWidth: 1
                }
            }
        },
});

});

Upvotes: 1

Prashobh
Prashobh

Reputation: 9552

You can try this

series: {
cursor: 'pointer',
         point: {
             events: {
                   click: function() {
                        //your logic
                     }
                   }
                }
 }

More info

Upvotes: 1

Related Questions