CODEWITHSUNDEEP
javascriptjquerysvgd3.jsnvd3.js
GoT
GoT

Reputation: 550

nvd3 / svg not getting updated with new data

I have two svg divs added in my html body 

<div id="tag1"><svg></svg></div>
<div id="tag2"><svg></svg></div>
<body>

On every form submit, I call the below code to create a nvd3 graph. But,I am seeing that the first call works but, the graph doesn't change for the subsequent form submit calls(On every form submit, url is different and hence data is different. I have verified that the data argument to addGraph function is populated properly. But, svg contents are not re-populated even if data to addGraph function is different.

newChart = d3.json(url, function(error, data) {
    nv.addGraph(function() {
        var chart = nv.models.discreteBarChart()
          .staggerLabels(true)
          .tooltips(true)
          .showValues(false)
          .showXAxis(false)
          .color(['#1f77b4'])

        d3.select('#tag1 svg')
          .datum(data['x])
          .transition().duration(500)
          .call(chart)
          ;

        nv.utils.windowResize(chart.update);

        return chart;
    });
    nv.addGraph(function() {
      var chart = nv.models.pieChart()
          .showLabels(true);

        d3.select("#tag2 svg")
          .datum(data['y'])
          .transition().duration(1200)
          .call(chart);

        nv.utils.windowResize(chart.update);

      return chart;
    });

Upvotes: 0

Views: 572

Answers (1)

alaknis
alaknis

Reputation: 26

Your code should work fine. Confirm if you really are getting different data by doing something like

d3.json(url, function(error, data) {
    console.log(data);
}

Check if what you get is different each time you submit your form.

Also in case you simply copied this code from your js file, notice the .datum() of your first chart has a missing '

Upvotes: 1

Related Questions