Pranjal Pranjal - 3 months ago 68
AngularJS Question

How to open ui-bootstrap dropdown on clicking over angular highcharts

This is the config object that I am passing to highchart directive and getting click event on clicking the highchart column, now on clicking the any column of highchart I want to open the dropdown there:

options: {
chart: {
type: 'column'
},

},
xAxis: {
categories: ['Oct 2015', 'Nov 2015', 'Dec 2015', 'Jan 2016', 'Feb 2016', 'March 2016']
},
yAxis: [{ // Primary yAxis
title: {`enter code here`
text: 'Volume'
}
}, { // Secondary yAxis
title: {
text: 'Sentiment'
},
opposite: true
}],
series: [{
name: 'Volume - Same period last year',
type: 'column',
data: [1410, 610, 400, 785, 450, 400],
point: {
events: {
click: function(e) {
vm.showDropdown = true;
vm.dropDownStyle.top = e.clientY;
vm.dropDownStyle.left = e.clientX;
console.log('event', e);
$scope.$apply();
}
}
},
color: '#2CAFC7'
}, {
name: 'Volume - Last 180 days ',
type: 'column',
data: [1210, 710, 700, 485, 410, 350],
point: {
events: {
click: function(e) { // here I am getting click event
console.log('clicked');
vm.showDropdown = true;
vm.dropDownStyle.top = e.clientY;
vm.dropDownStyle.left = e.clientX;
console.log('event', e);
$scope.$apply();
}
}
},
color: '#4C79BF'
}],

func: function (chart) {
//setup some logic for the chart
$timeout(function () {
chart.reflow();
}, 1000);
}
}

Answer

you can either use the is-open attribute which takes in an expression, add a boolean variable to determine if the dropdown is open, set it to true on the column`s click callback...

https://angular-ui.github.io/bootstrap/

is-open $ (Default: false) - Defines whether or not the dropdown-menu is open. The uib-dropdown-toggle will toggle this attribute on click.

Comments