GoogleChart Maps [visualization] error while joining/displaying 2 datasets

Question

My Dataset 1 is like this-

var data1 = new google.visualization.DataTable();
            data1.addColumn('string','Country');
            data1.addColumn('string','Data1');
            for(var j=0;j<enterpriseArray.length;j++){
                data1.addRows([[enterpriseArray[j], suspiciousCountArray[j]]]);
            }

And Dataset 2 is pretty similar-

var data2 = new google.visualization.DataTable();
            data2.addColumn('string','Country');
            data2.addColumn('string','Data2');
            for(var k=0;k<enterpriseArray.length;k++){
                data2.addRows([[enterpriseArray[k], malicousCountArray[k]]]);
            }

And finally this-

var jointData = google.visualization.data.join(data1, data2, 'full', [[0, 0]], [1], [1]);
var chart = new google.visualization.GeoChart(document.getElementById('some-div'));
chart.draw(jointData, options);

I get this error, not on the Console, but on the exact place where my chart is supposed to be displayed.

Error- Incompatible data table: Error: Table contains more columns than expected (Expecting 2 columns)

P.S.- If I use my dataset something like this (with hard-coded data, not dynamic)-

var data1 = google.visualization.arrayToDataTable([
                ['Country', 'Activity'],
                ['Germany', 100],
                ['United States', 200],
                ['India', 350],
            ]);
var data2 = google.visualization.arrayToDataTable([
                ['Country', 'Activity'],
                ['Germany', 200],
                ['United States', 300],
                ['India', 50],
            ]);

Then the chart/map is displayed correctly without any errors.

why is `Data1` and `Data2` type as `string`? Shouldn't it be `number`. See if this [JSFIDDLE](https://jsfiddle.net/4zk15abz/2/) helps you. — Pirate X, Apr 12 '18 at 08:48
Data1, Data2 contain mostly zeros, so I get this if i set both to number and not string- Error: Type mismatch. Value 0 does not match type number in column index 1 — manishk, Apr 12 '18 at 13:09
Hey I solved it, will post that an answer. Your solution was on point though, just that the data that i was getting was in the form of a string and I had to cast it to integer. — manishk, Apr 12 '18 at 17:45

score 0 · Answer 1 · answered Apr 12 '18 at 17:49

take a look at the Data Format for GeoChart,
the data can be in one of three formats, according to the type of chart you want to display...

1) Regions mode

the data table should have at least one 'string' column for location,
and an optional 'number' column for color

2) Markers mode

the data table should have at least one 'string' column for location,
OR two 'number' columns for latitude & longitude respectively,
followed by an optional 'number' column for marker color,
and another 'number' columns for marker size

3) Text mode

the data table should have at least one 'string' column for location,
and an optional 'number' column for size of the text

none of the formats allow for more than one 'string' column,
which is why you receive the following error...
Table contains more columns than expected

the error you receive when switching those columns to 'number',
is because the numbers you are loading are in 'string' format

use parseFloat or parseInt...

data1.addRows([[enterpriseArray[j], parseFloat(suspiciousCountArray[j])]]);

hope this helps, keep in mind, the only format that allows for two numeric column is markers mode (color and size)... — WhiteHat, Apr 12 '18 at 17:49

manishk · Answer 2 · 2018-04-12T22:04:34.190

0

The problem here was that I needed to cast string to an integer (from the dynamic data that I wanted to display; used parseInt for this), and then changed the type for Data1 and Data2 to 'number' as Pirate X pointed out in his comment.

edited Apr 12 '18 at 22:04

answered Apr 12 '18 at 17:51

manishk

526
8
26

GoogleChart Maps [visualization] error while joining/displaying 2 datasets

2 Answers2