1import React, { Component } from 'react';
2import './App.css';
3import axios from 'axios'
4import Chart from './components/Chart';
5
6class App extends Component {
7  constructor(){
8    super();
9    this.state = {
10      chartData:{}
11    }
12  }
13
14  componentDidMount() {
15    this.getChartData();
16  }
17
18  getChartData() {
19    axios.get("http://www.json-generator.com/api/json/get/coXIyroYAy?indent=2").then(res => {
20        const coin = res.data;
21        let labels = [];
22        let data = [];
23        coin.forEach(element => {
24        labels.push(element.labels);
25        data.push(element.data);
26
27          });
28
29       console.log(coin)
30        this.setState({
31          chartData: {
32            labels:labels,
33            datasets: [
34              {
35                label: "Population",
36                data: data,
37                backgroundColor: [
38                  "rgba(255, 99, 132, 0.6)",
39                  "rgba(54, 162, 235, 0.6)",
40                  "rgba(255, 99, 132, 0.6)"
41                ],
42              }
43            ]
44          }
45        });
46      });
47    }
48
49  render(){
50
51        return (
52          <div className="App">
53          {Object.keys(this.state.chartData).length &&
54            <Chart
55              chartData={this.state.chartData}
56              location="Massachusetts"
57              legendPosition="bottom"
58            />
59          }
60          </div>
61        );
62
63    }     
64}
65
66export default App;
67