/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

0 vote125 views1 answer
React generate ethereum address
Javascript React
105 votes160 views1 answer
Create react app scaffolding
Javascript React
11 votes125 views2 answers
Shadow using react native
Javascript React
15 votes131 views5 answers
React svg
Javascript React
1 vote137 views1 answer
How to setup React Context, useContext Hook
Javascript React
1 vote145 views1 answer
Retour a la ligne <p> react
Javascript React
0 vote141 views1 answer
Error metro bundler process exited with code 1 react native
Javascript React
5 votes128 views4 answers
How to use useref hook in react
Javascript React
0 vote127 views1 answer
Hide and show on button click in react js functional component
Javascript React
14 votes128 views2 answers
Photo in React native
Javascript React