Troubleshooting issue: AngularJS NVD3 line chart directive does not refresh after data update (not updating in real time)

I am currently facing an issue with the nvd3-line-chart directive in my AngularJS application. The chart does not redraw when I change the underlying model...

As a newcomer to AngularJS, there may be something obvious that experienced programmers will notice right away, but it's driving me crazy :-)

After searching on stackoverflow for similar problems, I only found solutions related to more complex issues like realtime charting. All I want is to update the data once when a link is clicked...

I have created a Plunker example here:

http://plnkr.co/edit/TkyHhbfi0vNw1FJ6mYZC?p=preview

The directive is being used as follows:

<nvd3-line-chart data="exampleData" showXAxis="true" showYAxis="true"
  tooltips="true" xAxisTickValues="xAxisTicks()"
  xAxisTickFormat="xAxisTickFormat()"
  yAxisTickFormat="yAxisTickFormat()" interactive="true" objectEquality="true">
</nvd3-line-chart>

(I also tried setting objectEquality to false, but the behavior remained the same)...

In my JavaScript code, I set new content in a subfunction (callback from HTTP transfer) using the following:

$scope.exampleData = data;

To ensure everything is being called correctly, I also added a label (xxx) and modified it in the function call from click to yyy which worked - so data binding and scope availability seem to be okay?

The same function is used for initial data fill, which works without any issues...

Can anyone provide some insight into this problem?

By the way, I came across a functioning example but can't pinpoint the difference (aside from them calling it from native JavaScript, requiring manual updating of the component, which didn't work for me since I'm already in an Angular update cycle):

http://plnkr.co/edit/4ORCLW?p=preview

javascriptangularjsplunkerangularjs-nvd3-directives

Answer №1

It seems that there is an issue where two instances of the controller ExampleCtrl have been created:

<div ng-controller="ExampleCtrl">
    <nvd3-line-chart data="exampleData" showXAxis="true" showYAxis="true"
        tooltips="true" xAxisTickValues="xAxisTicks()"
        xAxisTickFormat="xAxisTickFormat()"
        yAxisTickFormat="yAxisTickFormat()" interactive="true" objectEquality="true">
    </nvd3-line-chart>
</div>
<div ng-controller="ExampleCtrl">
    <div ng-click="doClick()">{{mylabel}}</div>
</div>

This has led to the creation of two separate scopes, causing issues when refreshing data. The scope not linked to the chart gets updated instead of the one associated with it.

To fix this problem, consider modifying your code as follows (I changed the clickable div to a button for better user interface design):

<div ng-controller="ExampleCtrl">
    <nvd3-line-chart data="exampleData" showXAxis="true" showYAxis="true"
        tooltips="true" xAxisTickValues="xAxisTicks()"
        xAxisTickFormat="xAxisTickFormat()"
        yAxisTickFormat="yAxisTickFormat()" interactive="true" objectEquality="true">
    </nvd3-line-chart>
    <button ng-click="doClick()">{{mylabel}}</button>
</div>

You can view the fixed version on Plunker here http://plnkr.co/edit/b6ZhMqEU84vEctkOPqQh?p=preview

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

Deleting table rows after an object has been removed in AngularJSNote: Using

My AngularJS application retrieves a list of JSON objects and displays them in a table. Each row in the table includes a "Delete" button that triggers an ng-click method: <td><a ng-click="testButton()" class="btn btn-danger btn-mini">Delete&l ...

jqueryangularjs

Alert-Enabled Random Number Generation Tool

I'm struggling to create a program that randomly generates a number between 1 and 20. If the number is less than 10, it should display "fail," and if it's greater than 10, it should display "success." I can't seem to figure out where I went ...

javascripthtmlrandomnumbers

Activate the Keypress event to update the input value in React upon pressing the Enter

I am facing an issue where I need to reset the value of an input using a method triggered by onPressEnter. Here is the input code: <Input type="text" placeholder="new account" onPressEnter={(event) => this.onCreateAccount(event)}> < ...

javascriptreactjstypescriptantd

Editable content area: Maintain and restore cursor position when placed on a blank line

While working with a contenteditable div and constantly updating the HTML as the user types, I am facing the challenge of saving and restoring the caret position. I came across a helpful solution provided by Tim Down on a similar issue, which I found on S ...

javascripthtmlcontenteditable

Achieving the validation with a bold red border

Hi, I'm currently learning React and I've been using regular JavaScript to validate my form. Here's a snippet of how I'm doing it: <TextField label="Title" variant="outlined" si ...

