ng2-nvd3 realtime line chart update

Question

I just struggling with realtime line chart update in ng2-nvd3, my data sets is fine but no changes in chart when data is coming relatime.

please find the solution, your help will be appreciated.

This is my Html code

    <nvd3[options]="options"[data] = "data" > </nvd3>

Its my Javascript code

export class AppComponent implements OnInit {
    options;
    data;
    chartType;

    ngOnInit() {

        this.options = {
            chart: {
                type: 'lineChart',
                height: 450,
                margin: {
                    top: 20,
                    right: 20,
                    bottom: 40,
                    left: 55
                },
                x: function (d) { return d.x; },
                y: function (d) { return d.y; },
                useInteractiveGuideline: true,
                xAxis: {
                    axisLabel: 'Time (ms)'
                },
                yAxis: {
                    axisLabel: 'Voltage (v)',
                    tickFormat: function (d) {
                        return d3.format('.02f')(d);
                    },
                    axisLabelDistance: -10
                }
            }
        };

        this.sinAndCos();
    }


    sinAndCos() {
        var sin = [], sin2 = [],
            cos = [];

        //Data is represented as an array of {x,y} pairs.
        for (var i = 0; i < 100; i++) {
            sin.push({ x: i, y: Math.sin(i / 10) });
        }

        //Line chart data should be sent as an array of series objects.
        this.data = [
            {
                values: sin,      //values - represents the array of {x,y} data points
                key: 'Sine Wave', //key  - the name of the series.
                color: '#ff7f0e'  //color - optional: choose your own line color.
            }
        ];

        var x = i;
        setInterval(() => {

            this.data[0].values.push({ x: i, y: Math.sin(i / 10), series: 0 })

            i++;
        }, 500);



    }
}

score 0 · Answer 1 · answered Jun 03 '18 at 15:16

In your HTML, add the config property.

nvd3[options]="options" [data]="data" [config]="configVariable" >

In your javascript file, create the config variable, as let configVariable = { refreshDataOnly: true };

For more options you can follow the documentation here, http://krispo.github.io/angular-nvd3/#/quickstart

I know its been a long time since this question was asked, but i am answering this question now as the mentioned answer worked for me, and may be someone working currently on this nvd3 library may find it helpful.

ng2-nvd3 realtime line chart update

1 Answers1