Home forums Using CanvasJS Live Data Using Angular 4

Tagged: ,

This topic contains 2 replies, has 3 voices, and was last updated by  Sanjoy 1 week, 5 days ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #15721

    jessysue13
    Member

    I am trying to render a live CanvasJs chart using Angular 4. I can successfully render the chart and get my data from my api. However, I am struggling to update the chart with new data (every second).

    With all the documentation that I read you should render the chart every time you update the data. I am assuming that is what I am doing, but it isn’t working.

    Any help would be appreciated.

    Here is my code:

      ngOnInit() {
        let headers = new Headers();
        headers.append('Content-Type', 'application/json');
        let options = new RequestOptions({ headers: headers });
        let body = {
          "returnImmediately": true,
          "maxMessages": 1
        };
        let chart = new CanvasJS.Chart("chartContainer-Australia", {
          title: {
            text: "Live Data"
          },
          axisX: {
            title: "Axis X Title"
          },
          axisY: {
            title: "Units"
          },
          data: [{
            type: "line",
            dataPoints: this.tc1
          }]
        });
        chart.render();
        console.log('chart rendered');
        return Observable.concat(Observable.of(null), IntervalObservable.create(1000))
          .flatMap(() => this.http.post(this.dataUrl, JSON.stringify(body), options))
          .map(
            (res: Response) => res.json()
          ).subscribe(
            (res) => {
              // console.log("VALUE RECEIVED: ",res);
              if (res.receivedMessages){
                for (let i=0; i<res.receivedMessages.length; i++){
                  const data = atob(res.receivedMessages[i].message.data);
                  const dataParsed = JSON.parse(data);
                  const ack = res.receivedMessages[i].ackId;
                  this.dataArray.push({'sensorName': dataParsed.sensor['sensor-name'], 'value': dataParsed.sensor['value'], 'time': dataParsed.sensor['timestamp'], 'units': dataParsed.sensor['units']});
                  if (dataParsed.sensor['sensor-name'] == 'TC1') {
                    const temp = dataParsed.sensor['value'];
                    const time = dataParsed.sensor['timestamp'];
                    this.tc1.push({'y': temp, 'x': time});
                    chart.render();
                    console.log('tc1 chart rendered');
                    console.log('TC1: ', this.tc1);
                  }
                }
              }
            },
            (x) => {
              /* this function is executed when there's an ERROR */
              console.log("ERROR: "+x);
            },
            () => {
              /* this function is executed when the observable ends (completes) its stream */
              console.log("Completed");
            }
          );
      }
    #15730

    Bivek Singh
    Moderator

    @jessysue13,

    We are looking into the issue and will get back to you at the earliest.

    —-
    Bivek Singh,
    Team CanvasJS

    #15789

    Sanjoy
    Moderator

    @jessysue13,

    We are unable to reproduce the issue at our end. Please, look into this sample project created with your sample code. In case, if this still doesn’t solve your problem, sharing a sample project reproducing the issue will help us to understand your problem better and help you out.


    Sanjoy Debnath,
    Team CanvasJS

    • This reply was modified 1 week, 5 days ago by  Sanjoy.
Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.