CODEWITHSUNDEEP
javascriptjqueryhighcharts
indranil9286
indranil9286

Reputation: 81

drilldown feature with url property for column graph in Highcharts

How can I use "drilldown" feature simultaneously with "url" property in case of column graph?
Initially i didn't use drilldown, but used url property for series.data.
Hence when the column were clicked the page used to redirect to the desired web-page.

But now i have to use drilldown.
After implementing drill down, in the column graph, now when i click on the columns it drills down to the next level and the url property doesn't works.

Only in case where the drilldown is set to null, there the url propertry works and when clicked on such columns the page is redirected to the desired page.

Is there any way to implement both features together in column graph?

Upvotes: 0

Views: 1025

Answers (1)

Andrew Dalgleish
Andrew Dalgleish

Reputation: 166

You can't do both simultaneously, otherwise a click on a bar would be trying to do two actions, you have to have one or the other.

Update after comment:

You can achieve this by changing the xAxis label into a link, see fiddle: http://jsfiddle.net/Lsst5h7j/2/

Important bits below, first outside the chart definition you set up the URL where you want the xAxis label clicks to go (if a standard url you can put the URL into the function below and just put the important bit here, or even remove this array and create the URL from the text, it depends on your desired resulting URL: 

var urls = {'North':'http://www.google.co.in/#q=North','East':'http://www.google.co.in/#q=East','West':'http://www.google.co.in/#q=West'};

Then back inside the chart definition you set your xAxis labels to links

xAxis: {
    type: 'category',
    labels: {
        formatter: function(){
            return '<a class="nodrilldown" href="'+urls[this.value]+'">'+this.value+'</a>';
        },
        useHTML: true
    }
}

Then back outside the definition you need to prevent the onClick on the bar from propagating down to the xAxis label (otherwise it drills down and then goes to the link)

$(".nodrilldown").click(function(e) {
   e.stopPropagation();
});

Upvotes: 1

Related Questions