/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

1 vote232 views1 answer
How to add button react native app.js
Javascript React
3 votes276 views1 answer
Showing an image in react js
Javascript React
0 vote247 views1 answer
Reactjs facebook login popup trigger on load page
Javascript React
2 votes231 views1 answer
React promises
Javascript React
1 vote246 views2 answers
Toastandroid react native
Javascript React
3 votes203 views3 answers
React portals
Javascript React
0 vote249 views1 answer
Take site to top after clicking in react
Javascript React
1 vote290 views1 answer
React site warning: The href attribute requires a valid address. Provide a valid, navigable address as the href value jsx-a11y/anchor-is-valid
Javascript React
0 vote216 views1 answer
React input value set state on change
Javascript React
0 vote229 views1 answer
Npm: Create react chrome extension
Javascript React