How to couple AngularJS with Google charts.

[satyajeet anand tripathy]

Hi ,

Has any body implemented Mapping Angular JS to Google Charts. If you have please help me. please bear in mind that my use-case also demands the charts to be redrawn anytime the model gets changed.

Any help, lead, wiki , anything which can atleast help me think in this direction is highly appreciated.

Thanks

Satyajeet

[Stephen Nancekivell]

I was doing that this week.

One tricky part is the google chart api wants a div with an ID to draw the chart in. I had my chart in a ng-repeat & ng-include. So the repeated div ID's were the same. Then I appended the $scope.$id to the id. Which fixed that.

But then, the google chart was trying to select the div id before angular had rendered the template with the new dynamic ID. To deal with that I ran my chart draw method in a setTimeout function.

That was kind of a hack. I think this could be done better using a directive where you can run methods after the template has been drawn.

Hope that helps.

[satyajeet anand tripathy]

Thanks Stephen... It definitely helps.. for the most.. it gets the ball rolling for me :D

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To post to this group, send email to ang...@googlegroups.com.
To unsubscribe from this group, send email to angular+u...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular?hl=en.
 
 

[DjebbZ]

When you have a timing difference between Angular's rendering and something-else-than-angular's rendering, try to use the $scope.$apply method. Explanations here : http://docs.angularjs.org/guide/scope. I just used between a jQuery method and Angular and it works like a charm.

Citing the guide :

When the browser calls into JavaScript the code executes outside the Angular execution context, which means that Angular is unaware of model modifications. To properly process model modifications the execution has to enter the Angular execution context using the $apply method. Only model modifications which execute inside the $applymethod will be properly accounted for by Angular. For example if a directive listens on DOM events, such as ng-click it must evaluate the expression inside the $apply method.

Basically you could try applying your model's changes in the $apply method. I will keep data and view in sync.

[satyajeet anand tripathy]

Hi,

Is there a possible way where the model can be a Javascript object and watch can bind a listener to this Javascript object.

Thanks

Satyajeet

[DjebbZ]

I never used $watch, but in Angular the model is $scope, a javascript object. It may have object as properties, as any regular object. So I know it's possible.

[Stephen Nancekivell]

Having learnt more about directives. I think you should be able to use them,  and do it better.

On Saturday, 8 September 2012 16:38:56 UTC+12, satyajeet anand tripathy wrote:

[satyajeet anand tripathy]

@Stephen, on a mission to understand Directives now :) If you have any pointers i should keep a tab on , they are welcome.

--

You received this message because you are subscribed to the Google Groups "AngularJS" group.