0

I'm successfully fetching data from the Poloniex API but I'm having issues generating the actual chart in my React Component (I'm using highcharts--more specifically the React JSX Highstock node package).

I've console logged all the returned data and it appears to be an array of arrays. If I manually force the data into my react component, it will generate a chart, so I imagine there must be an issue with how I am passing the data to my chart. I can see the state of the Graph component with the correct data, so I really have no idea where I might be going wrong. Any help is appreciated. Thanks

class Graph extends Component {

  constructor (props) {
    super(props);

    const now = Date.now();

    this.state = {
      data1:[]
    }
   }

   componentDidMount() {
    this.getData();
   }

   getData = () => {
    fetch(`https://poloniex.com/public?command=returnChartData&currencyPair=BTC_XMR&end=1450499372&period=14400&start=1410158341`)
    .then(res => res.json())
    .then(results => {
     this.setState({
      data1:results.map(item => {
       let newDate = (item.date)*1000;
       return [newDate,item.close]
       })
    })
     console.log(JSON.stringify(this.state.data1));
    })
    .catch(e => e);
  }

  render() {
    return (
      <div className="graph">
        <HighchartsStockChart>
          <Chart zoomType="x" />

          <Title>Highstocks Example</Title>

          <Legend>
            <Legend.Title></Legend.Title>
          </Legend>

          <RangeSelector>
            <RangeSelector.Button count={1} type="day">1d</RangeSelector.Button>
            <RangeSelector.Button count={7} type="day">7d</RangeSelector.Button>
            <RangeSelector.Button count={1} type="month">1m</RangeSelector.Button>
            <RangeSelector.Button type="all">All</RangeSelector.Button>
            <RangeSelector.Input boxBorderColor="#7cb5ec" />
          </RangeSelector>

          <Tooltip />

          <XAxis>
            <XAxis.Title>Time</XAxis.Title>
          </XAxis>

          <YAxis id="price">
            <YAxis.Title>Price</YAxis.Title>
            <AreaSplineSeries id="price" name="Price" data={this.state.data1} />
          </YAxis>


          <Navigator>
            <Navigator.Series seriesId="profit" />
          </Navigator>
        </HighchartsStockChart>

      </div>
    );
  }
John Rogerson
  • 1,153
  • 2
  • 19
  • 51
  • I think delaying rendering of the chart until data are available will help. Please have a look at this [demo](https://stackblitz.com/edit/react-highchart-ajax). It uses HighchartsChart and not HighchartsStockChart just because there seems to be a loading issue in the example - not sure why. It's similar to the example from react-jsx-highcharts [here](https://github.com/whawker/react-jsx-highcharts/blob/master/examples/Loading/App.js). It required to add conditional rendering of the y-axis to make it work. – AWolf Jan 31 '18 at 22:31
  • hmm that first link gets me a 500 server error, and i can't exactly follow what's going on in that second example I'm actually following one of their stock chart examples nearly exactly. https://github.com/whawker/react-jsx-highcharts/blob/master/examples/Highstocks/App.js – John Rogerson Jan 31 '18 at 23:14
  • First link should work - maybe try again. Tested it on my mobile and it loaded with-out any errors. I'll check your example later. – AWolf Jan 31 '18 at 23:25
  • okay thanks checking now--i also put my code in a sandbox here https://codesandbox.io/s/13om50k2p4 – John Rogerson Jan 31 '18 at 23:32
  • oh boy you are an absolute savior. THANK YOU. So, just so i understand for my own knowledge, it looks like the key is adding the loaded state and checking that before you load the data. Why is it that that makes it work? Any idea? And i see you actually didn't use min/max variables--are those even needed? – John Rogerson Jan 31 '18 at 23:46

0 Answers0