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

1

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: https://bar-chart-app-rjxyxscaou.now.sh/
GitHub project link here: https://github.com/JackEdwardLyons/line-graph-app

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 (https://raw.githubusercontent.com/FreeCodeCamp/ProjectReferenceData/master/GDP-data.json).

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: [
  [
    "1947-01-01",
    243.1
  ],
  [
    "1947-04-01",
    246.3
  ],
  [
    "1947-07-01",
    250.1
  ]
]

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() {
    this.getData();
  }

  getData() {
    // Trying to turn data into array of objects
    // jsbin ref: https://jsbin.com/diyocu/edit?js,console,output
    function YearValue (year, value) {
      this.year = year;
      this.value = value;
    }

    this.service.getData()
      .subscribe(data => data.data
      .map(item => this.values.push(item)));
      return this.values.map(n => 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!!

2

Sure. We can talk on this.

3

Thanks, but I already finished this project :slight_smile:

Here’s what I did:

getData() {
    this.GDPService.getData()
      .subscribe(data => {
        data.data.map((n, i) => {
          this.lineChartLabels.push(n[0]);
          this.lineChartData[0]['data'].push(n[1]);
        });
      });
}
4

Great! Not a problem! Thanks.