AngularJS, Gridster, and n3-charts are causing a $digest error in Chrome and Firefox, but not in Safari

My project involves developing an Angular app to generate a dashboard featuring various charts within gridster items. The dashboard layout is structured using Angular-gridster, while the charts utilize n3-charts. When attempting to display a chart within a gridster item, I implement the following directive:

<div class="widget-main">
    <div ng-show="widget.loadingData" class="loader">Loading...</div>
    <widgetContentElement ng-show="!widget.loadingData"></widgetContentElement>
</div>

Within the widgetContentElement, the template includes:

<div id="linechartParent">
    <linechart data="chartData" options="chartOptions" mode="" width="" height=""></linechart>
</div>

One challenging issue arises when displaying the chart in Safari, where it fails to adjust to fit the container properly. While Chrome and Firefox attempt to adjust the width, the height of the chart increases in 25px increments until an error is triggered:

Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!
Watchers fired in the last 5 iterations: [[{"msg":"options","newVal":...
    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)...
angular.js:68 Uncaught Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!
Watchers fired in the last 5 iterations: [[{"msg":"options","newVal":...
    http://errors.angularjs.org/1.4.8/$rootScope/infdig?p0=10&p1=%5B%5B%7B%22ms…
    at angular.js:68Scope.$digest @ angular.js:15934Scope.$apply @ angular.js:16160done @ angular.js:10589completeRequest @ angular.js:10787requestLoaded @ angular.js:10728

Interestingly, when using a CSS sliding menu, the chart is properly resized on Chrome and Firefox, allowing for zooming, sliding, etc. However, on Safari, the chart remains static and does not resize. I find this discrepancy between browsers perplexing, considering they theoretically utilize the same webkit, although potentially not the same JS engine.

If anyone has insights or suggestions on how to troubleshoot this issue, I would greatly appreciate it! Thank you.

cssangularjsgridstern3-charts

Answer №1

After some investigation, it appears that the issue stems from the watchers on n3-charts options.

To resolve this, modify the main js file by replacing:

options = _u.sanitizeOptions(scope.options, attrs.mode);

with:

options = _u.sanitizeOptions(angular.copy(scope.options), attrs.mode);

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to add an external CSS file specifically for my custom Vue component?

Currently, I am working on a vue js component that I plan on uploading to npm. However, I have encountered an issue: Whenever I import a third-party CSS CDN into my component, it ends up applying the styles to the entire HTML instead of just my component ...

cssvue.jsnpmvue-component

Setting isolated scope parameters can be done in a variety of ways

Here is the directive definition I have created: myApp.directive('myCategory', [function () { return { restrict: 'E', scope: { category: '=someCategory', }, templateUrl: 'category.html', ...

angularjs

AngularJS: The total is the accumulation of all corresponding objects

In my project, I’m dealing with an array of Requests that each contain an array of tasks. The goal is to update the duration field of each Request based on the sum of durations of its associated tasks and ensure that these changes are responsive to any u ...

angularjs

Utilizing CSS flex-end to position images

I am facing an issue with aligning the last item in my container named section-a. The height of the container is set to 100vh and it contains 3 items. I have tried using the property align-self:flex-end, but there are no visible changes. Can anyone help me ...

htmlcssflexbox

Encountering a problem when trying to set the value in the controller and receiving unexpected output from the console

Attempting to assign a value to an object and show it in the view, but encountering an issue. When setting the vm.order.info.when to 'Any Value' and logging the vm.order.info, the value appears correct at first glance. However, upon inspecting th ...

javascriptangularjs

Turn off browser feature that automatically adds overflow:hidden on touch screen devices

Encountering a problem with browsers (potentially Chrome) adding CSS rules on touch-enabled devices. In a website developed for a client (specifically for Chrome), the scroll bars disappear on elements when accessed from their ultrabooks. The client still ...

htmlcssgoogle-chromebrowsertouch

Issue with Angular directive failing to update object within ng-repeat loop

I am working on a directive that is responsible for displaying a tree of folders, including the ability to show subfolders. The directive uses recursion to handle the display of subfolders. <div ng-click="toggleOpen()" class="action"> <span ...

javascriptangularjs

Is there a way to transfer an element from one row to another using Bootstrap?

Can the grid layout transition smoothly from a desktop view to a mobile view using Bootstrap 4 or pure CSS flex classes? Desktop view: Mobile view : Currently, I have a solution in place but I want to avoid repeating content in two different places. Is ...

cssbootstrap-4flexbox

Maintaining the active style of Asp.NET 4.0 Menu control even after the mouse is released

Utilizing a standard asp.net menu in an asp.net 4.0 web application, this setup is for a standard web application and not any version of MVC applications currently available. The issue at hand is relatively straightforward. CSS styles are applied to the d ...

asp.netcssmenupseudo-class

Exploring ways to customize the input of primary key and _id in mongoose to be optional

I am looking to create a primary key in MongoDB that does not require user input, but is automatically generated. I have tried using {type: ObjectId, required: false}, but it did not work because I left the primary key empty. Is there another way to make t ...

angularjsnode.jsmongodbmongoose

An effective way to prevent right-clicking on iframes across all websites

I am facing an issue with disabling right click for the iframe. I've successfully disabled it for the default URL of the IFrame, but when displaying any other webpage, the right click remains usable. Below are the sample codes I have used: document.o ...

javascriptjqueryhtmlcssasp.net

Angular's ng-class directive functions correctly with an input element of type "text", but it does not

Just started learning angular and I've hit a roadblock. This is the input for my form: <div class="form-group" ng-class="{'not-empty': mailingzip.value}"> <input type="number" name="mailingzip" ng-minlength="5" ng-maxlen ...

angularjsforms

Fluid imitation pillars with a decorative outer edge

Looking to create a modern, sleek 2-column HTML5 interface with a left sidebar and main content area on the right. Backwards compatibility is not an issue as all users will be using the latest versions of Chrome or FF. The goal is to give the sidebar a ba ...

htmlcss

Ways to divide background color in half using CSS

Looking for some help with CSS - I want to split an HTML page into two sections, with a background and text/login form on top. Can anyone provide sample CSS and HTML code? This is what I've tried so far in CSS: .logindiv { height: 200px; width: ...

htmlcssbackground

Exploring the functionalities of AngularJS UI Router's parameters

Currently, I am developing an app using Ionic that pulls dynamic text from an online admin site via JSON. My goal now is to implement dynamic links (or states) within the app. Specifically, I have a list of substances, each with different information. Whe ...

angularjsjsondynamicionic-frameworkui-sref

Changing the size of the logo as you scroll through the page

I have implemented the following code to resize the logo as I scroll down the page. $(document).on('scroll', function() { if ($(document).scrollTop() >= 10) { $('.logo img').css('width', '50px'); } else ...

javascriptjqueryhtmlcss

Interactive image grid with adjustable description field per image upon selection

My goal is to create a grid of images with a single text field below the grid. This text field should display the description of the image that was last clicked. The grid is implemented using floating divs within a main div, as shown in the code snippet be ...

javascriptjqueryhtmlcss

Display a video modal upon page load, allowing users the option to click a button to reopen the modal

Looking for a way to make a video modal automatically open on page load and allow users to reopen it by clicking a button? Here's a snippet of code that might help you achieve that: HTML <html> <head> <link rel="stylesheet ...

javascripthtmlcssbootstrap-4bootstrap-modal

Resolving the issue of updating users in an ASP.NET Web API

When attempting to update a user function in the backend, I encountered an error: I received a System.NullReferenceException stating that 'The object reference is not defined to an instance of an object.' The issue stemmed from users being nul ...

angularjsasp.net-web-apiasp.net-identity

AngularJS HTTP requests returning a 400 error code

I am encountering a 400 error when making a $http request to the YouTube API using AngularJS. I have checked and ensured that all the necessary parameters are included in my request. angular.module('video-player') .service('youTube', ...

angularjsyoutube-api