Google Pie Chart type mismatch

Question

I'm creating a pie chart using Google Charts, and I get this error:

Uncaught Error: Type mismatch. Value 720 does not match type date in column index 1

My code is the following:

var graphData = [
    [
       'Occupation',
       {type: 'number'},
       {type: 'string', role: 'tooltip', 'p': {'html': true}}
    ],
    ['Training', 720, '<div class="pie-tooltip">Training<br/><strong>12 hours </strong></div>']
];

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

var options = {
    is3D: true,
};

var chart = new google.visualization.PieChart(document.getElementById('field-occupation-graph'));
chart.draw(data, options);

The {type: string} after Occupation is something I changed to avoid the same error. I had the value 'Time' in there, and the error, instead of saying 720 said Time. Basically the same error but with the headers of the chart.

I don't know from where comes this error of type date, this chart is not using dates at all.

I'm clueless here, so any help would be very much appreciated. Thanks!

WhiteHat WhiteHat · Accepted Answer · 2016-01-15T12:55:13

You were close, there are a number of ways to build a DataTable.

If you need to specify a column type, you can use an object for the column properties.
Otherwise, you can use a string for the column label. You can mix the styles as well...

The key is to have something valid for each.

google.load('visualization', '1', {packages: ['corechart']});
google.setOnLoadCallback(drawChart);

function drawChart() {
    var graphData = [
        [
          {
            id: 'Column1',
            label: 'Occupation',
            type: 'string'
          },
          {
            id: 'Column2',
            label: 'Hours',
            type: 'number'
          },
          {
            id: 'Column3',
            type: 'string',
            role: 'tooltip',
            p: {'html': true}
          }
        ],
        ['Training', 720, '<div class="pie-tooltip">Training<br/><strong>12 hours </strong></div>']
    ];

    var graphData2 = [
        [
          'Occupation',
          'Hours',
          {
            type: 'string',
            role: 'tooltip',
            p: {'html': true}
          }
        ],
        ['Training', 720, '<div class="pie-tooltip">Training<br/><strong>12 hours </strong></div>']
    ];

    var data = google.visualization.arrayToDataTable(graphData);
    var data2 = google.visualization.arrayToDataTable(graphData2);

    var options = {
        is3D: true,
    };
    var options2 = {
        colors: ['red'],
        is3D: true,
    };

    var chart = new google.visualization.PieChart(document.getElementById('field-occupation-graph'));
    chart.draw(data, options);

    var chart2 = new google.visualization.PieChart(document.getElementById('field-occupation-graph2'));
    chart2.draw(data2, options2);
}

<script src="https://www.google.com/jsapi"></script>
<div id="field-occupation-graph"></div>
<div id="field-occupation-graph2"></div>

Google Pie Chart type mismatch

1 Answers