GA GEO Chart cities labeled incorrectly - javascript

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.

Related

How to bring the elements under different nodes onto one common node in JSON using JavaScript?

Here is sample JSON data. It has one 'PO' and inside 'PO' there are multiple 'SO' nodes. Inside an 'SO' node there can be multiple nodes each containing one 'B', 'R', 'F'.
{
"PO": [
{
"SO": [
{
"B": "XXX",
"R": "YYY",
"F": "ZZZ"
},
{
"B": "MMM",
"R": "NNN",
"F": "PPP"
}
],
"SO": [
{
"B": "111",
"R": "222",
"F": "333"
},
{
"B": "333",
"R": "444",
"F": "555"
},
{
"B": "666",
"R": "777",
"F": "888"
}
]
}
]
}
I want this data to be like this
{
"PO": [
{
"B": "XXX",
"R": "YYY",
"F": "ZZZ"
},
{
"B": "MMM",
"R": "NNN",
"F": "PPP"
},
{
"B": "111",
"R": "222",
"F": "333"
},
{
"B": "333",
"R": "444",
"F": "555"
},
{
"B": "666",
"R": "777",
"F": "888"
}
]
}
How can I do this in Javascript?
I tried obj.PO[0].SO where obj is the JSON object and some replace functions to replace the 'SO' nodes, but couldn't get it to work.
The problem is that your JSON contains duplicate keys. This means that when JSON.parse converts the JSON string into an object, one value will override the other, and as such you will obtain either
{
"PO": [
{
"SO": [
{
"B": "XXX",
"R": "YYY",
"F": "ZZZ"
},
{
"B": "MMM",
"R": "NNN",
"F": "PPP"
}
]
}
]
}
or
{
"PO": [
{
"SO": [
{
"B": "111",
"R": "222",
"F": "333"
},
{
"B": "333",
"R": "444",
"F": "555"
},
{
"B": "666",
"R": "777",
"F": "888"
}
]
}
]
}
the ideal solution would be to have your input be proper JSON without key collisions; as a workaround, you can instead use an event-based ("SAX style") JSON parser such as clarinet to preserve all information.

Convert object to Chartis.js structure

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

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)

Categories