/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 vote136 views1 answer
React native text input right
Javascript React
4 votes169 views3 answers
React link underline
Javascript React
13 votes138 views4 answers
Passing data in react router history,push
Javascript React
1 vote139 views1 answer
Button doesn't work while keyboard is shown react native
Javascript React
-1 vote135 views8 answers
React native
Javascript React
7 votes143 views1 answer
How to place a line break in react native
Javascript React
2 votes142 views1 answer
React Refused to execute inline script because it violates the following Content Security Policy directive
Javascript React
21 votes142 views6 answers
Shadow in react native
Javascript React
145 votes328 views6 answers
Add bootstrap to react
Javascript React
3 votes147 views2 answers
React native pm ERR! code EINTEGRITY
Javascript React