Google Chart with table giving "[object Object] does not fit the Control specification" Error

google-api, google-visualization, javascript, jquery, php

Solution

Your problem is here:

bind([pie, table]).

The Dashboard.bind method expects two arguments: an array of controls and an array of charts. The first array is for the controls, and the API is throwing an error because it is finding charts where it expects controls. The Dashboards do not support using charts without controls. If you want to draw your charts, you need to specify the `dataTable` parameter of each chart and call the wrappers' draw methods individually:

var pie = new google.visualization.ChartWrapper({
    'chartType': 'PieChart',
    'containerId': 'chart1',
    dataTable: data,
    'options': {
        'width': 300,
        'height': 300,
        'legend': 'none',
        'title': 'Donuts eaten per person',
        'chartArea': {'left': 15, 'top': 15, 'right': 0, 'bottom': 0},
        'pieSliceText': 'label'
    },
    // Instruct the piechart to use colums 0 (Name) and 3 (Donuts Eaten)
    // from the 'data' DataTable.
    'view': {'columns': [0, 5]}
});
pie.draw();

// Define a table
var table = new google.visualization.ChartWrapper({
    'chartType': 'Table',
    'containerId': 'chart2',
    dataTable: data,
    'options': {
        'width': '300px'
    }
});
table.draw();

Also, your DataTable construction is incorrect. Since you are passing an array of data, you need to use the `arrayToDataTable` method:

var data = google.visualization.arrayToDataTable(dataArray);

The data in your array is missing a column header row (which should be the first row) - you either need to add that row, or pass `true` as a second parameter to the `arrayToDataTable` method. Also, the numbers in your data are wrapped as strings, which will cause problems with your PieChart. Remove the quotes around the numbers to fix.

Problem

i am trying to implement Google Dashboard with graph connected to dataTable, This is my script ``` <script type="text/javascript"> function drawVisualization(dataArray) { // function drawVisualization() { // Prepare the data var data = google.visualization.DataTable(dataArray); // Define a Pie chart var pie = new google.visualization.ChartWrapper({ 'chartType': 'PieChart', 'containerId': 'chart1', 'options': { 'width': 300, 'height': 300, 'legend': 'none', 'title': 'Donuts eaten per person', 'chartArea': {'left': 15, 'top': 15, 'right': 0, 'bottom': 0}, 'pieSliceText': 'label' }, // Instruct the piechart to use colums 0 (Name) and 3 (Donuts Eaten) // from the 'data' DataTable. 'view': {'columns': [0, 5]} }); // Define a table var table = new google.visualization.ChartWrapper({ 'chartType': 'Table', 'containerId': 'chart2', 'options': { 'width': '300px' } }); // Create a dashboard new google.visualization.Dashboard(document.getElementById('dashboard')). // Establish bindings, declaring the both the slider and the category // picker will drive both charts. bind([pie, table]). // Draw the entire dashboard. draw(data); } </script> //My dataArray looks some thing like this [["039 - EXTRACRANIAL PROCEDURES W\/O CC\/MCC","AL","879","29855.3481218009","5857.17519906485","2"],["039 - EXTRACRANIAL PROCEDURES W\/O CC\/MCC","AZ","606","33581.3151824257","7034.48184806271","4"],["039 - EXTRACRANIAL PROCEDURES W\/O CC\/MCC","CO","255","33554.1607857647","6911.51372542745","6"],["039 - EXTRACRANIAL PROCEDURES W\/O CC\/MCC","DC","47","44919.3829785106","9241.59574459574","8"],.... ``` I dont know why i am getting this error.

Original source