1
votes

I'm using Google Embed API to show data from google analytics visually. I was trying to display only a specific country to show users from each of its regions.

I create a "DataChart" which has a "query" and "chart" object. In the chart object, you specify a type of chart, and some extra options. If I choose "GEO", then it will use the "Geocoding" api, as I've understood it.

I am not able to show the country (Sweden) with its regions however, I don't know what to specify in the chart "options" object.

var location = new gapi.analytics.googleCharts.DataChart({
        query: {
            'ids': viewId,
            'start-date': '90daysAgo',
            'end-date': 'today',
            'metrics': 'ga:users',
            'sort': '-ga:users',
            'dimensions': 'ga:region',
            'max-results': 10
        },
        chart: {
            'container': 'location',
            'type': 'GEO',
            'options': {  
                region: 150,           // <-- Europe
                country: 'SE',          // <-- just guessing

            }
        }
    });

This shows the whole world. If I remove "country", it shows Europe, with the top part cropped away. So I haven't specified "country" in the correct way (I am only guessing since there is no info).

The only info I can find on the GEO chart is here Visualization: GeoChart, but it's not specific for the Embed API.

So does anyone have a solution for this case, and is there info on different properties for the chart object? ( For the query object, there is Dimensions & Metrics Explorer )

Update:

The main question was solved with a below answer:

'options': {
       region: 'SE',
         resolution: 'provinces'
     }

, but the data is not displayed in the regions, so if you have any clues around that, you could perhaps mention it as a comment. Here is part of the data response from the query (with regions):

"dataTable": {
        "cols": [
            {
                "id": "ga:region",
                "label": "ga:region",
                "type": "string"
            },
            {
                "id": "ga:users",
                "label": "ga:users",
                "type": "number"
            }
        ],
        "rows": [
            {
                "c": [
                    {
                        "v": "Stockholm County"
                    },
                    {
                        "v": "15"
                    }
                ]
            },
            {
                "c": [
                    {
                        "v": "Vastra Gotaland County"
                    },
                    {
                        "v": "6"
                    }
                ]
            },
1

1 Answers

1
votes

here are the only configuration options for the GeoChart that I'm aware of...

to display only sweden...

var options = {
  region: 'SE'
};

(remove the country option)

see following working snippet...

google.charts.load('current', {
  'packages':['geochart'],
  'mapsApiKey': 'AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY'
});
google.charts.setOnLoadCallback(drawRegionsMap);

function drawRegionsMap() {
  var data = google.visualization.arrayToDataTable([
    ['Country', 'Popularity'],
  ]);

    var options = {
      region: 'SE',
      resolution: 'provinces'
    };

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

  chart.draw(data, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart"></div>