how to remove scroll bar in drill down highchart

2
votes

Below is my drill down chart, I want to remove the scroll bar while drill down event, and need the scroll bar again when we do drill up event.

I tried below api's but it didn't help:

chart.scroller.scrollbar.hide();
chart.scroller.scrollbarGroup.hide();

scrollbarGroup.hide() - is removing the scroll bar but along with that success value also removing which I don't want.

My second problem is while loading first time - my scroll bar directly pointing to user3 instead of user1. But if I do drill down event and do drill up event its pointing to **user1 but not for the first time.

Any help would be really appreciated to resolve these two issues.

Here is my fiddle

2
jqueryhighchartsscrollbarsdrilldown
but along with that success value also removing is not clear – Nishith Kant Chaturvedi
A very important thing is , Highstock has only dateTime type in xAxis. That's why your series is showing as datetime. yu are not filling categories with an array of items. refer documentation.. Simply use highcharts.js instead highstock – Nishith Kant Chaturvedi
It seems like highcharts.js don't have scroll bar, that's the reason I went for hightstock.js – jquery beginner
That's right , scrollbar is highstock's feature .but second thing is type:category in xAxis isn't supported by highstock. for that you should defines categories as separate array – Nishith Kant Chaturvedi

2 Answers

0
votes

Second problem: Call set extremes in load event to get extremes to 0,7 from the very beginning.

First problem: In drilldown event hide chart.scroller.scrollbar, chart.scroller.scrollbarGroup and change stroke-width of chart.scroller.scrollbarRifles, because hide doesn't work that well there. Update axis to set new min as 0 (or call setExtremes if you need to set min/max). In drillup event show previously hidden elements and set strok-width back to 1 for the last one.

Example: http://jsfiddle.net/ndfk7vgd/19/

// Create the chart
var chart = new Highcharts.Chart({
    chart: {
        type: 'column',
        renderTo: 'container',
        events: {
            load: function (e) {
                this.xAxis[0].setExtremes(0, 7);
            },
            drilldown: function (e) {
                this.xAxis[0].update({
                    min: 0
                });
                chart.scroller.scrollbar.hide();
                chart.scroller.scrollbarGroup.hide();
                chart.scroller.scrollbarRifles.attr({
                    'stroke-width': 0
                });
            },
            drillup: function (e) {
                chart.scroller.scrollbar.show();
                chart.scroller.scrollbarGroup.show();
                chart.scroller.scrollbarRifles.attr({
                    'stroke-width': 1
                });
                var _self = this.xAxis[0];
                setTimeout(function () {
                    _self.setExtremes(0, 7);
                }, 1);
            }
        }
    },
...
0
votes

Update The solution which I provided in below answer was based on the consideration that you are using highStock but A very important thing is , Highstock has only dateTime type in xAxis. That's why your series is showing as datetime. you are not filling categories with an array of items. refer documentation.. Simply use highcharts.js instead highstock also refer Highstock: set xAxis as not "datetime"

use following code in drilldown 

$( ".highcharts-scrollbar" ).css( "display", "none" );
    chart.scroller.xAxis.labelGroup.hide();
    chart.scroller.xAxis.gridGroup.hide();
    chart.scroller.series.hide();
    chart.scroller.scrollbar.hide();
    chart.scroller.scrollbarGroup.hide();
    chart.scroller.navigatorGroup.hide();
    chart.scroller.scrollbarRifles.hide();
    $.each( chart.scroller.elementsToDestroy, function ( i, elem ) {
        elem.hide();
    } );

for drillup part refer Fiddle here