0

I am working on data visualization and want to show average wage and Estimated population on EVERY state of US. Now I am using google geochart for this part and I almost get the work done.

But I found out google geo chart doesn't support data which contains more than 3 columns. Below is my work and how it looks when I run it.

function drawNewChart(){
    google.charts.load('current', {
        'packages':['geochart'],
        // Note: you will need to get a mapsApiKey for your project.
        // See: https://developers.google.com/chart/interactive/docs/basic_load_libs#load-settings
        'mapsApiKey': 'my key'
      });


    google.charts.setOnLoadCallback(function(){
        let map_data = [['State', 'Count', 'AvgWages']]
        Object.getOwnPropertyNames(stateData).forEach(function(item, index){
            map_data.push(['US-' + item, stateData[item].count, stateData[item].AvgWages / stateData[item].count])
        })

        console.log('full data', map_data)

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

        var options = {
          region: "US",
           resolution: "provinces"
        };

        var chart = new google.visualization.GeoChart(document.getElementById('chart_div'));

        chart.draw(data, options);
    });
}

With 3 columns it works fine and it shows this. enter image description here

However I want to add 1 more column to it. (EstimatedPopulation). When I add this then it shows this error message:

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

How can I solve this problem ?

Piao Ming
  • 23
  • 5

1 Answers1

1

Here are few solutions for your query

https://codesandbox.io/s/xjqrk659zw?file=/src/index.js:847-892

You need to define

tooltip: { isHtml: true, trigger: "visible" } in the options

And then

{ role: "tooltip", type: "string", p: { html: true } }

in your data parameter.

Hope it will help

Sudhir Dadwal
  • 71
  • 1
  • 3