CODEWITHSUNDEEP
javascriptreactjschartsgoogle-visualization
Mjuice
Mjuice

Reputation: 1288

Error "google.charts.load() cannot be called more than once with version .45 or earlier"

I am using the Google Charts API with React and Redux. Getting "Error google.charts.load() cannot be called more than once with version 45 or earlier"

I am not sure how to solve this issue because I need to re-render my chart every time data changes due to user interaction with the application. I have three charts that are drawn after data loads in ComponentWillMount

componentWillMount() {

        //Loads all sales belonging to a user

        this.props.fetchSales(this.props.activeUser._id).then(() => {

            // 3 below functions load total revenue for today, the week, and the month

            this.calculateTodaysRevenue();
            this.calculateWeekRevenue();
            this.calculateMonthRevenue();
        });

    }

If we take a look at calculateTodaysRevenue() you'll see this is where I first make a call to google.charts.load() at the very end after this.setState({}) finishes:

calculateTodaysRevenue() {

        //all of today's date values pulled from state

        const { currentDay, currentMonth, currentYear } = this.state;

        let todaysTotalRevenue = 0;
        let dataRowsForTodaysRevenue = [];

        this.props.allSales.map((sale) => {

            //checks the date key of each sale to see if it matches today's date

            if (sale.date.day === currentDay && sale.date.month === currentMonth && sale.date.year === currentYear) {

                todaysTotalRevenue += sale.total; //Adds each sale's total revenue per interation

                let time = [];
                time.push(sale.date.hour, sale.date.minutes);
                dataRowsForTodaysRevenue.push([time, todaysTotalRevenue]);

            } else { return; }

        });

        //sets profits and data rows for the graph only for today's data in local state

        this.setState({
            todaysTotalRevenue,
            dataRowsForTodaysRevenue
        }, () => {

            //After revenue is calculated and data for today is set in local state, draw chart for today's revenue

            google.charts.load('current', {packages: ['corechart', 'line']});
            google.charts.setOnLoadCallback(this.drawTodaysChart.bind(this));

        });

    }

I am not sure how to load the data into the charts without calling google.charts.load anywhere else. Does anyone else have an idea as to how I could resolve this issue? Am I putting the google.charts.load() and google.charts.setOnLoadCallback() in the wrong place? The reason I have these calls in componentWillMount() is because each time I enter the route for this page, the data will usually be different and sales need to be recalculated and therefore the charts' data will be different. Each charts has it's own container div, so they aren't being drawn in the same place either.

Upvotes: 3

Views: 4314

Answers (1)

Mjuice
Mjuice

Reputation: 1288

I moved my call to google.charts.load() into index.html so that it wouldn't be called every time componentWillMount() runs. You can see that google.charts.load() is called every time calculateTodaysRevenue() runs in componentWillMount(). That is what caused the error listed in the question title.

Upvotes: 5

Related Questions