How to make a dynamic area echarts in angular

How to make the area chart dynamically, where the chart is live
where the temperature will update based on tempGenerator()

chart.component.ts

export interface templogRecord {
  dateandtime: string,
  sensor: string,
  temperature: string,
  humidity: string
    }

export class RoomListComponent implements OnInit, OnDestroy {

  rowData: templogRecord[] = [];

    trendChart() {
        let historyRefuelling = [["2018-08-15T10:04:01.339Z",50],
        ["2018-08-15T10:08:01.339Z",50],
        ["2018-08-15T12:01:13.914Z",7],["2018-08-15T13:14:13.914Z",3]]



        this.rowData = record.default.records;
        this.trendOption = [];

        this.trendOption = {
          title: {
            text: 'Humidity',
            x: '50%',
            y: '3%'
          },
          tooltip: {
            showContent: true,
          },
          legend: {
            show: false,
            y: '10%',
            data: [ 'Humidity']
          },
          calculable: false,
          xAxis: [
            {
              type: 'category',
              boundaryGap: false,
              axisLabel: {
                formatter: function(data: Date){
                  return format(new Date(data), 'MMMM DD, YYYY [\n] HH:MM a')
                }
              }
            }
          ],
          yAxis: [
            {
              type: 'value',
              min: 0,
              max: 100,
              axisLabel : {
                  formatter: '{value} °C'
              }
            }
          ],
          series: [
            {
              name: 'Humidity',
              type: 'line',
              smooth: true,
              color: '#ff7b7b',
              itemStyle: { normal: { areaStyle: { type: 'default' } } },
              data: historyRefuelling
            }
          ]
        }

        console.log(this.rowData, ' -=--=--')
        console.log(this.trendOption)
        console.log(
          new Date(+(new Date()) + Math.floor(Math.random()*10000000000))
          )
      }

 tempGenerator() {
        var time = 12;
        var num = Math.random() * 100;
        var tempBase = Math.round(num);

        var fluc = [0, 1, 1, 2, 1, 1, 2.5, 3.5, 1, 1, 1, 1,
          1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1];

        return tempBase * fluc[time];
      }

data.json


{
    "records": [
        {
            "dateandtime": "2018-06-14 02:24:02",
            "sensor": "Heat 1",
            "temperature": "25.9",
            "humidity": "99.9"
        },
        {
            "dateandtime": "2018-06-14 02:24:02",
            "sensor": "Dash Seal Area",
            "temperature": "25.9",
            "humidity": "99.9"
        },
        {
            "dateandtime": "2018-06-14 02:24:02",
            "sensor": "Cloud Seal Area",
            "temperature": "25.9",
            "humidity": "99.9"
        },
        {
            "dateandtime": "2018-06-14 02:24:02",
            "sensor": "Nine Seal Area",
            "temperature": "25.9",
            "humidity": "99.9"
        },
        {
            "dateandtime": "2018-06-14 02:24:02",
            "sensor": "Sam",
            "temperature": "25.9",
            "humidity": "99.9"
        },
        {
            "dateandtime": "2018-06-14 02:24:02",
            "sensor": "Samp",
            "temperature": "25.9",
            "humidity": "99.9"
        },
        {
            "dateandtime": "2018-06-14 02:24:02",
            "sensor": "Sensing",
            "temperature": "25.9",
            "humidity": "99.9"
        }
    ]
}

enter image description here

1 thought on “How to make a dynamic area echarts in angular”

  1. As mentioned in my comment, to update the chart you need to provide the merge input to your chart in the html. the merge input have to be binded to a variable that you update with the new chart options.

    I modified a bit your example to make it easier for me to update the data but you get the idea.

    In the example you will notice 2 things:

    • I added the new [merge] property in the html file binded to the mergeOptions variable
    • I used a setInterval (but you can take the more Angular way using Observable.timer) to update the mergeOtions with the data from your tempGenerator function.

    EXAMPLE

    Reply

Leave a Comment