0

I'm working with Nvd3 charts from the examples from their official website. Now I want a line chart to update periodically based on data sent from server but I couldn't found any useful Example for this on internet.

I have created a function which re-draws the chart when new data is arrived but i want to append every new point to the existing chart (like we can do in highcharts) but i'm stuck. Here is the code I'm using for Updating the chart.

var data = [{
    "key" : "Long",
    "values" : getData()
}];
var chart;

function redraw() {

    nv.addGraph(function() {
        var chart = nv.models.lineChart().margin({
            left : 100
        })
        //Adjust chart margins to give the x-axis some breathing room.
        .useInteractiveGuideline(true) //We want nice looking tooltips and a guideline!
        .transitionDuration(350) //how fast do you want the lines to transition?
        .showLegend(true) //Show the legend, allowing users to turn on/off line series.
        .showYAxis(true) //Show the y-axis
        .showXAxis(true);

        //Show the x-axis
        chart.xAxis.tickFormat(function(d) {
            return d3.time.format('%x')(new Date(d))
        });

        chart.yAxis.tickFormat(d3.format(',.1%'));

        d3.select('#chart svg').datum(data)
        //.transition().duration(500)
        .call(chart);

        nv.utils.windowResize(chart.update);
        return chart;
    });
}

function getData() {
    var arr = [];
    var theDate = new Date(2012, 01, 01, 0, 0, 0, 0);
    for (var x = 0; x < 30; x++) {
        arr.push({
            x : new Date(theDate.getTime()),
            y : Math.random() * 100
        });
        theDate.setDate(theDate.getDate() + 1);
    }
    return arr;
}

setInterval(function() {
    var long = data[0].values;
    var next = new Date(long[long.length - 1].x);
    next.setDate(next.getDate() + 1)
    long.shift();
    long.push({
        x : next.getTime(),
        y : Math.random() * 100
    });
    redraw();
}, 1500);
shabeer90
  • 5,161
  • 4
  • 47
  • 65
Omar Bahir
  • 1,237
  • 5
  • 20
  • 48
  • possible duplicate of [NVD3 - How to refresh the data function to product new data on click](http://stackoverflow.com/questions/24689157/nvd3-how-to-refresh-the-data-function-to-product-new-data-on-click) – shabeer90 Aug 14 '14 at 10:27
  • This is not em asking brother. I'm looking to append data to the existing chart , not redrawing chart with the new data. The code I pasted is already doing it. Please read the question carefully. – Omar Bahir Aug 16 '14 at 11:08
  • Well, in your code you're **re-drawing your entire chart** at every interval. And if you have a close look at my code, I've made `chartData` to contain the SVG selection and its data. So if you ever want to update the data, that's what you will have to call like in my `update()` function to update the chart data. Its a more efficient way of updating the chart. Just have a look at your browser console, it will be printing the NVD3 load time during every interval :| – shabeer90 Aug 18 '14 at 08:54
  • I'm assuming your looking for something like a real time chart update, have a look at [this question](http://stackoverflow.com/questions/15330390/real-time-line-graph-with-nvd3-js) – shabeer90 Aug 18 '14 at 09:30

0 Answers0