javascriptreactjsreact-reduxmaterial-uidom-events

"Utilizing d3 to parse and track variables within JSON data

To calculate the number of occurrences of s1, s2, and s0 in JSON data and use this information to plot a multiline chart with date (path of date is as follows reviews_details>>variable vf of JSON) on the X-axis versus the number of reviews (s1/s0/s2 ...

javascriptjsond3.js

What is the best method for showcasing various content using a uniform accordion style in React?

What is the most efficient way to display various content within multiple accordions? view image description here This is the current approach I am taking in my project, where shipping information and delivery options will involve different textboxes, labe ...

javascriptcssreactjstwitter-bootstrap

How to effectively filter nested arrays within Mongoose Populate function

I received the following object from a Mongoose query: let systems = [ { "maxUserLevel": 1, "subsystems": [ { "sections": [], "name": "apple" ...

javascriptnode.jsmongoosemongoose-populate

Loading a Vue.js template dynamically post fetching data from Firebase storage

Currently, I am facing an issue with retrieving links for PDFs from my Firebase storage and binding them to specific lists. The problem arises because the template is loaded before the links are fetched, resulting in the href attribute of the list remainin ...

javascriptfirebasevue.jsfirebase-storage

How can I modify the dot colors on a graph using chart.js?

Need assistance with changing the color of graph data points https://i.sstatic.net/QGJBv.png Here is my JavaScript code snippet I have successfully created a graph using chart.js. However, I now want to differentiate data points by displaying different c ...

javascriptangularjschartschart.js

Retrieving dynamic id values from input fields using jQuery

Is there a way to retrieve the values from input fields with changing IDs in a jQuery function? <input type="text" id="a_8" name="a_8" value="12"> <input type="text" id="b_8" name="b_8" value="22"> <button type="button" class="btn btn-suc ...

javascriptjqueryajax

Using TypeScript controllers to inject $scope

Currently, I am in the process of creating my initial typescript controller and encountering a slight challenge in comprehending how to utilize $scope effectively in order to reference elements within various code blocks. Below is the relevant snippet of c ...

angularjstypescript

Assorted presentation of list items in HTML tags

I am working on creating a poll and I was wondering if there is a way to display the questions randomly each time the page is visited. I'm thinking of storing the questions in a PHP or JavaScript array. Can anyone recommend a good tutorial that can he ...

phpjavascriptjqueryajax

Connection error: API is down

The current issue I am facing with the application I'm developing is that it is not responding with the API address for weather data. Despite getting a response from Ajax, the specific weather API I am trying to call remains unresponsive. I have exha ...

javascriptajax

Execute an executable file with elevated permissions using Node.js

I'm looking to run an .exe file as an administrator using Node. I attempted the following code, but it's not working: exec('runas /user:Administrator "app.exe"', function(err, data) { console.log(err) ...

javascriptnode.jschild-processexecute

Why does Vuetify/Javascript keep throwing a ReferenceError stating that the variable is undefined?

I'm currently developing in Vuetify and I want to incorporate a javascript client for Prometheus to fetch data for my application. You can find the page Here. Despite following their example, I keep encountering a ReferenceError: Prometheus is not def ...

javascriptvue.jsvuetify.js

Using jQuery's $.Deferred in conjunction with the window object's top.postMessage()

I am having trouble understanding how to effectively use $.Deferred. I currently have a situation similar to window.top.postMessage(mystring, myorigin); This works without any issues. I don't need assistance with sending/receiving postMessage What ...

javascriptjquerycallbackdeferredpostmessage

Botkit corner flaw

I'm having trouble updating a dependent package included in Botkit. When I run npm install on the package.json provided below, Npm alerts me that the hoek package is vulnerable. I attempted to resolve this by running npm audit fix but it did not wor ...

javascriptnpmbotkit

Modification of a CSS element

The CSS I am working with looks like this: .cls .imageX { float:left; } .cls .imageY { float:right; } It is currently being used on a page in this way: <div class="cls"> <a href="" class="imageX"><img src="left.png"/></a> &l ...

javascriptjqueryhtmlcss

Importing data from an external file into an array using AngularJS

Hey there, I'm new here on Stack and hoping someone can lend a hand because I've hit a roadblock! I'm working with an AngularJS script that generates multiple icons using data from a simple array. Each icon is linked to a YouTube video. Th ...

javascriptarraysangularjsjson