36

enter image description here

I have LineGraph using googlechart. This graph is created with the following code

function drawChart() {
    var data = google.visualization.arrayToDataTable([ 

      ['Categegories', 'R1' , 'R2' , 'R3' , 'R4' , 'R5' , 'R6' ],

      ['A',          1,     4,       2,    4,       1,  null],

      ['D',          3,  null,    null,    7,    null,     1],

      ['G',          null,  null,    null,       8,    null,  null],

    ]);

    var options = {
      title: 'Graph',
      pointSize: 6,
      vAxis: {minValue:0, maxValue:10,gridlines:{count:6}},
    };

    var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
    chart.draw(data, options);
  }

Now surprisingly if I remove a data row ['D', 3, null, null, 7, null, 1],

It produces an error saying that All series on a given axis must be of the same data type

I have reduce my code to just one line and I found that there is problem with null values

e.g. 

['Category', 'R1' , 'R2' , 'R3' ],
['A',       2,  1,  1]

It generates the graph while if I add null value any where in the data i.e in the place of (2,1,1) it does not..

Waiting for some expert guidance about setting some kind option for handling null values... It is very strange that some time null values works and some time not.. :(

Shahid
  • 1,051
  • 1
  • 10
  • 14
  • There is one option `interpolateNulls: 'true'` but this works for package `packages: ['linechart']` :( and I need it work for package `packages:["corechart"]` – Shahid Nov 06 '12 at 06:24

6 Answers6

61

Finally, I have got a solution to my problem. I hope this will help many others like me. The problem is basically a limitation of arrayToDataTable method. The row of data must have the correct type in all columns. Since we have null values in rows, the API is either assuming that the data type of that column in null or it is throwing an error about not getting a valid data type. To fix this, you will have to switch to the a standard DataTable constructor

var data = new google.visualization.DataTable();
data.addColumn('string', 'Year');
data.addColumn('number', 'Health (P)');
data.addColumn('number', 'Health (A)');
data.addColumn('number', 'Gender (P)');
data.addColumn('number', 'Gender (A)');
data.addColumn('number', 'Education (P)');
data.addColumn('number', 'Education (A)');
data.addColumn('number', 'Agriculture (P)');
data.addColumn('number', 'Agriculture (A)');
data.addColumn('number', 'Social protection (P)');
data.addColumn('number', 'Social protection (A)');
data.addColumn('number', 'Environment (P)');
data.addColumn('number', 'Environment (A)');
data.addColumn('number', 'Water/sanitation (P)');
data.addColumn('number', 'Water/sanitation (A)');
data.addRows([

    ['2008',81.06,null,1.32,null,94.68,0,13.41,null,30.36,null,19.78,null,36.87,null],
    ['2009',27.13,null,22.34,null,33.6,null,79.92,null,1.34,null,89.77,0,15.68,null],
    ['2010',104.89,0,14.61,null,33.46,null,30.29,null,22.28,null,107.81,null,1.39,null],
    ['2011',55,0,110.69,null,1.3,null,106.24,0,14.45,null,27.34,null,30.71,null],
    ['2012',29.96,null,27.88,null,44.77,null,133.83,null,1.31,null,105.01,null,17.83,null],
    ['2013',0,null,0,null,0,null,0,null,0,null,0,null,0,null]
]);

Copied from the following link https://groups.google.com/forum/?fromgroups=#!topic/google-visualization-api/2Jafk8PyjV4

Alternatively, with arrayToDataTable() you can specify the type in the header row. See the docs for more https://developers.google.com/chart/interactive/docs/datatables_dataviews#arraytodatatable

var data = google.visualization.arrayToDataTable([
      ['Categegories', {label: 'R1', type: 'number'} , {label: 'R2', type: 'number'} , {label: 'R3', type: 'number'} , {label: 'R4', type: 'number'} , {label: 'R5', type: 'number'} , {label: 'R6', type: 'number'} ],

      ['A',          1,     4,       2,    4,       1,  null],

      ['D',          3,  null,    null,    7,    null,     1],

      ['G',          null,  null,    null,       8,    null,  null],

    ]);
KirstieBallance
  • 1,238
  • 12
  • 26
Shahid
  • 1,051
  • 1
  • 10
  • 14
12

I think specifying the type in header row will fix the issue.

var data = google.visualization.arrayToDataTable([
['Category', {label: 'Return', type: 'number'}, {label: 'Risk', type: `enter code here`'number'}],
[1.5,  20, 50]
]);
Athira Ramachandran
  • 643
  • 8
  • 11
4

For me this error was caused by having an additional column which never had any values appended to it

Alicia Sykes
  • 5,997
  • 7
  • 36
  • 64
1

I got this error by creating a bar chart that had two columns with strings and one with numbers. I was intending to display a view that kept the second string column hidden but forgot.

Noumenon
  • 5,099
  • 4
  • 53
  • 73
0

I got this error by creating a chart from a Google Sheet. Deleting all the empty columns fixed this problem. Not a big issue but still annoying.

cona
  • 169
  • 1
  • 13
0

I've replaced "null" with "NaN" and my error was fixed.

Vova K.
  • 678
  • 6
  • 19