How to attach onclick event to bar in discrete bar chart?

[angularjs-nvd3-directives]

How to attach onclick event to bar in discrete bar chart?

[cmaurer]

It should be possible. Let me tinker with it and see whatI can come up with.

[pavel-paulau]

Currently I add "callback" attribute to directive scope:

.directive('nvd3DiscreteBarChart', ['$window', '$timeout', function($window, $timeout){
    return {
        restrict: 'E',
        scope: {
            callback: "&",

and call it once chart is created, inside of:

link: function(scope, element, attrs){
    scope.$watch('data', function(data){}
}

and it looks ugly.(

[cmaurer]

it seems like there should be an 'angular' way of approaching this.

Also, nvd3 exposes the d3 dispatch object which handles chart events. I think the trick should be finding the right way to marry the two (angular and dispatch).

[cmaurer]

There appear to be a number of possibilities for handling this situation.

One method would be like the other event directives ngClick, etc that handle events. This jsfiddle example shows how this would work. http://jsfiddle.net/bYUa3/2/

Another method would be to intercept the specific dispatch events from nvd3/d3 and delegate them to an angular event with scope.$emit, or scope.$broadcast

In the directive, the code that would intercept the d3/nvd3 event would look something like this

chart.discretebar.dispatch.on('elementMouseover.tooltip', function(event) {
  scope.$emit('elementMouseover.tooltip', event);
});

Then in the controller, all you would need to do is listen for the event on the scope object, like this:

$scope.$on('elementMouseover.tooltip', function(event){
   console.log('scope.elementMouseover.tooltip', event);
});

They both seem to be reasonable approaches from an Angular perspective. I would like to do a little more research to determine the best approach, but I can see that it is something that will be needed and make this a better product.

Chris

[pavel-paulau]

This is pretty awesome. Look forward to further progress!

[cmaurer]

Ok, Pavel. I just pushed an update that handles events. There is an example in the examples folder, discreteBar.with.event.html. Essentially, I added code that that will emit an angular event based on the specific d3.js/nvd3.js event.

The one 'trick' that has to happen is the event name needs to be different from the specific event being emitted from the chart. If the names are the same the original event will be removed and replaced with the event that you define on the scope. Essentially, all of the existing functionality will muted.

https://github.com/mbostock/d3/wiki/Internals#wiki-dispatch

Take a look and let me know how this works for you.

Thanks,
Chris

[cmaurer]

@pavel-paulau,

Just checking in. Have you had a chance to look at this?

Thanks,
Chris

[pavel-paulau]

Eh, not yet. This is something that I'm gonna do tomorrow.

[pavel-paulau]

@cmaurer
Finally verified your changes. Everything works as expected!

[cmaurer]

Cool. I plan on adding this to the docs. adding the '.directive' to the event could be confusing.

Thanks for the feedback.
Chris

[k3n]

A big thumbs up from me too, just what I was needing!

[phillycoder]

I also like to implement click event in discrete & Multi bar charts. Not sure what's right event name. Tried below but not working. Can you please help? Thanks

            $scope.$on('click.directive', function(event){
                console.log('scope.click', event);
            });

[cmaurer]

let me take a look.

[k3n]

This is what I'm using, if it helps:

$scope.$on('elementClick.directive', function(event, data) { });

[cmaurer]

It also appears that I am missing the following for multibar:
'chartClick', 'elementDblClick', 'elementMouseover', 'elementMouseout'

I am probably missing more on the other models as well. Thats where the docs help make sure I got them all. I agree I need to finish those.

[Kramericus]

I'm using $scope.$on('elementClick.directive', function(event, data) { }); in my controller, and it captures the event and data very well.

However, upon click I would like to advance to another chart, but when I put

$location.path(data.something.specific)

within the anonymous function nothing happens.

No action, even if I hardcode a path for the router and don't use the data argument passed in. What am I missing? Any help is appreciated.

[tynman]

Perhaps "on click" isn't the right approach, from an Angular perspective. Angular really discourages you from interfacing directly with DOM events, at least outside of a library.

Instead, think about what your intent is when you're clicking. Are you concerned with where the mouse was when you clicked, or are you concerned with the data that's represented by that clicking? In my mind, it's all about getting the set of data (x, y1, y2, ..., yn) associated with that point. There's no need to do a $scope.$emit; just expose a property for the user to grab on to.

By way of (contrived and over-simplified) example:
<div ng-controller="MyControl as parentCtrl">
<line-chart data="parentCtrl.allData" selected-data="parentCtrl.activeData"/>
</div>

In the lineChart directive, the isolate scope would include:
selectedData: "="

When the click is detected within the library, it grabs the data values and sets them to selectedData. There could also be a property for hoveredData or whatever you want to call mouseOver. As an extension you could also watch selectedData inside the library, then emulate a click or manipulate the graph to show that part of it being selected.

To reiterate: the Angular way discourages you from exposing DOM events directly, and prefers that you expose properties which can be watched externally.