CODEWITHSUNDEEP
typescriptgoogle-visualization
Ricardo Costa
Ricardo Costa

Reputation: 11

Getting "Uncaught TypeError: google.visualization.DataTable is not a constructor" on google Charts

I am working in some charts using Google Charts and TS. I am getting errors like the one in the title. The charts sometimes work without any error, sometimes work correctly even with errors in the browser console...sometimes don´t work at all. Here its a little of my code.

/// <reference path="Scripts/typings/google.visualization/google.visualization.d.ts" />

Class Init{

CreateChart(): void{

            //call charts methods
            this.DrawActiveUsers();
            this.DrawExpensiveChart();
            this.DrawRequestsChart();
}

private DrawActiveUsers(): void{
 
        let data = new google.visualization.DataTable();
        ...
        ...
                let chart = new google.visualization.BarChart(document.getElementById('topUsersChart'));
        chart.draw(data, options);
}
  
  
  private DrawExpensiveChart(): void {...}
  
  
  private DrawRequestsChart(): void {...}

  
}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="styles.min.css"/>
    <script src="app.js"></script>
    <base href="https://polygit.org/components/">
    <script src="webcomponentsjs/webcomponents-lite.js"></script>
    <link rel="import" href="polymer/polymer.html">
    <link rel="import" href="google-chart/google-chart.html">
    <link rel="import" href="paper-progress/paper-progress.html">
    <link rel="import" href="paper-card/paper-card.html">

    <script type="text/javascript">
        let init = new Init();
        google.charts.load('current', { 'packages': ['corechart', 'bar'], "callback": init.CreateChart() });
        //google.charts.setOnLoadCallback(init.CreateChart());
    </script>
</head>
<body onload="init.CreateChart()">
<div id="root">
    <paper-progress id="busy"></paper-progress>
    <paper-card id="top">
        <google-chart id="comboChart"></google-chart>
    </paper-card>
    <div id="bottom">
        <paper-card id="left">
            <google-chart id="expensiveChart"></google-chart>
            <div>
                <ul id="legend" class="content">
                    <li>
                        <p><span class="po"></span>Persistent Object (ms)
                        </p></li>
                    <li>
                        <p><span class="query"></span>Query (ms)
                        </p>
                    </li>
                </ul>
            </div>
        </paper-card>
        <paper-card id="right">
            <google-chart id="topUsersChart">
            </google-chart>
        </paper-card>
    </div>
</div>
</body>
</html>

Any idea about how can i fix this?

Upvotes: 1

Views: 2997

Answers (1)

WhiteHat
WhiteHat

Reputation: 61212

need to make sure google charts has loaded, before trying to use

first, the 'callback' isn't defined properly in the load statement

the 'callback' expects a reference to a function --> init.CreateChart

NOT the result of a function --> init.CreateChart()

as such, load statement should be...

google.charts.load('current', {
  'packages': ['corechart', 'bar'],
  'callback': init.CreateChart
});`

next, the same function, also exists on the body tag

this will cause an issue, when body finishes before google.load

the google 'callback' can also be relied upon to know when the page is ready

so no need for the inline event on <body>, remove it

Upvotes: 4

Related Questions