[Chartjs]-Show data dynamically in line chart

2👍

test_data = {
    '1222': {
        joy: 66.5057373046875,
        fear: 1.0003513832343742,
        anger: 2.000018799044483,
        disgust: 3.004251452162862,
        sadness: 4.0001135088386945,
        contempt: 5.001299204188399,
        surprise: 6.203749045729637
    },
    '2238': {
        joy: 97.06363677978516,
        fear: 17.500137131541123,
        anger: 27.00000593749519,
        disgust: 6.001324078417383,
        sadness: 21.000043172625737,
        contempt: 21.00033742573578,
        surprise: 32.62530106306076
    },
    '3722': {
        joy: 66.5057373046875,
        fear: 60.000351383234374,
        anger: 70.00001879904448,
        disgust: 10.004251452162862,
        sadness: 92.0001135088387,
        contempt: 40.0012992041884,
        surprise: 50.20374904572964
    },
    '4838': {
        joy: 97.06363677978516,
        fear: 15.000137131541123,
        anger: 64.50000593749519,
        disgust: 24.501324078417383,
        sadness: 31.500043172625737,
        contempt: 18.50033742573578,
        surprise: 6.2048268765211105
    },
    '5722': {
        joy: 66.5057373046875,
        fear: 54.000351383234374,
        anger: 72.00001879904448,
        disgust: 0.004251452162861824,
        sadness: 80.0001135088387,
        contempt: 20.0012992041884,
        surprise: 20.203749045729637
    },
    '6838': {
        joy: 95.37223815917969,
        fear: 41.000168004859006,
        anger: 62.00000752212509,
        disgust: 33.001674098544754,
        sadness: 3.000052563053032,
        contempt: 44.00044780407916,
        surprise: 4.204549819231033
    },
    '7839': {
        joy: 98.75503540039062,
        fear: 1.0001062582232407,
        anger: 1.0000043528652895,
        disgust: 1.0009740582900122,
        sadness: 2.000033782198443,
        contempt: 2.0002270473924,
        surprise: 1.2051039338111877
    }
};

var arr = Object.entries(test_data)


var options = {
    type: 'line',
    data: {
        labels: ["joy", "fear", "anger", "disgust", "sadness", "contempt", "surprise"],
        datasets: []
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    reverse: false
                }
            }]
        }
    }
}




var ctx = document.getElementById('chartJSContainer').getContext('2d');
var myC = new Chart(ctx, options);


arr.forEach((v) => {
    setTimeout(() => {


        myC.data.datasets.push({
            data: [v[1].joy, v[1].fear, v[1].anger, v[1].disgust, v[1].sadness, v[1].contempt, v[1].surprise],
            label: "#" + v[0] + "Milisec"
        });
        myC.update()
    }, parseInt(v[0]))
})

canvas { background-color : #eee;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>

<body>
    <canvas id="chartJSContainer" width="600" height="400"></canvas>
</body>

0👍

I understand you want to update view with new fresh json data every xx ms
in summary you need to :

have a service which exposes a shared observable, say data$;
the service has the method to fetch the remote data and update the shared observable above, say getRemoteData()
that service Observable.interval() which calls the method to fetch the remote data
have your component that displays the data
have the component subscribe to the data observable from the service.

the next sample code illustrates how to implement it

import {takeWhile, first} from 'rxjs/operators';
import { Component, OnInit } from '@angular/core';
import { interval } from "rxjs";
import { PositionsModel } from "./positionsmodel";
import { MouvementService } from './mouvement.service';

@Component({
  selector: 'app-mouvementview',
  template: '<div *ngIf="data"> your chart </div>',
})

export class MouvementviewComponent implements OnInit {
  public data: PositionsModel;
  private display: boolean; // whether to display info in the component
                            // use *ngIf="display" in your html to take
                            // advantage of this
  private alive: boolean; // used to unsubscribe from the IntervalObservable
                          // when OnDestroy is called.
  results : string;
  // Inject mouvementService
  constructor(private mouvementService: MouvementService) {
    this.display = false;

    }

ngOnInit() {
   this.mouvementService.getPositions().pipe(
      first()) // only gets fired once
      .subscribe((data) => {
        this.data = data;
        this.display = true;
        this.alive = true;
});

// get our data every subsequent 200 mseconds
interval(200).pipe(
      takeWhile(() => this.alive)) // only fires when component is alive
      .subscribe(() => {
        this.mouvementService.getPositions()
          .subscribe(data => {
        console.log(data);
        this.data = data;
          });
      });

}

ngOnDestroy(){
    this.alive = false; // switches your IntervalObservable off
  }
}

0👍

You can use Chart.js’s addData() function with a setTimeout method for this.

<!DOCTYPE html>
<html>
    <head>
         <title>Add data</title>
         <script src = "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.js"></script>
    </head>
    <body>      
        <div class = "container">
            <canvas id="myChart"></canvas>            
        </div>
        <script src = "script.js"></script>
    </body>
</html>

script.js

let ctx = document.getElementById("myChart").getContext('2d');
        let myChart = new Chart(ctx, {
            type: 'line',
            data: {
                labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
                datasets: [{
                    label: '# of Votes',
                    data: [7, 9, 3, 5, 2, 3],
                    backgroundColor: [
                        'rgba(255, 99, 132, 0.2)',
                        'rgba(54, 162, 235, 0.2)',
                        'rgba(255, 206, 86, 0.2)',
                        'rgba(75, 192, 192, 0.2)',
                        'rgba(153, 102, 255, 0.2)',
                        'rgba(255, 159, 64, 0.2)'
                    ],
                    borderColor: [
                        'rgba(255,99,132,1)',
                        'rgba(54, 162, 235, 1)',
                        'rgba(255, 206, 86, 1)',
                        'rgba(75, 192, 192, 1)',
                        'rgba(153, 102, 255, 1)',
                        'rgba(255, 159, 64, 1)'
                    ],
                    borderWidth: 1
                }]
            },
            options: {
                scales: {
                    yAxes: [{
                        ticks: {
                            beginAtZero:true
                        }
                    }]
                }
            }
        });

        setTimeout(function() {
            addData(myChart, "White", 7);
        },3000);

        function addData(chart, label, data) {
            console.log(console.log(chart.data.datasets[0].data));
            chart.data.labels.push(label);
            chart.data.datasets[0].data.push(data);
            chart.update();
        }

Hope this could be helpful. You can change setTimeout to setInterval if you prefer adding data to the chart in intervals (such as every 2 secs).

Source:stackexchange.com

[Chartjs]-Show data dynamically in line chart – ChartJS

Leave a comment Cancel reply