NGX-Chart - Problem while getting chart data from service

Question

I'm trying to get NGX-Chart coordinates from a service.

It works by using a static object containing data but, if I try to call the PHP service loading the data dynamically, the chart doesn't load.

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
 selector: 'app-graph',
 templateUrl: './graph.component.html',
 styleUrls: ['./graph.component.scss']
})

export class GraphComponent {
    constructor(private http: HttpClient) {}

    //WORKS :)  
    //public multi = [{"name":"Miky","series":[ {"name":"08:47","value":"1.67"}, //{"name":"08:48","value":"1.63"}, {"name":"08:49","value":"1.60"} ] }, //{"name":"Freddy","series":[ {"name":"08:51","value":"1.64"}, //{"name":"08:53","value":"1.57"}, {"name":"08:58","value":"1.57"} ] }];

    //DOESN'T WORK :(
    public multi = this.getGraphData();

    view: any[] = [1280, 400];
    showXAxis = true;
    showYAxis = true;
    gradient = false;
    showLegend = true;
    showXAxisLabel = false;
    xAxisLabel = '';
    showYAxisLabel = false;
    yAxisLabel = '';
    timeline = true;
    colorScheme = {
        domain: ['#5AA454', '#A10A28', '#C7B42C', '#AAAAAA']
    };
    autoScale = true;

    getGraphData() {
        this.http.post('service.php',{}).subscribe(result => {
        console.log(result);
        return result;
        });
    }
}

PHP service file 'service.php'

header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: POST');
header('Access-Control-Allow-Headers: Origin, Content-Type, X-Auth-Token');
echo '[
    {"name":"Miky","series":[
        {"name":"08:47","value":"1.67"},
        {"name":"08:48","value":"1.63"},
        {"name":"08:49","value":"1.60"}
        ]
    },

    {"name":"Freddy","series":[
        {"name":"08:51","value":"1.64"},
        {"name":"08:53","value":"1.57"},
        {"name":"08:58","value":"1.57"}
        ]
    }
]';

Am I missing something?????

`getGraphData` doesn't return anything. Also the http call is asynchronous, you should assign the value to the class property in not return it. — toskv, Mar 25 '19 at 18:12
thnaks for the answer but getGraphData() return the array object... could you be a little bit more specific please? — mightymike, Mar 26 '19 at 09:54

toskv · Accepted Answer · 2019-03-26T14:18:23.387

2

You should change your getGraphData method to something like this.

getGraphData() {
  this.http.post('service.php', {}).subscribe(result => {
    this.multi = result;
  });
}

edited Mar 26 '19 at 14:18

answered Mar 26 '19 at 11:45

toskv

30,680
7
72
74

An easy and logical solutions that, obviously, works like a charm :) – mightymike Mar 27 '19 at 01:12

NGX-Chart - Problem while getting chart data from service

1 Answers1