'Using data received from Backend in Angular Highchart

This is how I have been displaying data in a stacked column highchart in angular 5.

series: [{
    name: 'DEF',
    data: [5, 3, 4, 7, 2]
}, {
    name: 'ABC',
    data: [2, 2, 3, 2, 1]
}, {
    name: 'MNP',
    data: [3, 4, 4, 2, 5]
}, {
    name: 'ASM',
    data: [3, 5, 2, 3, 6]
}, {
    name: 'BCC',
    data: [2, 5, 3, 4, 6]
}]

Now, I have been trying that on initialization of this component I get data from backend and use it here. I am successful in getting data as shown below but dont know how to use it to display in high charts.

  ngOnInit() {
    this.metricService.getPluginMetrics().subscribe(data =>{     
      this.metricItems = data;
      console.log(this.metricItems[0].value);
    })
  };

This is the console output for the console.log above

Data is fetched from a json file at backend to mock an API for now and then converted into string and this is how the data is being returned. enter image description here

This is some of the content of JSON file.

[
    {
        "name": "DEF",
        "value": [10, 20, 40, 60, 60],
        "type": "",
        "timestamp": 1533822125000
    },
    {
        "name": "ABC",
        "value": [5, 3, 4, 7, 2, 6],
        "type": "",
        "timestamp": 1533822125000
    }
]

At the angular frontend the object for MetricItem is

export interface MetricItem {
    name: string;
    value: string;
    type: string;
    timestamp: string;
}

Also I tried to replace

series: [{
        name: 'DEF',
        data: [5, 3, 4, 7, 2]
    },.......

with

series: [{
        name: this.metricItems[0].name,
        data: this.metricItems[0].value
    }

But this has no effect and chart is not displayed. Could you please tell how to approach this.

EDIT: As @Core972 suggested in comments I replaced

title: {
    text: 'Stacked Consumption chart'
}

with this

title: {
    text: this.metricItems[0].name
}

but the chart is not displayed.



Solution 1:[1]

This redirect function first finds the previously generated ID in the database. If the ID is found, the link will be taken and redirected to. If not, I will switch back to google. In case your ID does not exist in the database, it should be transferred to google. It seems that the code has an error in the function of inserting ID and URL into the database.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 bcat95