/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

4 votes260 views1 answer
Multiple click events in react
Javascript React
29 votes267 views6 answers
React background image
Javascript React
1 vote280 views1 answer
Change react native app name
Javascript React
11 votes267 views2 answers
React must be in scope when using jsx
Javascript React
61 votes239 views6 answers
Reactjs router
Javascript React
2 votes261 views2 answers
React Hook Form
Javascript React
0 vote299 views1 answer
Get lat and long from address in react js
Javascript React
0 vote279 views1 answer
React detect autofill
Javascript React
114 votes289 views3 answers
React init
Javascript React
0 vote234 views1 answer
How to make a textarea unwritable in react native
Javascript React