Update Line Chart V2

by Shabeer Sheffa

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.5/nv.d3.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.5/nv.d3.css">
<button id="update">Refresh Page</button>
<br>
<div id="economyChart">
    <svg></svg>
</div>

CSS

#economyChart {
    height: 400px;
}

JavaScript

// Maintian an instance of the chart and 
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;
});

function update() {
    var data = economyData();
		console.log('Test', data);
    //d3.select("body").selectAll('#economyChart svg').datum(data).transition().duration(500);
    
    console.log(d3.select("body").selectAll('#economyChart svg'))
    
    // 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);

// Data Calc
function economyData() {
    // Your economyData code
    // ....
    var numRounds = 10;

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

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

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

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

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

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

        if (i == 0) {
            economyValue = 1;
        }...