CODEWITHSUNDEEP
reactjschartsgoogle-visualization
kenta.I
kenta.I

Reputation: 45

GeoChart with react-google-charts doesn't work

what I wanted to do is just displaying a simple map using GeoChart in react-google-charts. This code seems to correct but when I run this code, an error message appears like:

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

Also when I set the data table to have only one row(commented out), it works without error. But it also doesn't show any data on the map. I have no idea how to use GeoChart with React. Could anyone show me a proper usage?

Here is my code:

import React, { Component } from 'react';
import { createContainer } from 'meteor/react-meteor-data';
import { Questions } from '../../api/questions.js';
import ReactDOM from 'react-dom';
import { Chart } from 'react-google-charts';

export default class MapContainer extends React.Component{
  render(){

        var options = {
          displayMode: 'text'
        };

        var data = [[
          ['Germany',202],
          ['France', 600],
          ['Russia', 700],
        ]];
/*
        var data = [[
          ['Russia', 700],
        ]];
*/
        var columns = [{
              'type': 'string',
              'label' : 'Country'
        },
        {
              'type' : 'number',
              'label' : 'Number'
        }];

    return(
      <div className="mapcontainer">
        <Chart chartType="GeoChart"
                   width={"900px"}
                   height={"500px"}
                   data={data}
                   columns={columns}
                   options={options}
                   graph_id="GeoChart"
                   legend_toggle={true}/>
      </div>
    );
  }
}

Upvotes: 1

Views: 1559

Answers (1)

WhiteHat
WhiteHat

Reputation: 61222

data is wrapped in an extra array []

this... 

    var data = [[
      ['Germany',202],
      ['France', 600],
      ['Russia', 700],
    ]];

should be... 

    var data = [
      ['Germany',202],
      ['France', 600],
      ['Russia', 700],
    ];

Upvotes: 1

Related Questions