How to populate a Highchart graph with Angular

Question

I want to populate a Highchart graph with the answer of a REST controller, here is the typescript part of the Angular9 component:

import { Component, OnInit } from '@angular/core';
import * as Highcharts from 'highcharts';
import { ApiService } from '../api.service';

@Component({
  selector: 'jhi-device-graph',
  templateUrl: './device-graph.component.html',
  styleUrls: ['./device-graph.component.scss']
})
export class DeviceGraphComponent implements OnInit {
  Highcharts: typeof Highcharts = Highcharts;
  chartOptions: Highcharts.Options = {
    xAxis: {
      type: 'datetime'
    },
    yAxis: {
      title: {
        text: 'Voltage'
      }
    },
    title: {
      text: 'Input voltage'
    },
    series: [
      {
        data: [
          [Date.UTC(2010, 0, 1), 29.9],
          [Date.UTC(2010, 2, 1), 71.5],
          [Date.UTC(2010, 3, 1), 106.4]
        ],
        type: 'line',
        name: 'Vin1'
      },
      {
        data: [
          [Date.UTC(2010, 0, 1), 39.9],
          [Date.UTC(2010, 2, 1), 91.5],
          [Date.UTC(2010, 3, 1), 96.4]
        ],
        type: 'line',
        name: 'Vin2'
      }
    ]
  };

  data: String[] = [];
  isLoadingResults = true;

  constructor(private api: ApiService) {}

  ngOnInit(): void {
    this.api.getInputVoltage('10.1.30.1').subscribe(
      (res: any) => {
        this.chartOptions.series.data[0]=res;
        this.data = res;
        //console.log(this.data);
        this.isLoadingResults = false;
        Highcharts.chart('container', this.chartOptions);
      },
      err => {
        //console.log(err);
        this.isLoadingResults = false;
      }
    );
  }
}

The code contains hard coded data for testing purpouses, but is supposed to be replaced with the response to the GET API (which is already implemented). The JSON format is similar to the hard coded data: timestamp and an array of values.

When I try to compile it, I get these errors:

[INFO] ERROR in src/main/webapp/app/device-graph/device-graph.component.ts:54:9 - error TS2532: Object is possibly 'undefined'.
[INFO] 
[INFO] 54         this.chartOptions.series.data[0]=res;
[INFO]            ~~~~~~~~~~~~~~~~~~~~~~~~
[INFO] src/main/webapp/app/device-graph/device-graph.component.ts:54:34 - error TS2339: Property 'data' does not exist on type 'SeriesOptionsType[]'.
[INFO] 
[INFO] 54         this.chartOptions.series.data[0]=res;
[INFO]                                     ~~~~

What am I doing wrong?

EDIT: This is my JSON, but the issue is that the code above don't even compile https://pastebin.com/D6MBG2dW

I write also the back end, so I can tweak the API if necessary. My problem is that it doesn't compile the front end — Centroricerche rps
– Centroricerche rps, Commented Apr 10, 2020 at 14:23

Barremian · Accepted Answer · 2020-04-10 09:47:22Z

1

I am not sure what you exactly want to update, but it looks like this.chartOptions.series is an array. So you might have to do this.chartOptions.series[0].data[0]=res.

OR

Maybe you receive the complete data array from the API. In that case, to update the first data, you need to do this.chartOptions.series[0].data=res. It all depends what data you receive from the backend and what you wish to update in the chart.

answered Apr 10, 2020 at 9:47

Barremian

31.2k4 gold badges37 silver badges67 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Centroricerche rps Over a year ago

src/main/webapp/app/device-graph/device-graph.component.ts:54:37 - error TS2339: Property 'data' does not exist on type 'SeriesOptionsType'. [INFO] Property 'data' does not exist on type 'SeriesAbandsOptions'.

Centroricerche rps Over a year ago

My problem is that it doesn't compile the front end

Barremian Over a year ago

I couldn't find SeriesAbandsOptions in the code you've posted so far. Could you please post the code where SeriesAbandsOptions is used or defined? I'd also be helpful if you posted the JSON response you get from the API.

Centroricerche rps Over a year ago

I don't have any code about SeriesAbandsOptions, I assume that's part of the Highcharts. My JSON currently is this pastebin.com/D6MBG2dW , but I don't think is relevant at this stage.

Centroricerche rps Over a year ago

Indeed it's part of Highcharts code, you can find it here raw.githubusercontent.com/highcharts/highcharts-dist/master/…

Collectives™ on Stack Overflow

How to populate a Highchart graph with Angular

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related