Bar Chart App (in Angular 4) -- Help formatting JSON code

Hi all,

I’m now moving onto the Data Viz Cert and want to try my hand at Angular 4. I have found a cool library called ngx-charts which seems as though it will suit perfectly. It’s based entirely on d3 but made for Angular.

Deployed version:
GitHub project link here:

If you want to collaborate on this then I’d be happy to share my process getting this far, and continue along together :slight_smile:

I’ve setup a basic environment, and got my service receiving the data from the JSON link in the instructions (

My issue is with formatting the JSON data to suit the chart library. The data needs to be of a format like this:

export var multi = [{
    "name": "Germany",
    "series": [
        "name": "2010",
        "value": 7300000
        "name": "2011",
        "value": 8940000

But it comes out like this:

data: [

I’m working on reformatting the data, but having no luck, here is what I am thinking:

export class LineGraphComponent implements OnInit {
  values = [];

  constructor(private service: GDPService) { }
  ngOnInit() {

  getData() {
    // Trying to turn data into array of objects
    // jsbin ref:,console,output
    function YearValue (year, value) {
      this.year = year;
      this.value = value;

      .subscribe(data =>
      .map(item => this.values.push(item)));
      return => new YearValue(n[0], n[1]));

This works to some degree, to get the data out on the page… but it’s not enough to get the chart populated…
Thanks in advance!!

Sure. We can talk on this.

Thanks, but I already finished this project :slight_smile:

Here’s what I did:

getData() {
      .subscribe(data => {, i) => {

Great! Not a problem! Thanks.