NVD3 - How to refresh the data function to product new data on click

Question

I have a line chart and every time the page refresh it changes the data, which is great but I need to to refresh by a user click. This is because there will eventually be other input fields on the page and refreshing the page would destroy their current session.

jsfiddle - http://jsfiddle.net/darcyvoutt/dXtv2/

Here is the code setup to create the line:

function economyData() {  

    // Rounds
    var numRounds = 10;

    // Stability of economy
    var stable = 0.2;
    var unstable = 0.6;
    var stability = unstable;

    // Type of economy
    var boom = 0.02;
    var flat = 0;
    var poor = -0.02;
    var economyTrend = boom;

    // Range    
    var start = 1;
    var max = start + stability;
    var min = start - stability;

    // Arrays
    var baseLine = [];
    var economy = [];

    // Loop
    for (var i = 0; i < numRounds + 1; i++) {    

      baseLine.push({x: i, y: 1});

      if (i == 0) {

        economyValue = 1;

      } else {

        var curve = Math.min(Math.max( start + ((Math.random() - 0.5) * stability), min), max);        

        economyValue = Math.round( ((1 + (economyTrend * i)) * curve) * 100) / 100;

      }

      economy.push({x: i, y: economyValue});

    }

    return [
      {
        key: 'Base Line',
        values: baseLine   
      },
      {
        key: 'Economy',
        values: economy  
      }
    ];
  }

Here is what I tried to write but failed for updating:

function update() {
      sel = svg.selectAll(".nv-line")
      .datum(data);

      sel
        .exit()
        .remove();

      sel
        .enter()
        .append('path')
          .attr('class','.nv-line');

      sel
        .transition().duration(1000);

  };

  d3.select("#update").on("click", data);  

Solution

Here is what I did differently with your code.

// Maintian an instance of the chart 
var chart; 

// Maintain an Instance of the SVG selection with its data
var chartData;

nv.addGraph(function() {
    chart = nv.models.lineChart().margin({
        top : 5,
        right : 10,
        bottom : 38,
        left : 10
    }).color(["lightgrey", "rgba(242,94,34,0.58)"])
        .useInteractiveGuideline(false)
        .transitionDuration(350)
        .showLegend(true).showYAxis(false)
        .showXAxis(true).forceY([0.4, 1.6]);

    chart.xAxis.tickFormat(d3.format('d')).axisLabel("Rounds");
    chart.yAxis.tickFormat(d3.format('0.1f'));

    var data = economyData();

    // Assign the SVG selction
    chartData = d3.select('#economyChart svg').datum(data);
    chartData.transition().duration(500).call(chart);

    nv.utils.windowResize(chart.update);

    return chart;
});

Here's how the update() function looks like:

function update() {
    var data = economyData();

    // Update the SVG with the new data and call chart
    chartData.datum(data).transition().duration(500).call(chart);
    nv.utils.windowResize(chart.update);
};

// Update the CHART
d3.select("#update").on("click", update);

Here is a link to a working version of your code.

Hope it helps.

Comments

[dvoutt]

Thanks! Spot. Even worked with some new code I wrote.

[bwarren2]

Note: I can't get the example to work. Cloning and toying locally, I get an error about transitionDuration (for which it seems the syntax has changed). Even with that removed I get nothing on the fiddle (despite working locally).

[ajaybc]

@bwarren2 I have updated shabeer90 's code to make it working again. Check it out at : jsfiddle.net/eu26dLcx

[ElJeffe]

I get a bad memory leak when you bump up the data a bit and set it to auto-update. jsfiddle.net/1hjyrr43/1

[shabeer90]

@JeffG : I have not been able to replicate the memory leak in both the fiddles.

[ElJeffe]

@shabeer90 I was using Chrome on OSX and watching it in their task manager. Doesnt take long for it to reach into the gigs.

[ElJeffe]

@shabeer90 false alarm - it is a problem, but it seems tied to a Chrome extension. I disable the extension and the memory leak goes away. I'm not going to say what extension yet as I don't know if it's a security problem and want to let them know first.