Login/Register
Passing in parameter in Google Charts function
Asked Answered
Solved javascriptchartsgoogle-visualization
A

1

5

I am using Google Charts to display some data. I initialize the chart I want and then call a function that formats my data. That function will then call the drawChart(parameter) function to draw the chart. The google.charts.setOnLoadCallback(drawChart(parameter)); function does this. When I do this, however, it gives me this error: Uncaught TypeError: Cannot read property 'DataTable' of undefined Here's my code:

HTML

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
        <script type="text/javascript" src="chart.js"></script>
    </head>
    <body>
        <div id="chart_div"></div>

        <script>
            google.charts.load('current', {
            'packages': ['annotationchart']
            });

        </script>
    </body>
</html>

chart.js

function formatData(worksheet) {
       //excess function removed to make question simpler.

       google.charts.setOnLoadCallback(drawChart(dataArr));
   }

  function drawChart(dataArr) {
       var data = new google.visualization.DataTable();
       data.addColumn('datetime', 'Time');
       data.addColumn('number', 'In');

       data.addColumn('number', 'Out');

       data.addRows([
          [new Date(2017, 2, 15, 06, 00, 00), 12400,
            10645],
          [new Date(2017, 2, 15, 07, 00, 00), 24045,
            12374
          ],
          [new Date(2017, 2, 15, 08, 00, 00), 35022,
            15766
          ],
          [new Date(2017, 2, 15, 09, 00, 00), 12284,
            34334
          ],
          [new Date(2017, 2, 15, 10, 00, 00), 8476,
            66467
          ],
          [new Date(2017, 2, 15, 11, 00, 00), 0,
            79463
          ]
        ]);

       var chart = new google.visualization.AnnotationChart(document.getElementById('chart_div'));

       chart.draw(data);
   }

When I remove the parameter, the chart gets displayed and there is no error. How can I make it so that it is able to display the chart when I pass in a parameter and not give me that error?

Antecede answered 27/11, 2017 at 1:25 Comment(2)
What exactly is dataArr? Are you calling formData() at anytime? I assume that you must since it has google.charts.setOnLoadCallback(drawChart(dataArr)); Is dataArr derived from formData() ? This worksheet parameter...what is it? Are you trying to add the data of worksheet to the chart? It's a lot more complex than just shoving it into a variable. – Murderous
@Murderous I wanted to make things simpler by removing some things. I am reading from an excel sheet. It creates a JSON object and then calls formatData(worksheet), worksheet is the JSON object. formatData will format the data into an array. dataArr is that formatted data. – Antecede
R
8

setOnLoadCallback takes a reference to a --> function
not the result of a --> function()

try it like this... 

function formatData(worksheet) {
   google.charts.setOnLoadCallback(function () {
     drawChart(dataArr);
   });
}
Roam answered 27/11, 2017 at 2:12 Comment(2)
How do I get dataArr value inside the function? – Approve
need more info, example... – Roam

© 2022 - 2024 — McMap. All rights reserved.