Convert object to Chartis.js structure - javascript

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));

Related

How to calculate boolean symmetric difference ("Delat-Mesh") on two 3D meshes in JavaScript?

Update (2021-06-03): To clarify my question, since there has been no response so far
I want to calculate the differences (boolean symmetric difference, XOR) of two 3D meshes and save the determined "delta mesh" in a second step as a file in OBJ format.
Is there a JavaScript implementation to calculate boolean symmetric difference?
To clearify my question I added another picture:
For this purpose I have already implemented a code in JavaScript that reads two OBJ files and transfers them into arrays. The arrays each contain the vertices, the indices of the vertices for the description of the faces etc.
Result: (Shape_1 & Shape_2 are Input meshes (Model A & B) and Shape_3 is the desired output mesh to be calculated)
Shape_1_Vertices = {
"array_3D_Mesh_1": [
{
"0": {
"X": -25,
"Y": -15,
"Z": 0
}
},
{
"1": {
"X": -25,
"Y": -15,
"Z": 100
}
},
{
"2": {
"X": -25,
"Y": 15,
"Z": 0
}
},
{
"3": {
"X": -25,
"Y": 15,
"Z": 100
}
},
{
"4": {
"X": 25,
"Y": -15,
"Z": 0
}
},
{
"5": {
"X": 25,
"Y": -15,
"Z": 100
}
},
{
"6": {
"X": 25,
"Y": 15,
"Z": 0
}
},
{
"7": {
"X": 25,
"Y": 15,
"Z": 100
}
}
]
}
Shape_1_Faces = {
"array_FaceIndices_Mesh_1": [
{
"face0": {
"1": 2,
"2": 0,
"3": 3
}
},
{
"face1": {
"1": 3,
"2": 0,
"3": 1
}
},
{
"face2": {
"1": 6,
"2": 2,
"3": 7
}
},
{
"face3": {
"1": 7,
"2": 2,
"3": 3
}
},
{
"face4": {
"1": 4,
"2": 6,
"3": 5
}
},
{
"face5": {
"1": 5,
"2": 6,
"3": 7
}
},
{
"face6": {
"1": 0,
"2": 4,
"3": 1
}
},
{
"face7": {
"1": 1,
"2": 4,
"3": 5
}
},
{
"face8": {
"1": 1,
"2": 5,
"3": 3
}
},
{
"face9": {
"1": 3,
"2": 5,
"3": 7
}
},
{
"face10": {
"1": 4,
"2": 0,
"3": 6
}
},
{
"face11": {
"1": 6,
"2": 0,
"3": 2
}
}
]
}
Shape_2_Vertices = {
"array_3D_Mesh_2": [
{
"0": {
"X": -20,
"Y": -40,
"Z": 0
}
},
{
"1": {
"X": -20,
"Y": -40,
"Z": 40
}
},
{
"2": {
"X": -20,
"Y": 40,
"Z": 0
}
},
{
"3": {
"X": -20,
"Y": 40,
"Z": 40
}
},
{
"4": {
"X": 20,
"Y": -40,
"Z": 0
}
},
{
"5": {
"X": 20,
"Y": -40,
"Z": 40
}
},
{
"6": {
"X": 20,
"Y": 40,
"Z": 0
}
},
{
"7": {
"X": 20,
"Y": 40,
"Z": 40
}
}
]
}
Shape_2_Faces = {
"array_FaceIndices_Mesh_2": [
{
"face0": {
"1": 0,
"2": 4,
"3": 1
}
},
{
"face1": {
"1": 1,
"2": 4,
"3": 5
}
},
{
"face2": {
"1": 2,
"2": 0,
"3": 3
}
},
{
"face3": {
"1": 3,
"2": 0,
"3": 1
}
},
{
"face4": {
"1": 6,
"2": 2,
"3": 7
}
},
{
"face5": {
"1": 7,
"2": 2,
"3": 3
}
},
{
"face6": {
"1": 4,
"2": 6,
"3": 5
}
},
{
"face7": {
"1": 5,
"2": 6,
"3": 7
}
},
{
"face8": {
"1": 7,
"2": 3,
"3": 5
}
},
{
"face9": {
"1": 5,
"2": 3,
"3": 1
}
},
{
"face10": {
"1": 4,
"2": 0,
"3": 6
}
},
{
"face11": {
"1": 6,
"2": 0,
"3": 2
}
}
]
}
Shape_4_Vertices = {
"array_3D_Mesh_4": [
{
"0": {
"X": -25,
"Y": -15,
"Z": 0
}
},
{
"1": {
"X": -25,
"Y": -15,
"Z": 100
}
},
{
"2": {
"X": -25,
"Y": 15,
"Z": 0
}
},
{
"3": {
"X": -25,
"Y": 15,
"Z": 100
}
},
{
"4": {
"X": -20,
"Y": -40,
"Z": 0
}
},
{
"5": {
"X": -20,
"Y": -40,
"Z": 40
}
},
{
"6": {
"X": -20,
"Y": -15,
"Z": 0
}
},
{
"7": {
"X": -20,
"Y": -15,
"Z": 40
}
},
{
"8": {
"X": -20,
"Y": 15,
"Z": 0
}
},
{
"9": {
"X": -20,
"Y": 15,
"Z": 40
}
},
{
"10": {
"X": -20,
"Y": 40,
"Z": 0
}
},
{
"11": {
"X": -20,
"Y": 40,
"Z": 40
}
},
{
"12": {
"X": 20,
"Y": -40,
"Z": 0
}
},
{
"13": {
"X": 20,
"Y": -40,
"Z": 40
}
},
{
"14": {
"X": 20,
"Y": -15,
"Z": 0
}
},
{
"15": {
"X": 20,
"Y": -15,
"Z": 40
}
},
{
"16": {
"X": 20,
"Y": 15,
"Z": 0
}
},
{
"17": {
"X": 20,
"Y": 15,
"Z": 40
}
},
{
"18": {
"X": 20,
"Y": 40,
"Z": 0
}
},
{
"19": {
"X": 20,
"Y": 40,
"Z": 40
}
},
{
"20": {
"X": 25,
"Y": -15,
"Z": 0
}
},
{
"21": {
"X": 25,
"Y": -15,
"Z": 100
}
},
{
"22": {
"X": 25,
"Y": 15,
"Z": 0
}
},
{
"23": {
"X": 25,
"Y": 15,
"Z": 100
}
}
]
}
Shape_4_Faces = {
"array_FaceIndices_Mesh_4": [
{
"face0": {
"1": 9,
"2": 7,
"3": 8
}
},
{
"face1": {
"1": 8,
"2": 7,
"3": 6
}
},
{
"face2": {
"1": 16,
"2": 14,
"3": 17
}
},
{
"face3": {
"1": 17,
"2": 14,
"3": 15
}
},
{
"face4": {
"1": 9,
"2": 17,
"3": 7
}
},
{
"face5": {
"1": 7,
"2": 17,
"3": 15
}
},
{
"face6": {
"1": 8,
"2": 16,
"3": 9
}
},
{
"face7": {
"1": 9,
"2": 16,
"3": 17
}
},
{
"face8": {
"1": 7,
"2": 15,
"3": 6
}
},
{
"face9": {
"1": 6,
"2": 15,
"3": 14
}
},
{
"face10": {
"1": 16,
"2": 22,
"3": 14
}
},
{
"face11": {
"1": 14,
"2": 22,
"3": 20
}
},
{
"face12": {
"1": 16,
"2": 8,
"3": 18
}
},
{
"face13": {
"1": 18,
"2": 8,
"3": 10
}
},
{
"face14": {
"1": 6,
"2": 0,
"3": 8
}
},
{
"face15": {
"1": 8,
"2": 0,
"3": 2
}
},
{
"face16": {
"1": 6,
"2": 14,
"3": 4
}
},
{
"face17": {
"1": 4,
"2": 14,
"3": 12
}
},
{
"face18": {
"1": 6,
"2": 4,
"3": 7
}
},
{
"face19": {
"1": 7,
"2": 4,
"3": 5
}
},
{
"face20": {
"1": 15,
"2": 7,
"3": 13
}
},
{
"face21": {
"1": 13,
"2": 7,
"3": 5
}
},
{
"face22": {
"1": 9,
"2": 17,
"3": 11
}
},
{
"face23": {
"1": 11,
"2": 17,
"3": 19
}
},
{
"face24": {
"1": 15,
"2": 13,
"3": 14
}
},
{
"face25": {
"1": 14,
"2": 13,
"3": 12
}
},
{
"face26": {
"1": 16,
"2": 18,
"3": 17
}
},
{
"face27": {
"1": 17,
"2": 18,
"3": 19
}
},
{
"face28": {
"1": 4,
"2": 12,
"3": 5
}
},
{
"face29": {
"1": 5,
"2": 12,
"3": 13
}
},
{
"face30": {
"1": 9,
"2": 11,
"3": 8
}
},
{
"face31": {
"1": 8,
"2": 11,
"3": 10
}
},
{
"face32": {
"1": 18,
"2": 10,
"3": 19
}
},
{
"face33": {
"1": 19,
"2": 10,
"3": 11
}
},
{
"face34": {
"1": 6,
"2": 7,
"3": 0
}
},
{
"face35": {
"1": 0,
"2": 7,
"3": 1
}
},
{
"face36": {
"1": 1,
"2": 7,
"3": 15
}
},
{
"face37": {
"1": 1,
"2": 15,
"3": 21
}
},
{
"face38": {
"1": 21,
"2": 15,
"3": 20
}
},
{
"face39": {
"1": 20,
"2": 15,
"3": 14
}
},
{
"face40": {
"1": 2,
"2": 0,
"3": 3
}
},
{
"face41": {
"1": 3,
"2": 0,
"3": 1
}
},
{
"face42": {
"1": 8,
"2": 2,
"3": 9
}
},
{
"face43": {
"1": 9,
"2": 2,
"3": 3
}
},
{
"face44": {
"1": 9,
"2": 3,
"3": 23
}
},
{
"face45": {
"1": 9,
"2": 23,
"3": 17
}
},
{
"face46": {
"1": 17,
"2": 23,
"3": 22
}
},
{
"face47": {
"1": 17,
"2": 22,
"3": 16
}
},
{
"face48": {
"1": 20,
"2": 22,
"3": 21
}
},
{
"face49": {
"1": 21,
"2": 22,
"3": 23
}
},
{
"face50": {
"1": 1,
"2": 21,
"3": 3
}
},
{
"face51": {
"1": 3,
"2": 21,
"3": 23
}
}
]
}
To clarify what I have in mind, I have attached a picture.
shows the initial bodies to be compared, which are available individually in OBJ format
shows the superimposed positioning of both bodies. (The positioning is automatically correct and as desired during import, so I don't have to worry about that).
shows the desired "delta mesh", which I want to calculate and output as a file in OBJ format. (The body in the dashed frame shows the intersection, which has to be cut out in the end, but is not of interest).
If you would want to realize my intention with boolean operations, you would have to perform boolean symmetric difference or XOR (exclusive OR).
I attached three files, wehre you can find the two input meshes and the desired output, which I want to calculate with an algorithm.
Shape_1_Input_Model_A
Shape_2_Input_Model_B
Shape_4_Desired_Output http://www.filedropper.com/shape4

Google charts angular data not displaying with custom cols

I have the following array of javascript objects which I store in $scope.o
[{"id":"jimmy.cibby#redsss.com","label":"marc.cibby#redsss.com","type":"number","p":{}},{"id":"matthew.cibby#redsss.com","label":"matthew.cibby#redsss.com","type":"number","p":{}},{"id":"ari.grads#redsssdsss.com","label":"ari.grads#redsssdsss.com","type":"number","p":{}},{"id":"yup#redsssdsss.com","label":"yup#redsssdsss.com","type":"number","p":{}},{"id":"service#redsssdsss.com","label":"service#redsss.com","type":"number"}]
I then have the following setup for google charts:
$scope.data= {
"type": "LineChart",
"displayed": true,
"data": {
"cols":$scope.o,
"rows": [
{
"c": [
{
"v": "January"
},
{
"v": 19,
"f": "42 items"
},
{
"v": 12,
"f": "Ony 12 items"
},
{
"v": 7,
"f": "7 servers"
},
{
"v": 4
},
{"v": 5}
]
},
{
"c": [
{
"v": "February"
},
{
"v": 13
},
{
"v": 1,
"f": "1 unit (Out of stock this month)"
},
{
"v": 12
},
{
"v": 2
},
{
"v": 2
}
]
},
{
"c": [
{
"v": "March"
},
{
"v": 24
},
{
"v": 5
},
{
"v": 11
},
{
"v": 6
},
{
"v":12
}
]
}
]
},
"options": {
"title": "some data",
"tooltip": {trigger: "selection"},
"isStacked": "true",
"fill": 20,
"displayExactValues": true,
"chartArea": {width: "70%", height: "70%"},
"vAxis": {
"title": "data",
"gridlines": {
"count": 10
}
},
"hAxis": {
"title": "month"
}
},
"formatters": {}
}
}]);
as you can see, all I have done to the sample app here: http://angular-google-chart.github.io/angular-google-chart/docs/latest/examples/multi-chart/
is change the columns to custom ones.
This kind of works- the legend pulls through the email address labels but the graph is empty with no data on it.
Any suggestions as to why this would happen?
Fixed it... I needed to add:
$scope.o.push({
id: "month",
label: "Month",
type: "string"
});
before the for loop. Rookie mistake!

How to style angular-google-line-chart to have two styles for the same line?

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

Formatting JSON for Google Charts API

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)

GA GEO Chart cities labeled incorrectly

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.

Categories