Use Google Charts in ReactJS

user_5288925 0
Viewed 7492

I am trying to use google charts in an ReactJS application. I do not want to use "react-google-charts". I already searched the whole internet and this is my current code... In my index.html I do:

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<script type="text/javascript" src="https://www.google.com/jsapi?autoload=
{'modules':[{'name':'visualization','version':'1.1','packages':
['corechart']}]}"></script>

And my component to use the chart looks like this:

import React from 'react';
import {MainViewHeader} from './MainViewHeader';
import TouristService from '../../services/TouristService';
import Util from '../../services/Util';

google.charts.load('current', {'packages':['corechart']});

export class MainView extends React.Component {
    constructor() {
        super();
        this.state = {
            touristInfos: [],
            touristInfosHeader: []
        };
        google.charts.setOnLoadCallback(() => this.renderGoogleTable());
    }

    componentDidMount() {
        let touristInfos = TouristService.getAllTouristInfos();
        touristInfos.then(
            info =>
                this.setState({
                    touristInfos: Util.getResults(info)
                })
        );
        //this.renderGoogleTable();
    }

    componentDidUpdate(){
        this.renderGoogleTable();
    }

    renderGoogleTable(){
        let data = google.visualization.arrayToDataTable(this.state.touristInfos);

        let table = new google.visualization.Table(document.getElementById('table_div'));
        table.draw(data, {showRowNumber: true, width: '100%', height: '100%'});
    }

    render() {
        return (
            <div className="search-and-overview">
                <MainViewHeader />
                <div className="mid-region">
                    <div className="content">
                        <div className="problem-list">
                            <div id="table_div"></div>
                        </div>
                    </div>
                </div>

            </div>
        );
    }
}

I have no clue where or how to use the google.charts.setOnLoadCallback(myGraphDrawingFunction) so I tried this version I found on a stackoverflow post for using google charts in angular. I need to use this in the renderGoogleTable function. So when I use the "regular setOnLoadCallback way" I cannot use this anymore.

My chrome dev tools throw this error

MainView.js:36 Uncaught (in promise) TypeError: google.visualization.Table is not a constructor
    at MainView.renderGoogleTable (MainView.js:36)
    at MainView.js:15
    at <anonymous>
reactjs charts javascript
1 Answers

In react, an understanding of component life cycle is one thing you mostly need. In jQuery, for instance, we use the ready function to know when the DOM has been fully loaded. In react, the equivalent is componentDidMount.

So, you can declare your setOnLoadCallback in the componentDidMount.

Also, remember to declare your methods in the constructor and bind this.

NOTE: You can also do things like this in componentWillMount (update >> componentWillMount is deprecated), but in this very case, it will throw an error since the div table_div is not yet loaded at this point.

ie this.renderGoogleTable = this.renderGoogleTable.bind(this)

You can read more about component life cycle here: https://reactjs.org/docs/react-component.html#the-component-lifecycle

user_89503790
Related