drilldown feature with url property for column graph in Highcharts

Question

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?

Maybe you should post what you have achieved thus far so people can spot where it went wrong? — skubski
– skubski, Commented Sep 3, 2015 at 11:37
What is the point of drilling down, when right after that you redirect user to another page? — Paweł Fus
– Paweł Fus, Commented Sep 3, 2015 at 14:45
The simplest way is prepare a two sites. First with main chart, where you catch a click event and place URL with hash inside. Second page should contain a script which check a hash in url and then return chart on "particual level" — Sebastian Bochan
– Sebastian Bochan, Commented Sep 3, 2015 at 15:21
Here goes my code: http://jsfiddle.net/bose_indranil9286/51jphs3f/. When I am clicking on the first column bar it is drilling down to the next level. But in case of the second column bar or the inner level column bar, where the property is set as drilldown: null, the page is getting redirected to the desired url. — indranil9286
– indranil9286, Commented Sep 4, 2015 at 6:32

Andrew Dalgleish · Accepted Answer · 2015-09-04 10:09:39Z

1

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();
});

edited Sep 4, 2015 at 10:09

answered Sep 3, 2015 at 12:56

Andrew Dalgleish

1669 bronze badges

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

1 Comment

indranil9286 Over a year ago

Thanks for replying. Yeah! That's what I am trying to explore, if I can disable any one of the feature for onClick of either the column-bar or the X-Axis Name so that I can achieve both features together. Lets say, on-click of the bar will drilldown the chart and onclick of the X-axis name will redirect to the particular url. Any suggestions?

Collectives™ on Stack Overflow

drilldown feature with url property for column graph in Highcharts

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related