React render Chart.js based on api response

Question

I am using reacts and chart.js, and the chart-js/react wrapper. I am dynamically pulling the data from an API and then basing the chart on the data returned. The issue is that it is only one name from the API call that is being displayed in the graph. There should be three names.

I think the problem is that the rendering of the Graph component is being rendered before all the data has been returned by the API, so the graph only contains the first name. At least this is what i think. I have tried working with the componentWillMount function but cannot get it working.

can anyone spot anything wrong with my code below?

var App = React.createClass({

    getInitialState: function(){
        return {
            names: []
        }
    },

    componentDidMount: function() {
        $.get(url, function (data) {
            this.setState({ names: data })
        }.bind(this));
    },

    render: function() {
        return(
            <div>
                <Graph names={this.state.names}/>               
            </div>
        )
    }
});

var Graph = React.createClass({

    render: function() {
        for(var i = 0; i < this.props.names.length; i++) {
            names.push(this.props.names[i].name)
        }
        var chartData =  {
            labels: names,
            datasets: [{
                   data: goals
                },
                {
                    data: predictions
                }]
        };
        return <LineChart data={chartData} width="600" height="250"/>
    }
});

Community · Accepted Answer · 2017-05-23 12:24:47Z

5

You have to control your state like below:

var App = React.createClass({
    getInitialState: function(){
        return {
            names: [],
            isLoaded: false
        }
    },
    componentDidMount: function() {
        $.get(url, function (data) {
            this.setState({ 
                names: data,
                isLoaded: true
            })
        }.bind(this));
    },
    render: function() {
        return(
            <div>
                {this.state.isLoaded ? <Graph names={this.state.names}/> : <div>Still Loading... </div> }
            </div>
        )
    }
});

So once you get all your data you can render your chart otherwise show the loading screen. Take a look at this Link probably it will be helpfull for you. Hope it makes sense for you.

edited May 23, 2017 at 12:24

CommunityBot

11 silver badge

answered Nov 21, 2016 at 14:11

The Reason

8,0135 gold badges27 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

user6002037 Over a year ago

The problem now is that the graph is getting rendered twice.

The Reason Over a year ago

@phantom that's okay. - once when you initiate state and once when you are using this.setState

user6002037 Over a year ago

yeah, but i don't want it to create a new graph on each render, but instead just create it once

The Reason Over a year ago

@phantom so probably you have to look at shouldComponentUpdate method. if it is being called at initial state that you can handle it

user6002037 Over a year ago

i have created a question here in case someone else comes across the same issue stackoverflow.com/questions/40722861/…

Collectives™ on Stack Overflow

React render Chart.js based on api response

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related