Home forums Using CanvasJS Live Data Using Angular 4

Tagged: ,

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

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


    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
        console.log('chart rendered');
        return Observable.concat(Observable.of(null), IntervalObservable.create(1000))
          .flatMap(() => this.http.post(this.dataUrl, JSON.stringify(body), options))
            (res: Response) => res.json()
            (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});
                    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 */

    Bivek Singh


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

    Bivek Singh,
    Team CanvasJS




    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 2 months, 1 week ago by  Sanjoy.
Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.