Plot graph using react-d3

Question

I am trying to make a histogram of some data that I have using react-d3-components . The code that I have is like this

import React, { Component } from 'react';
import * as d3 from 'd3';
import * as ReactD3 from 'react-d3-components';
import propTypes from 'prop-types';
var axios=require('axios');
var BarChart=ReactD3.BarChart;

class App extends Component {
  constructor(props){
    super(props);
    this.state={
      data:[],
      label:'',
      values:[],
      x:'',
      y:''
    }
  }

  componentDidMount(){
   this.loadData();   
  }

  loadData(){

      var me=this;
       axios({
          method:'GET',
          url:'https://www.alphavantage.co/query?function=TIME_SERIES_MONTHLY&symbol=SPY&apikey=2QEL3WC4KITIBISR',
        }).then(function(response){

          var values=[];
          var data=[];
          Object.keys(response.data['Monthly Time Series']).forEach(function(k){
            var y=response.data['Monthly Time Series'][k]["1. open"];

            me.setState({
              label:k,
              x:k,
              y:y
            })


           })
           values.push({"x":me.state.x,"y":me.state.y});
           data.push({"label":me.state.x,"values":values});
                       me.setState({
              data:data
            })
          console.log(me.state.data);

        }).catch(function(error){
          console.log(error);
        })
    }


  render() {

    return (
      <div>
        <BarChart data={this.state.data} width={100} height={100}/>
      </div>
    )
  }
}

App.propTypes={
    values:React.PropTypes.array

}

export default App;

With the above code, I get this error

The documentation that I am referring to is this

The value of data in c onsole.log(me.state.data) is this [{…}]

0
:
label
:
"2000-02-29"
values
:
Array(1)
0
:
{x: "2000-02-29", y: "139.8000"}
length
:
1
__proto__
:
Array(0)
__proto__
:
Object
length
:
1
__proto__
:
Array(0)

Answer 1

It seems problem in manipulating data format as per graph needs. I haven't tested it yet, but this should work.

class App extends Component {
  state = {
    label: 'Monthly Dates',
    values: []
  };

  componentDidMount() {
    this.loadData();
  }

  loadData() {
    axios({
      method: 'GET',
      url: 'https://www.alphavantage.co/query?function=TIME_SERIES_MONTHLY&symbol=SPY&apikey=2QEL3WC4KITIBISR'
    })
      .then(function(response) {
        const values = [];
        if (response && response.data && response.data['Monthly Time Series']) {
          Object.keys(response.data['Monthly Time Series']).forEach((keys) => {
            if (keys) {
              const pointValue = {
                x: String(keys),
                y: Number(response.data['Monthly Time Series'][keys]['1. open'])
              }
              values.push(pointValue);
            }
          });
          this.setState({values});
        }
      })
      .catch(function(error) {
        console.log(error);
      });
  }

  getGraphData() {
    const { label, values } = this.state;
    return [{ label, values }]
  }

  renderGraph() {
    if (this.state.values && this.state.values.length) {
      return (
        <BarChart
          data={this.getGraphData()}
          width={1000}
          height={400}
          margin={{top: 10, bottom: 50, left: 50, right: 10}}
        />
      );
    }
    return '';
  }

  render() {
    return (
      <div>
        {this.renderGraph()}
      </div>
    )
  }
}

UPDATE: you should not render your BarChart until data is present. As BarChart is expecting a valid data format as below.

[{
  label: 'somethingA',
  values: [{x: 'SomethingA', y: 10}, {x: 'SomethingB', y: 4}, {x: 'SomethingC', y: 3}]
}];