Related
Can anybody help me with converting the following structure to a Chartist.js structure? I use chartis.js to show line chart. I need convert this JSON below to object structure.
<code>
data = {
"el1": [{
"date": "2017.01",
"data1": {
"series_1": {
"a": 10,
"b": 20,
"c": 50,
"d": 15,
"e": 8
},
"Series_2": {
"yes": 5,
"no": 3
},
"Series_3": {
"s": 2,
"n": 9
}
},
"text": [{
"t": "header",
"c": "text"
}, {
"t": "header2",
"c": "text2"
}]
}, {
"date": "2017.02",
"data1": {
"series_1": {
"a": 56,
"b": 23,
"c": 45,
"d": 69,
"e": 14
},
"Series_2": {
"yes": 2,
"no": 1
},
"Series_3": {
"s": 6,
"n": 4
}
},
"text": [{
"t": "header",
"c": "text"
}, {
"t": "header2",
"c": "text2"
}]
}, {
"date": "2017.03",
"data1": {
"series_1": {
"a": 15,
"b": 12,
"c": 10,
"d": 54,
"e": 4
},
"Series_2": {
"yes": 20,
"no": 16
},
"Series_3": {
"s": 9,
"n": 7
}
},
"text": [{
"t": "header",
"c": "text"
}, {
"t": "header2",
"c": "text2"
}]
}
]
};
</code>
And I Need Object like this:
<code>
var example = [
{
labels: ['2017.01', '2017.02', '2017.03'] , series: [10,56,15], [20,23, 12], [50,45,10], [15, 69, 54], [8,14,4]},
labels: ['2017.01', '2017.02', '2017.03'] , series: [5,2,20], [3,1, 16]},
labels: ['2017.01', '2017.02', '2017.03'] , series: [2,6,9], [9,4, 7]},
] ;
</code>
Please check the digit's and tray to comapre JSON and Output to better understand how to should look's like. Sorry for my English !
Thanks for the help! Best regards!
You can just iterate the array and can manipulate it to the result you are looking for...
function getFormatted(data) {
var _newData = {};
var allSeries = [];
data.el1.forEach(function(el){
_newData[el.date] = el.data1;
if(allSeries.length==0)
allSeries = Object.keys(el.data1);
});
return allSeries.map(function(el) {
var obj = {
labels: [],
series: []
};
obj.labels = Object.keys(_newData);
Object.keys(_newData).forEach(function(_el) {
obj.series.push(Object.keys(_newData[_el][el]));
});
var _newSeries = [];
obj.series[0].forEach(function(el, i){
_newSeries.push([el, obj.series[1][i]]);
});
obj.series = _newSeries;
return obj;
});
}
var data = {
"el1": [{
"date": "2017.01",
"data1": {
"series_1": {
"a": 1,
"b": 2,
"c": 3,
"d": 4,
"e": 5
},
"Series_2": {
"yes": 1,
"no": 2
},
"Series_3": {
"s": 1,
"n": 2
}
},
"text": [{
"t": "header",
"c": "text"
}, {
"t": "header2",
"c": "text2"
}]
}, {
"date": "2017.02",
"data1": {
"series_1": {
"a2": 1,
"b2": 2,
"c2": 3,
"d2": 4,
"e2": 5
},
"Series_2": {
"yes2": 1,
"no2": 2
},
"Series_3": {
"s2": 1,
"n2": 2
}
},
"text": [{
"t": "header",
"c": "text"
}, {
"t": "header2",
"c": "text2"
}]
}]
};
console.log(getFormatted(data));
I would like to have a Line Chart using angular-google-chart to show some statistics and also future projection. I want my projection to be dashed lines. Below is my sample code. Currently, my line chart will show the same color for the statistics and future projection. I want it to be different color or maybe dashed for the future projection.
HTML
<div google-chart chart="stat"></div>
JS
$scope.stat = {
"type": "LineChart",
"displayed": false,
"data": {
"cols": [
{
"id": "date",
"label": "Date",
"type": "string",
},
{
"id": "sales-id",
"label": "Sales",
"type": "number",
},
],
"rows": [
{
"c": [
{
"v": "20 Nov"
},
{
"v": 19,
}
]
},
{
"c": [
{
"v": "21 Nov"
},
{
"v": 17,
}
]
},
{
"c": [
{
"v": "22 Nov"
},
{
"v": 18,
}
]
},
{
"c": [
{
"v": "23 Nov"
},
{
"v": 18,
}
]
},
//FUTURE PROJECTION
{
"c": [
{
"v": "24 Nov"
},
{
"v": 17,
}
]
},
{
"c": [
{
"v": "25 Nov"
},
{
"v": 15,
}
]
},
]
},
"options": {
"isStacked": "true",
"fill": 20,
"displayExactValues": true,
"legend": {"position":'none'},
}
}
You could achieve the desired results by utilizing column roles:
A column role describes the purpose of the data in that column: for
example, a column might hold data describing tooltip text, data point
annotations, or uncertainty indicators.
So, let's introduce a style role column:
{
"type": "string",
"role": "style",
"p": { "role": "style" }
}
And then, specify line style:
{ "v": "line { stroke-color: green }" }
The following modified example demonstrates how to style line segments in different colors:
var app = angular.module('myApp', ['googlechart']);
app.controller('chartCtrl', function ($scope) {
$scope.stat = {
"type": "LineChart",
"displayed": false,
"data": {
"cols": [
{
"id": "date",
"label": "Date",
"type": "string",
},
{
"id": "sales-id",
"label": "Sales",
"type": "number",
},
{
"type": "string",
"role": "style",
"p": { "role": "style" }
}
],
"rows": [
{
"c": [
{
"v": "20 Nov"
},
{
"v": 19,
},
{ "v": null }
]
},
{
"c": [
{
"v": "21 Nov"
},
{
"v": 17,
},
{ "v": null }
]
},
{
"c": [
{
"v": "22 Nov"
},
{
"v": 18,
},
{ "v": null }
]
},
{
"c": [
{
"v": "23 Nov"
},
{
"v": 18,
},
{ "v": null }
]
},
//FUTURE PROJECTION
{
"c": [
{
"v": "24 Nov"
},
{
"v": 17,
},
{ "v": "line { stroke-color: green }" }
]
},
{
"c": [
{
"v": "25 Nov"
},
{
"v": 15,
},
{ "v": "line { stroke-color: green }" }
]
},
]
},
"options": {
"isStacked": "true",
"fill": 20,
"displayExactValues": true,
"legend": { "position": 'none' },
}
}
});
<script src="http://code.angularjs.org/1.2.10/angular.js"></script>
<script src="http://bouil.github.io/angular-google-chart/ng-google-chart.js"></script>
<div ng-app='myApp' ng-controller="chartCtrl">
<div google-chart chart="stat"></div>
</div>
JSFiddle
Using MongoDB / Node consider the following payload:
var myObj = {
"date" : "1-23-45",
"one" : [
{
"a" : 8
},
{
"b" : 1
},
{
"c" : 9
},
{
"d" : 10
},
{
"e" : 12424
},
{
"f" : 11
},
{
"g" : 7
}
],
"two" : [
{
"h" : 6
},
{
"i" : 10
}
]
},
{
"date" : "1-24-45",
"one" : [
{
"a" : 8
},
{
"b" : 1
},
{
"c" : 9
},
{
"d" : 10
},
{
"e" : 12424
},
{
"f" : 11
},
{
"g" : 7
}
],
"two" : [
{
"h" : 6
},
{
"i" : 10
}
]
}
I am using Google Charts API and I would like to plot these points to a line graph. (see snippet)
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi?autoload={
'modules':[{
'name':'visualization',
'version':'1',
'packages':['corechart']
}]
}"></script>
<script type="text/javascript">
google.setOnLoadCallback(drawChart);
var myObj = {
"cols": [{
"id": "",
"label": "year",
"type": "string"
}, {
"id": "",
"label": "sales",
"type": "number"
}, {
"id": "",
"label": "expenses",
"type": "number"
}],
"rows": [{
"c": [{
"v": "2001"
}, {
"v": 3
}, {
"v": 5
}]
}, {
"c": [{
"v": "2002"
}, {
"v": 5
}, {
"v": 10
}]
}, {
"c": [{
"v": "2003"
}, {
"v": 6
}, {
"v": 4
}]
}, {
"c": [{
"v": "2004"
}, {
"v": 8
}, {
"v": 32
}]
}, {
"c": [{
"v": "2005"
}, {
"v": 3
}, {
"v": 56
}]
}]
}
function drawChart() {
var data = new google.visualization.DataTable(myObj);
var options = {
title: 'My Chart',
curveType: 'function',
legend: {
position: 'right'
}
};
var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="curve_chart" style="width: 100%; height: 500px"></div>
</body>
</html>
Using the JSON I am provided, what would be the most effective way to massage the data into the format accepted by Google Charts API? I have looked into D3 but it seemed to have a higher learning curve, would that be the most recommended route? Would it be better to query the dataset differently / aggregate the result?
Help is much appreciated, as this has been a 2 day long venture!
Update --
TL;DR
I need a script that goes from Format #1 => Format #2, no matter how big the payload is.
Format #1 - myObj
Format #2 -
var myObj = {
"cols": [{
"label": "Date",
"type": "string"
}, {
"label": "a",
"type": "number"
}, {
"label": "b",
"type": "number"
}, {
"label": "c",
"type": "number"
}, {
"label": "d",
"type": "number"
}, {
"label": "e",
"type": "number"
}, {
"label": "f",
"type": "number"
}, {
"label": "g",
"type": "number"
}, {
"label": "h",
"type": "number"
}, {
"label": "i",
"type": "number"
}
],
"rows": [{
"c": [{
"v": "day1"
}, {
"v": 300
}, {
"v": -500
}, {
"v": 23
}, {
"v": 120
}, {
"v": 150
}, {
"v": 1210
}, {
"v": 160
}, {
"v": 180
}, {
"v": 190
}]
}, {
"c": [{
"v": "day2"
}, {
"v": 1300
}, {
"v": -5200
}, {
"v": 253
}, {
"v": 6120
}, {
"v": 1350
}, {
"v": 110
}, {
"v": 2160
}, {
"v": 1180
}, {
"v": 1190
}]
}
]
}
Looking at your data and how it needs to be formatted, something like the below would work. You will need to loop over each object to get the cols and then map over each array to get the rows.
var dataObj = {
"cols": [],
"rows": []
};
for(property in myObj) {
if(typeof myObj[property] === 'string') {
dataObj.cols.push({
"label": property,
"type": "string"
});
} else {
dataObj.rows.push({
"c": []
});
dataObj.rows[dataObj.rows.length - 1]["c"].push({
"date": "day" + dataObj.rows.length // The day: 1, 2, 3, etc.
});
myObj[property].map(function(object) {
for(prop in object) {
dataObj.cols.push({
"label": prop,
"type": "number"
});
dataObj.rows[dataObj.rows.length - 1]["c"].push({
"v": object[prop]
});
}
});
}
}
JSFiddle with Google Chart example (Open Console to see formatted data)
I am trying to lazyload the following two scripts into an Angular ui-router partial view.
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawVisualization);
function drawVisualization() {
// Some raw data (not necessarily accurate)
var data = google.visualization.arrayToDataTable([
['Month', 'Bolivia', 'Ecuador', 'Madagascar', 'Papua New Guinea', 'Rwanda', 'Average'],
['2004/05', 165, 938, 522, 998, 450, 614.6],
['2005/06', 135, 1120, 599, 1268, 288, 682],
['2006/07', 157, 1167, 587, 807, 397, 623],
['2007/08', 139, 1110, 615, 968, 215, 609.4],
['2008/09', 136, 691, 629, 1026, 366, 569.6]
]);
var options = {
title : 'Monthly Coffee Production by Country',
vAxis: {title: "Cups"},
hAxis: {title: "Month"},
seriesType: "bars",
series: {5: {type: "line"}}
};
var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
I was able to accomplish this using the directive found here.
The issue is that the second script works when loaded normally, but does not work when lazyloaded. Instead of finding the div with id='chart-div' and replacing it with the google chart, it just produces a blank page. I have tried it with a setTimeout to ensure the first script has loaded, and the console is showing up error free.
Anyone familiar with the google charts api, and why their second script (listed above) does not work with the lazyloading directive I'm using?
Edit: Adding additional detail to solution.
Solution:
Add google charts wrapper Link to Directive
Create custom directive to insert div element that holds chart. If the html is inserted directly into the partial without the use of a directive, any HTML after the div will be erased.
sample directive to insert chart.
app.directive('overviewChart', function () {
return {
restrict: 'E',
template: '<div google-chart chart="chart" style="{{chart.cssStyle}}"/>'
};
});
Add chart data to partial controller.
Sample chart data to be added to controller:
$scope.chart = {
"type": "ColumnChart",
"cssStyle": "height:500px; width:100%;",
"data": {
"cols": [
{
"id": "month",
"label": "Month",
"type": "string",
"p": {}
},
{
"id": "laptop-id",
"label": "Laptop",
"type": "number",
"p": {}
},
{
"id": "desktop-id",
"label": "Desktop",
"type": "number",
"p": {}
},
{
"id": "server-id",
"label": "Server",
"type": "number",
"p": {}
},
{
"id": "cost-id",
"label": "Shipping",
"type": "number"
}
],
"rows": [
{
"c": [
{
"v": "January"
},
{
"v": 19,
"f": "42 items"
},
{
"v": 12,
"f": "Ony 12 items"
},
{
"v": 7,
"f": "7 servers"
},
{
"v": 4
}
]
},
{
"c": [
{
"v": "February"
},
{
"v": 13
},
{
"v": 1,
"f": "1 unit (Out of stock this month)"
},
{
"v": 12
},
{
"v": 2
}
]
},
{
"c": [
{
"v": "March"
},
{
"v": 24
},
{
"v": 0
},
{
"v": 11
},
{
"v": 6
}
]
}
]
},
"options": {
"title": "Sales per month",
"isStacked": "true",
"fill": 20,
"displayExactValues": true,
"vAxis": {
"title": "Sales unit",
"gridlines": {
"count": 6
}
},
"hAxis": {
"title": "Date"
}
},
"formatters": {},
"displayed": true
};
Insert custom directive into partial html.
I have a page that connects to a google analytics account. On the page I have a GEO chart focused on the state of Florida.
When I hover over the markers on the map, about half of the markers appear to be correct. The other half are labeled with city names that dont match their marker on the map. Like markers in the middle of the state being labeled as a city in Brazil For examples see the screenshots below.
Here's my code that sets up the GEO Charts. Any idea what Im doing wrong?
Also here is a jsbin
(function(w,d,s,g,js,fjs){
g=w.gapi||(w.gapi={});g.analytics={q:[],ready:function(cb){this.q.push(cb);}};
js=d.createElement(s);fjs=d.getElementsByTagName(s)[0];
js.src='https://apis.google.com/js/platform.js';
fjs.parentNode.insertBefore(js,fjs);js.onload=function(){g.load('analytics');};
}(window,document,'script'));
gapi.analytics.ready(function() {
var CLIENT_ID = '663097249213-ankiu39ud1m7imaa4r5h5mtt4bnpp9b5.apps.googleusercontent.com';
gapi.analytics.auth.authorize({
container: 'auth-button',
clientid: CLIENT_ID,
});
var viewSelector = new gapi.analytics.ViewSelector({
container: 'view-selector'
});
var stateMap = new gapi.analytics.googleCharts.DataChart({
query: {
'dimensions': 'ga:city',
'metrics': 'ga:sessions',
'start-date': '14daysAgo',
'end-date': 'yesterday',
},
chart: {
type: 'GEO',
container: 'state',
options: {
region: 'US-FL',
resolution: 'metros',
displayMode: 'markers',
width:'100%',
height:'100%',
keepAspectRatio:true
}
}
});
gapi.analytics.auth.on('success', function(response) {
viewSelector.execute();
$('#auth-button').hide();
});
viewSelector.on('change', function(ids) {
var newIds = {
query: {
ids: ids
}
};
stateMap.set(newIds).execute();
});
});
Here are the request headers:
Remote Address:74.125.137.95:443
Request URL:https://content.googleapis.com/analytics/v3/data/ga?start-date=7daysAgo&end-date=yesterday&dimensions=ga%3AuserType&metrics=ga%3Asessions&sort=-ga%3Asessions&max-results=9&ids=ga%3A91097884&output=dataTable&embedApiVersion=v1
Request Method:GET
Status Code:200 OK
Request Headers
:host:content.googleapis.com
:method:GET
:path:/analytics/v3/data/ga?start-date=7daysAgo&end-date=yesterday&dimensions=ga%3AuserType&metrics=ga%3Asessions&sort=-ga%3Asessions&max-results=9&ids=ga%3A91097884&output=dataTable&embedApiVersion=v1
:scheme:https
:version:HTTP/1.1
accept:*/*
accept-encoding:gzip,deflate,sdch
accept-language:en-US,en;q=0.8
authorization:Bearer ya29.qgAhgT4Oq1u6e_cfcv1qP2ieP_QUbPM0WozLPpagwZ_9rmXM8G0s0uDK
cache-control:no-cache
pragma:no-cache
referer:https://content.googleapis.com/static/proxy.html?jsh=m%3B%2F_%2Fscs%2Fapps-static%2F_%2Fjs%2Fk%3Doz.gapi.en.FnxxMUT2ulE.O%2Fm%3D__features__%2Fam%3DAQ%2Frt%3Dj%2Fd%3D1%2Ft%3Dzcms%2Frs%3DAGLTcCMEC-DWdYC4P42L_5byzwhSZYF3Cg
user-agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/38.0.2125.104 Safari/537.36
x-client-data:CJe2yQEIprbJAQiptskBCMG2yQEI8IjKAQiPlMoBCN6WygE=
x-clientdetails:appVersion=5.0%20(Macintosh%3B%20Intel%20Mac%20OS%20X%2010_10_0)%20AppleWebKit%2F537.36%20(KHTML%2C%20like%20Gecko)%20Chrome%2F38.0.2125.104%20Safari%2F537.36&platform=MacIntel&userAgent=Mozilla%2F5.0%20(Macintosh%3B%20Intel%20Mac%20OS%20X%2010_10_0)%20AppleWebKit%2F537.36%20(KHTML%2C%20like%20Gecko)%20Chrome%2F38.0.2125.104%20Safari%2F537.36
x-goog-encode-response-if-executable:base64
x-javascript-user-agent:google-api-javascript-client/1.1.0-beta
x-origin:http://affordable-glass.com
x-referer:http://affordable-glass.com
Query String Parametersview sourceview URL encoded
start-date:7daysAgo
end-date:yesterday
dimensions:ga:userType
metrics:ga:sessions
sort:-ga:sessions
max-results:9
ids:ga:91097884
output:dataTable
embedApiVersion:v1
Response Headers
alternate-protocol:443:quic,p=0.01
cache-control:private, max-age=0, must-revalidate, no-transform
content-encoding:gzip
content-length:555
content-type:application/json; charset=UTF-8
date:Sun, 26 Oct 2014 00:35:09 GMT
etag:"C7PuqpcNYAngGhjHeeJxl43WaQM/65Qv4TMpW0C9gHm-VUHXAtDeU9g"
expires:Sun, 26 Oct 2014 00:35:09 GMT
server:GSE
status:200 OK
vary:Referer
vary:X-Origin
vary:Origin
version:HTTP/1.1
x-content-type-options:nosniff
x-frame-options:SAMEORIGIN
x-xss-protection:1; mode=block
Here is the data that gets returned by Google:
{
"kind": "analytics#gaData",
"id": "https://www.googleapis.com/analytics/v3/data/ga?ids=ga:91097884&dimensions=ga:city&metrics=ga:sessions&start-date=14daysAgo&end-date=yesterday",
"query": {
"start-date": "14daysAgo",
"end-date": "yesterday",
"ids": "ga:91097884",
"dimensions": "ga:city",
"metrics": ["ga:sessions"],
"start-index": 1,
"max-results": 1000
},
"itemsPerPage": 1000,
"totalResults": 47,
"selfLink": "https://www.googleapis.com/analytics/v3/data/ga?ids=ga:91097884&dimensions=ga:city&metrics=ga:sessions&start-date=14daysAgo&end-date=yesterday",
"profileInfo": {
"profileId": "91097884",
"accountId": "54755159",
"webPropertyId": "UA-54755159-1",
"internalWebPropertyId": "87741876",
"profileName": "All Web Site Data",
"tableId": "ga:91097884"
},
"containsSampledData": false,
"columnHeaders": [{
"name": "ga:city",
"columnType": "DIMENSION",
"dataType": "STRING"
}, {
"name": "ga:sessions",
"columnType": "METRIC",
"dataType": "INTEGER"
}],
"totalsForAllResults": {
"ga:sessions": "75"
},
"dataTable": {
"cols": [{
"id": "ga:city",
"label": "ga:city",
"type": "string"
}, {
"id": "ga:sessions",
"label": "ga:sessions",
"type": "number"
}],
"rows": [{
"c": [{
"v": "(not set)"
}, {
"v": "3"
}]
}, {
"c": [{
"v": "Ashburn"
}, {
"v": "1"
}]
}, {
"c": [{
"v": "Atlanta"
}, {
"v": "4"
}]
}, {
"c": [{
"v": "Bari"
}, {
"v": "1"
}]
}, {
"c": [{
"v": "Belo Horizonte"
}, {
"v": "1"
}]
}, {
"c": [{
"v": "Biloxi"
}, {
"v": "1"
}]
}, {
"c": [{
"v": "Birmingham"
}, {
"v": "1"
}]
}, {
"c": [{
"v": "Bradenton"
}, {
"v": "2"
}]
}, {
"c": [{
"v": "Chandler"
}, {
"v": "2"
}]
}, {
"c": [{
"v": "Columbus"
}, {
"v": "1"
}]
}, {
"c": [{
"v": "Cordoba"
}, {
"v": "1"
}]
}, {
"c": [{
"v": "Dallas"
}, {
"v": "1"
}]
}, {
"c": [{
"v": "Eastpoint"
}, {
"v": "1"
}]
}, {
"c": [{
"v": "Erlanger"
}, {
"v": "1"
}]
}, {
"c": [{
"v": "Fort Bragg"
}, {
"v": "1"
}]
}, {
"c": [{
"v": "Foz do Iguacu"
}, {
"v": "1"
}]
}, {
"c": [{
"v": "Fresno"
}, {
"v": "1"
}]
}, {
"c": [{
"v": "Funchal"
}, {
"v": "1"
}]
}, {
"c": [{
"v": "Houston"
}, {
"v": "1"
}]
}, {
"c": [{
"v": "Jacksonville"
}, {
"v": "1"
}]
}, {
"c": [{
"v": "Lake Oswego"
}, {
"v": "1"
}]
}, {
"c": [{
"v": "Lake Worth"
}, {
"v": "2"
}]
}, {
"c": [{
"v": "Londrina"
}, {
"v": "2"
}]
}, {
"c": [{
"v": "Lynn Haven"
}, {
"v": "2"
}]
}, {
"c": [{
"v": "Mar del Plata"
}, {
"v": "1"
}]
}, {
"c": [{
"v": "Marianna"
}, {
"v": "2"
}]
}, {
"c": [{
"v": "Middletown"
}, {
"v": "2"
}]
}, {
"c": [{
"v": "Miramar Beach"
}, {
"v": "1"
}]
}, {
"c": [{
"v": "Montreal"
}, {
"v": "1"
}]
}, {
"c": [{
"v": "Navarre"
}, {
"v": "1"
}]
}, {
"c": [{
"v": "Panama City"
}, {
"v": "9"
}]
}, {
"c": [{
"v": "Panama City Beach"
}, {
"v": "7"
}]
}, {
"c": [{
"v": "Pecan Grove"
}, {
"v": "1"
}]
}, {
"c": [{
"v": "Porto Alegre"
}, {
"v": "1"
}]
}, {
"c": [{
"v": "Providence"
}, {
"v": "1"
}]
}, {
"c": [{
"v": "Rio de Janeiro"
}, {
"v": "1"
}]
}, {
"c": [{
"v": "Sabadell"
}, {
"v": "1"
}]
}, {
"c": [{
"v": "Sao Paulo"
}, {
"v": "3"
}]
}, {
"c": [{
"v": "Seria"
}, {
"v": "1"
}]
}, {
"c": [{
"v": "Surrey"
}, {
"v": "1"
}]
}, {
"c": [{
"v": "Tallahassee"
}, {
"v": "1"
}]
}, {
"c": [{
"v": "Tampa"
}, {
"v": "1"
}]
}, {
"c": [{
"v": "The Woodlands"
}, {
"v": "1"
}]
}, {
"c": [{
"v": "Toronto"
}, {
"v": "1"
}]
}, {
"c": [{
"v": "Virginia Beach"
}, {
"v": "1"
}]
}, {
"c": [{
"v": "Wellington"
}, {
"v": "1"
}]
}, {
"c": [{
"v": "Wyndham"
}, {
"v": "1"
}]
}]
}
}
It does the same if I try it with a US map:
I have been working with the GEO chart for the EMBED api and had the exact same issues. It seems to me that the GEO chart is pretty feature limited, and the region you set has no bearing on what data it shows, but instead, only zooms the map to the appropriate viewing area. I added a filter to my query, I think this will work for you...
"query": {
"start-date": "14daysAgo",
"end-date": "yesterday",
"ids": "ga:91097884",
"dimensions": "ga:city",
"metrics": ["ga:sessions"],
"start-index": 1,
"max-results": 1000,
"filters": "ga:region==Florida"
},
Note the last line with the filter, I know this may not be ideal, but it is the only way I could get the Embed GEO chart to work properly.