I have an angular app to create a dashboard with charts in items. The dashboard layout is based on angular-gridster, charts on n3-charts. When i want to display a chart in a gridster item, i use the following directive :
<div class="widget-main">
<div ng-show="widget.loadingData" class="loader">Loading...</div>
<widgetContentElement ng-show="!widget.loadingData"></widgetContentElement>
</div>
In the widgetContentElement i have the following template
<div id="linechartParent">
<linechart data="chartData" options="chartOptions" mode="" width="" height=""></linechart>
</div>
My issue is that as soon as the chart is displayed in Safari, it does not fit the container. In Chrome/Safari it tries to fit it. The width is ok but the height is increasing by 25px steps until i get the following error :
Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!
Watchers fired in the last 5 iterations: [[{"msg":"options","newVal":{"axes":{"x":{"key":"x","type":"date"},"y":{"type":"linear","ticks":5,"innerTicks":true,"grid":true}},"series":[{"y":"value","color":"steelblue","thickness":"1px","type":"area","striped":true,"label":"Pouet","axis":"y","dotSize":2,"id":"series_0"}],"lineMode":"linear","tension":0.7,"tooltip":{"mode":"scrubber"},"drawLegend":true,"drawDots":true,"hideOverflow":false,"columnsHGap":5,"stacks":[],"margin":{"top":20,"right":50,"bottom":60,"left":50,"width":1157,"height":775}},"oldVal":{"axes":{"x":{"key":"x","type":"date"},"y":{"type":"linear","ticks":5,"innerTicks":true,"grid":true}},"series":[{"y":"value","color":"steelblue","thickness":"1px","type":"area","striped":true,"label":"Pouet","axis":"y","dotSize":2,"id":"series_0"}],"lineMode":"linear","tension":0.7,"tooltip":{"mode":"scrubber"},"drawLegend":true,"drawDots":true,"hideOverflow":false,"columnsHGap":5,"stacks":[],"margin":{"top":20,"right":50,"bottom":60,"left":50,"width":1157,"height":625}}}],[{"msg":"options","newVal":"...","oldVal":{"axes":{"x":{"key":"x","type":"date"},"y":{"type":"linear","ticks":5,"innerTicks":true,"grid":true}},"series":[{"y":"value","color":"steelblue","thickness":"1px","type":"area","striped":true,"label":"Pouet","axis":"y","dotSize":2,"id":"series_0"}],"lineMode":"linear","tension":0.7,"tooltip":{"mode":"scrubber"},"drawLegend":true,"drawDots":true,"hideOverflow":false,"columnsHGap":5,"stacks":[],"margin":{"top":20,"right":50,"bottom":60,"left":50,"width":1157,"height":650}}}],[{"msg":"options","newVal":"...","oldVal":{"axes":{"x":{"key":"x","type":"date"},"y":{"type":"linear","ticks":5,"innerTicks":true,"grid":true}},"series":[{"y":"value","color":"steelblue","thickness":"1px","type":"area","striped":true,"label":"Pouet","axis":"y","dotSize":2,"id":"series_0"}],"lineMode":"linear","tension":0.7,"tooltip":{"mode":"scrubber"},"drawLegend":true,"drawDots":true,"hideOverflow":false,"columnsHGap":5,"stacks":[],"margin":{"top":20,"right":50,"bottom":60,"left":50,"width":1157,"height":675}}}],[{"msg":"options","newVal":"...","oldVal":{"axes":{"x":{"key":"x","type":"date"},"y":{"type":"linear","ticks":5,"innerTicks":true,"grid":true}},"series":[{"y":"value","color":"steelblue","thickness":"1px","type":"area","striped":true,"label":"Pouet","axis":"y","dotSize":2,"id":"series_0"}],"lineMode":"linear","tension":0.7,"tooltip":{"mode":"scrubber"},"drawLegend":true,"drawDots":true,"hideOverflow":false,"columnsHGap":5,"stacks":[],"margin":{"top":20,"right":50,"bottom":60,"left":50,"width":1157,"height":700}}}],[{"msg":"options","newVal":"...","oldVal":{"axes":{"x":{"key":"x","type":"date"},"y":{"type":"linear","ticks":5,"innerTicks":true,"grid":true}},"series":[{"y":"value","color":"steelblue","thickness":"1px","type":"area","striped":true,"label":"Pouet","axis":"y","dotSize":2,"id":"series_0"}],"lineMode":"linear","tension":0.7,"tooltip":{"mode":"scrubber"},"drawLegend":true,"drawDots":true,"hideOverflow":false,"columnsHGap":5,"stacks":[],"margin":{"top":20,"right":50,"bottom":60,"left":50,"width":1157,"height":725}}}]]
http://errors.angularjs.org/1.4.8/$rootScope/infdig?p0=10&p1=%5B%5B%7B%22ms…2C%22left%22%3A50%2C%22width%22%3A1157%2C%22height%22%3A725%7D%7D%7D%5D%5D
at angular.js:68
at Scope.$digest (angular.js:15934)
at Scope.$apply (angular.js:16160)
at done (angular.js:10589)
at completeRequest (angular.js:10787)
at XMLHttpRequest.requestLoaded (angular.js:10728)(anonymous function) @ angular.js:12520(anonymous function) @ angular.js:9292Scope.$apply @ angular.js:16162done @ angular.js:10589completeRequest @ angular.js:10787requestLoaded @ angular.js:10728
angular.js:68 Uncaught Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!
Watchers fired in the last 5 iterations: [[{"msg":"options","newVal":{"axes":{"x":{"key":"x","type":"date"},"y":{"type":"linear","ticks":5,"innerTicks":true,"grid":true}},"series":[{"y":"value","color":"steelblue","thickness":"1px","type":"area","striped":true,"label":"Pouet","axis":"y","dotSize":2,"id":"series_0"}],"lineMode":"linear","tension":0.7,"tooltip":{"mode":"scrubber"},"drawLegend":true,"drawDots":true,"hideOverflow":false,"columnsHGap":5,"stacks":[],"margin":{"top":20,"right":50,"bottom":60,"left":50,"width":1157,"height":775}},"oldVal":{"axes":{"x":{"key":"x","type":"date"},"y":{"type":"linear","ticks":5,"innerTicks":true,"grid":true}},"series":[{"y":"value","color":"steelblue","thickness":"1px","type":"area","striped":true,"label":"Pouet","axis":"y","dotSize":2,"id":"series_0"}],"lineMode":"linear","tension":0.7,"tooltip":{"mode":"scrubber"},"drawLegend":true,"drawDots":true,"hideOverflow":false,"columnsHGap":5,"stacks":[],"margin":{"top":20,"right":50,"bottom":60,"left":50,"width":1157,"height":625}}}],[{"msg":"options","newVal":"...","oldVal":{"axes":{"x":{"key":"x","type":"date"},"y":{"type":"linear","ticks":5,"innerTicks":true,"grid":true}},"series":[{"y":"value","color":"steelblue","thickness":"1px","type":"area","striped":true,"label":"Pouet","axis":"y","dotSize":2,"id":"series_0"}],"lineMode":"linear","tension":0.7,"tooltip":{"mode":"scrubber"},"drawLegend":true,"drawDots":true,"hideOverflow":false,"columnsHGap":5,"stacks":[],"margin":{"top":20,"right":50,"bottom":60,"left":50,"width":1157,"height":650}}}],[{"msg":"options","newVal":"...","oldVal":{"axes":{"x":{"key":"x","type":"date"},"y":{"type":"linear","ticks":5,"innerTicks":true,"grid":true}},"series":[{"y":"value","color":"steelblue","thickness":"1px","type":"area","striped":true,"label":"Pouet","axis":"y","dotSize":2,"id":"series_0"}],"lineMode":"linear","tension":0.7,"tooltip":{"mode":"scrubber"},"drawLegend":true,"drawDots":true,"hideOverflow":false,"columnsHGap":5,"stacks":[],"margin":{"top":20,"right":50,"bottom":60,"left":50,"width":1157,"height":675}}}],[{"msg":"options","newVal":"...","oldVal":{"axes":{"x":{"key":"x","type":"date"},"y":{"type":"linear","ticks":5,"innerTicks":true,"grid":true}},"series":[{"y":"value","color":"steelblue","thickness":"1px","type":"area","striped":true,"label":"Pouet","axis":"y","dotSize":2,"id":"series_0"}],"lineMode":"linear","tension":0.7,"tooltip":{"mode":"scrubber"},"drawLegend":true,"drawDots":true,"hideOverflow":false,"columnsHGap":5,"stacks":[],"margin":{"top":20,"right":50,"bottom":60,"left":50,"width":1157,"height":700}}}],[{"msg":"options","newVal":"...","oldVal":{"axes":{"x":{"key":"x","type":"date"},"y":{"type":"linear","ticks":5,"innerTicks":true,"grid":true}},"series":[{"y":"value","color":"steelblue","thickness":"1px","type":"area","striped":true,"label":"Pouet","axis":"y","dotSize":2,"id":"series_0"}],"lineMode":"linear","tension":0.7,"tooltip":{"mode":"scrubber"},"drawLegend":true,"drawDots":true,"hideOverflow":false,"columnsHGap":5,"stacks":[],"margin":{"top":20,"right":50,"bottom":60,"left":50,"width":1157,"height":725}}}]]
http://errors.angularjs.org/1.4.8/$rootScope/infdig?p0=10&p1=%5B%5B%7B%22ms…2C%22left%22%3A50%2C%22width%22%3A1157%2C%22height%22%3A725%7D%7D%7D%5D%5D(anonymous function) @ angular.js:68Scope.$digest @ angular.js:15934Scope.$apply @ angular.js:16160done @ angular.js:10589completeRequest @ angular.js:10787requestLoaded @ angular.js:10728
What is strange is that if i go on a CSS sliding menu, then the chart is resized well and i can use the chart (zoom, slide, etc.) but only on Chrome / Firefox. On Safari the chart is fully functional without a crash but never resized
I do not understand why it's different from Safari and Chrome (at least) as i thought they were using the same webkit (but maybe not the same JS engine)
Any help or tip to debug that is welcome ! Thank you
Ok found that it seems to come from watchers on n3-charts options.
In the main js file replace
options = _u.sanitizeOptions(scope.options, attrs.mode);
with
options = _u.sanitizeOptions(angular.copy(scope.options), attrs.mode);