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 ot

Answer 1

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.