CODEWITHSUNDEEP
javascriptchartsgoogle-visualizationpie-chart
Berna
Berna

Reputation: 131

Google Pie Chart type mismatch

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!

Upvotes: 0

Views: 1020

Answers (1)

WhiteHat
WhiteHat

Reputation: 61275

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>

Upvotes: 1

Related Questions