Uncaught SyntaxError: Unexpected end of input Google Charts

Question

I'm trying to call table chart using Google Chart Dashboard but I am getting this error. Not sure what is wrong with this. Even though the code is similar to my previous charts. Anything different with Table Chart ?

HTML

<div id="dashboard3_div">

                <div id="filter3_div"></div>
                <br />
                <div id="chart3_div"></div>
            </div>

JS (Generated via C#)

 google.charts.setOnLoadCallback(drawDashboard);

    function drawDashboard() {
        var data = google.visualization.arrayToDataTable([
            ['ID', 'Time', 'Status', 'Assignee', 'DTime'],
// My data here

        ]);
        var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard3_div'));
        var slider = new google.visualization.ControlWrapper({
            'controlType': 'CategoryFilter',
            'containerId': 'filter3_div',
            'options': {
                'filterColumnLabel': 'Assignee',
                'ui': {
                    'allowTyping': true,
                    'allowMultiple': false,
                    'allowNone': false,
                    'sortValues': false,
                }
            }
        });
        var table= new google.visualization.ChartWrapper({
            'chartType': 'table',
            'containerId': 'Assignee',
        });

        dashboard.bind(slider, table);

        // Draw the dashboard.
        dashboard.draw(data);

Uncaught SyntaxError: Unexpected end of input

Line 92 is dashboard.draw(data);

@madalinivascu That did the trick. I didn't close the drawDashboard tag ! — Pirate X

WhiteHat WhiteHat · Accepted Answer · 2016-08-01T11:55:38

I think you just have a couple typos...

first, make sure you're including the 'table' package (not shown in question)
packages: ['controls', 'table']

next, containerId on the table looks off, it should match the id of a div...

try --> 'containerId': 'chart3_div'

instead of --> 'containerId': 'Assignee'

lastly, the chartType needs to match the chart's class name
so 'table' needs to be capitalized --> 'Table'

see following working snippet...

google.charts.load('current', {
  callback: function () {
    var data = google.visualization.arrayToDataTable([
        ['ID', 'Time', 'Status', 'Assignee', 'DTime'],
        [0, '7:47 am', 'Testing', 'WhiteHat', '8:00 am']
    ]);
    var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard3_div'));
    var slider = new google.visualization.ControlWrapper({
        'controlType': 'CategoryFilter',
        'containerId': 'filter3_div',
        'options': {
            'filterColumnLabel': 'Assignee',
            'ui': {
                'allowTyping': true,
                'allowMultiple': false,
                'allowNone': false,
                'sortValues': false,
            }
        }
    });
    var table= new google.visualization.ChartWrapper({
        'chartType': 'Table',
        'containerId': 'chart3_div',
    });

    dashboard.bind(slider, table);

    // Draw the dashboard.
    dashboard.draw(data);
  },
  packages: ['controls', 'table']
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="dashboard3_div">
    <div id="filter3_div"></div>
    <br />
    <div id="chart3_div"></div>
</div>

Uncaught SyntaxError: Unexpected end of input Google Charts

1 Answers