/Javascript/React/React chart js 2 api data

React chart js 2 api data

import React, { Component } from 'react';
import './App.css';
import axios from 'axios'
import Chart from './components/Chart';

class App extends Component {
  constructor(){
    super();
    this.state = {
      chartData:{}
    }
  }

  componentDidMount() {
    this.getChartData();
  }

  getChartData() {
    axios.get("http://www.json-generator.com/api/json/get/coXIyroYAy?indent=2").then(res => {
        const coin = res.data;
        let labels = [];
        let data = [];
        coin.forEach(element => {
        labels.push(element.labels);
        data.push(element.data);

          });

       console.log(coin)
        this.setState({
          chartData: {
            labels:labels,
            datasets: [
              {
                label: "Population",
                data: data,
                backgroundColor: [
                  "rgba(255, 99, 132, 0.6)",
                  "rgba(54, 162, 235, 0.6)",
                  "rgba(255, 99, 132, 0.6)"
                ],
              }
            ]
          }
        });
      });
    }

  render(){

        return (
          <div className="App">
          {Object.keys(this.state.chartData).length &&
            <Chart
              chartData={this.state.chartData}
              location="Massachusetts"
              legendPosition="bottom"
            />
          }
          </div>
        );

    }     
}

export default App;

Source: stackoverflow.com

Similar codes

-2 votes373 views1 answer
Redux template create react app
Javascript React
108 votes417 views1 answer
How to start react app in windows
Javascript React
4 votes373 views2 answers
HandleClick react
Javascript React
0 vote364 views2 answers
React native setstate object
Javascript React
0 vote357 views3 answers
React router browser refresh
Javascript React
-2 votes426 views1 answer
Fc in react
Javascript React
1 vote392 views1 answer
React map array limit
Javascript React
0 vote423 views2 answers
Como arreglar el error de Linking.openUrl no funciona react native
Javascript React
23 votes373 views2 answers
Reactjs app change port
Javascript React
64 votes353 views6 answers
Router react
Javascript React