I have an amchart in a div whose show/hide is managed by angularjs. Sometimes it charts data that's already in memory. When that is the case, the div opens, chart is rendered and the SVG in there has a width of 10. As a result the chart does not appear on screen. Resize the window a mite and the chart appears because amcharts is listening to resize events I guess. This I think is a known issue - I have seen some SO posts on them and I hope one of them will work for me. My suspicion is that the angular machine does not get cycles to run open the div before amcharts gets to draw its magic (just a hunch no solid evidence.)
Next, I added an event watcher
piechart.write(divs.chart_div.attr('id'));
divs.chart_div.on('yes', 'snowy', function(){ // same with 'shown','resize'
console.info('============= woah ========');
});
Now a strange thing happened. I see the following error stack in my console
Error: [jqLite:onargs] jqLite#on() does not support the `selector` or `eventData` parameters http://errors.angularjs.org/1.3.13/jqLite/onargs
at REGEX_STRING_REGEXP (http://localhost:8100/lib/ionic/js/ionic.bundle.js:8762:12)
at jqLiteOn (http://localhost:8100/lib/ionic/js/ionic.bundle.js:11733:39)
at Object.JQLite.(anonymous function) (http://localhost:8100/lib/ionic/js/ionic.bundle.js:11951:17)
at Object.makePieChart (http://localhost:8100/common/services/graphinghelperService.js:528:34)
at obj.controller.$scope.myExt.renderFunc (http://localhost:8100/directives/boxRenderers2.js:179:24)
at _render_it (http://localhost:8100/modules/dashboard/dashboard.js:246:30)
at $scope.showBox.deferred.promise.then.workarea.showChild (http://localhost:8100/modules/dashboard/dashboard.js:310:17)
at processQueue (http://localhost:8100/lib/ionic/js/ionic.bundle.js:21888:27)
at http://localhost:8100/lib/ionic/js/ionic.bundle.js:21904:27
at Scope.$get.Scope.$eval (http://localhost:8100/lib/ionic/js/ionic.bundle.js:23100:28)
And that funky behavior is gone ! The chart appears if I click to redraw it out of cached data, hides when click again, and all good. No more bland background colored div to stare at!!.
However, if I change the watch to divs.chart_div.on('shown', function(){
then the event handler is not called and the chart does not appear when rendered out of cached data.
I wonder what's going on.
Looks like something (might be the armchart library?) is expecting jQuery to be available to bind to an event. Angular comes with jqLite, a stripped down version of jQuery so that's why you're getting that exception.
I'm guessing it's something here on this line.
at Object.makePieChart (http://localhost:8100/common/services/graphinghelperService.js:528:34)
Use the full version of jQuery instead to take care of that problem: http://www.bennadel.com/blog/2752-using-jquery-instead-of-jqlite-in-angularjs.htm