Google Visualization Motion Chart Undefined?

Question

Good Morning all!

I'm running into an issue this morning where I added a Google Visualization Motion Chart to my application. But like most things its not cross browser compliant. In FF3 it works fine but in Safari and IE 7 the error console says: "TypeError: Result of expression 'google.visualization' [undefined] is not an object."

I'm not sure why it is happening or what I can change in my code. Here is the snippet of code that I'am using. Thank you for the help!

<div id="NRG-motion-chart" style="width: 625; height: 625px;"></div>

        <script type="text/javascript" src="http://www.google.com/jsapi"&gt;&lt;/script&gt;
    <script type="text/javascript">

    google.load('visualization', '1', {'packages':['motionchart']});
    google.setOnLoadCallback(drawChart);
    function drawChart() {
        var nrgChart = new google.visualization.DataTable();
        nrgChart.addColumn('string', 'Business Unit');
        nrgChart.addColumn('date', 'Date');
        nrgChart.addColumn('number', 'Sales');
        nrgChart.addColumn('number', 'Covers');
        nrgChart.addColumn('number', 'Sales Per Man Hour');
        nrgChart.addColumn('number', 'Labor Hours Per Cover');
        nrgChart.addColumn('string', 'Location');
        nrgChart.addRows([<?= $gData['gData']; ?> ]);
        var chart = new google.visualization.MotionChart(document.getElementById('NRG-motion-chart'));
        chart.draw(nrgChart, {width: 625, height:625});
    }
    </script>

Answer 1

I'm getting the same issue. It's narrowed down to the line: var nrgChart = new google.visualization.DataTable();

According to the debugger, google.visualization is defined, but DataTable() as a function doesn't exist.

I've gotten the default example code to work, but when I move it into my actual web page, things get crazy.

Anyone able to help?