carlcraig / tc-angular-chartjs

AngularJS directives for Chart.js
http://carlcraig.github.io/tc-angular-chartjs/
Other
233 stars 83 forks source link

onclick events possible? #10

Closed maximmcnair closed 9 years ago

maximmcnair commented 10 years ago

Hi, I'm wondering how onClick events can be implemented through angular?

carlcraig commented 10 years ago

By onClick events, do you mean adding events to parts of the ChartJS object? Like receiving a click event when a segment is clicked?

If so, there is currently no "neat" way to do this.

You can however get access to the ChartJS object, and get information about a click event.

<canvas tc-chartjs-doughnut chart="chart" ng-click="handleChartClick($event)"></canvas>

By adding the chart="" attribute, you can assign the Chart.js object to a variable. You can then use methods getSegmentsAtEvent and getPointsAtEvent to find out where the user clicked.

I have a small example here: http://jsfiddle.net/Lfmhcab3/4/ This example will log the returned data when you click on the chart.

You will need to check http://www.chartjs.org/docs/ for documentation on each method, and how you could use the data it returns.

carlcraig commented 10 years ago

@maximmcnair have you had any luck with the onclick events?

stacysimpson commented 10 years ago

Adding the chart="" attribute worked for me!

ghost commented 9 years ago

I create the models for 6-10 charts and render them in an ng-repeat. I need access to just one of the chart objects so I tried using ng-if and a flag in the model with two canvas elements. Everything works except getting a single scope value to reference that one chart. Any other suggestions for accessing the chart? Is it available directly from canvas element if I use jquery from the controller?

I ended up using chart="$root.chart" to escape the ng-repeat scope