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"
}
]
},
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>
Related
I want to update an existing object/image in a Google Slide. This works as long as the object exists:
var requests = [
{
"deleteObject": {
"objectId": 'image01'
}
},
{
"createImage": {
"url": imageUrl,
"objectId": 'image01',
"elementProperties": {
"pageObjectId": pageId,
"size": {
"width": {
"magnitude": 250,
"unit": "PT"
},
"height": {
"magnitude": 250,
"unit": "PT"
}
},
"transform": {
"scaleX": 1,
"scaleY": 1,
"translateX": 200,
"translateY": 100,
"unit": "PT"
}
}
}
}
];
var response = Slides.Presentations.batchUpdate({'requests': requests}, presentationId);
However, if a user previously deleted the object in the presentation, it is not re-created.
The following error message appear:
Invalid requests[0].deleteObject: The object (image01) could not be
found.
How can I query whether an object exists in presentation?
How about retrieving a object list using slides.presentations.get? In order to confirm whether objects exist, it uses slides/pageElements/objectId for fields of slides.presentations.get. You can know the exist of objects using the object list.
Sample script :
var response = Slides.Presentations.get(presentationId);
response.slides.forEach(function(e1, i1){
e1.pageElements.forEach(function(e2){
Logger.log("Page %s, objectId %s", i1 + 1, e2.objectId);
});
});
Result :
Page 1.0, objectId ###
Page 2.0, objectId ###
Page 3.0, objectId ###
If this was not useful for you, I'm sorry.
Edit :
If you want to search a value from whole JSON, you can use following simple script. When value2 is included in sampledata, ~JSON.stringify(sampledata).indexOf('value2') becomes true. In this sample, ok is shown, because value2 is included in sampledata.
But it's a bit of a stretch. If you can know the complete structure of JSON, I think that the compare of value using key is better.
var sampledata = {key1: "value1", key2: "value2"};
if (~JSON.stringify(sampledata).indexOf('value2')) {
Logger.log("ok")
}
I am attempting to generate a stacked bar chart with c3 when using a JSON payload (code below). However, when I group the data, instead of having a stacking behavior, they overlay instead. If I use the column structure, I get the intended behavior, but this means that I'd have different code generate for a stacked bar chart versus my other visuals (ie timeseries chart).
var chart = c3.generate({
data: {
x: "x-axis",
json:[
{ "x-axis": "0",
"data1": 30
},
{ "x-axis": "0",
"data2": 40
}],
keys: {
x: "x-axis",
value: ["data1", "data2"]
},
groups: [
['data1', 'data2']
],
type: 'bar'
}
});
Here is a fiddle: http://jsfiddle.net/cjrobinson/ozf4fzcb/
It's weird they overplot each other in your example, I'd report that as a bug to c3
If you don't want to use the columns[] format, you could do it like below, would still need some data wrangling though:
var chart = c3.generate({
data: {
x: "x-axis",
json:[
{ "x-axis": "0",
"data1": 30,
"data2": 40
},
{ "x-axis": "1",
"data1" :20,
"data2": 60
}],
// etc etc
keys: {
x: "x-axis",
value: ["data1", "data2"]
},
groups: [
['data1', 'data2']
],
type: 'bar'
}
});
http://jsfiddle.net/dhgujwy7/1/
I need some help to populate google map markers by using data on my Mongodb with NodeJS.
This is my Model Schema (models/listing.js):
var restful = require('node-restful');
var mongoose = restful.mongoose;
// Schema
var listingSchema = new mongoose.Schema({
category: String,
title: String,
location: String,
latitude: Number,
longitude: Number,
url: String,
type: String,
type_icon: String
},
{ collection: 'listing' }
);
// Return Model
module.exports = restful.model('Listing', listingSchema);
When I use postman to GET /api/listing, this is what I have
[{
"_id": "57092ca64f43442f0bcd6a95",
"category": "services",
"title": "Musa 24 hours Printing",
"location": "16 Bali Lane, Singapore 189852",
"latitude": 1.3007598,
"longitude": 103.8588499,
"url": "http://www.musa-group.com/24hrsinternet/printing.html",
"type": "Printing",
"type_icon": "assets/icons/media/text.png",
"gallery": [
"http://i.imgur.com/HwiyMCK.png"
]},
{
"_id": "57092ca64f43442f0bcd6a96",
"category": "services",
"title": "Rocket Printers SG",
"location": "146 Jalan Bukit Merah, Singapore 160146",
"latitude": 1.2778769,
"longitude": 103.8308443,
"url": "http://www.rocketprinters-sg.com/",
"type": "Printing",
"type_icon": "assets/icons/media/text.png",
"gallery": [
"http://i.imgur.com/XPYgZ7a.jpg"
]
}]
On my index.ejs file, the markers are currently pulled from an items.json.txt file
<script>
var _latitude = 1.36080344;
var _longitude = 103.81565094;
var jsonPath = 'assets/json/items.json.txt';
// Load JSON data and create Google Maps
$.getJSON(jsonPath)
.done(function(json) {
createHomepageGoogleMap(_latitude,_longitude,json);
})
.fail(function( jqxhr, textStatus, error ) {
console.log(error);
});
// Set if language is RTL and load Owl Carousel
$(window).load(function(){
var rtl = false; // Use RTL
initializeOwl(rtl);
});
autoComplete();
</script>
How can I change the source from 'items.json.txt' to my 'Listing' database collection? Much appreciation for any help at all!
Assuming your JSON files has the same structure as the JSON returned by /api/listing, you can simply replace the URL of your JSON file by yourserver.com:XX/api/listing, assuming the server yourserver.com is running your API on port XX.
I suspect the jQuery.getJson method is just a wrapper around jQuery.get that adds parameters to the request such as an appropriate Content-Type header.
I have successfully implemented code for a JSONP request, retrieving data for multiple countries and displaying them as lines in a chart.
However, I would need to get the title, units, copyright etc. from the JSON as well, to be able to display that elements on the graph too.
Now, I wonder how this could be done.
The JSON response could look like this:
[
[
"series",
[
{
"data": [
[
2007,
2239300
],
[
2008,
2237490
],
[
2009,
2167070
],
[
2010,
2204450
]
],
"name": "France"
},
{
"data": [
[
2007,
2324234
],
[
2008,
3456352
],
[
2009,
1241422
],
[
2010,
4543231
]
],
"name": "Germany"
}
]
],
[
"title",
{
"text": "Title here"
}
],
[
"yAxis",
{
"text": "The units here"
}
]
]
My client's code would need to be changed then. For the moment it looks like this:
$.getJSON(url, {selectedCountries: "France,Germany,Switzerland", type: "jsonp"})
.done(function(data)
{
options.series = data;
var chart = new Highcharts.Chart(options);
})
.fail(function(jqxhr, textStatus, error)
{
var err = textStatus + ", " + error;
console.log( "Request Failed: " + err );
})
And I guess it must turn into something like this:
options.series = data['series']['data'];
options.title = data['title'];
But that doesn't work. Could anyone give me a hint what I should do? Thanks a lot!
Ok, got it going finally. One has to pass the JSON as an object (and not an array, and neither as string (so, no quotes like ' or " around the object!). Works like a charm here on fiddle.
Here the code:
$(function () {
var options = {
chart: {
renderTo: 'container',
type: 'spline',
marginBottom: 50
},
series: [{}]
};
data = {
"title": {
"text": "Here goes the title"
},
"yAxis": {
"title": {
"text": "Here go the units"
}
},
"series": [{
"name": "France",
"data": [[2006,2189260],[2007,2239300],[2008,2237490],[2009,2167070],[2010,2204450]]
}]
};
options.series = data["series"];
options.title = data["title"];
options.yAxis = data["yAxis"];
var chart = new Highcharts.Chart(options);
});
Thanks a lot for Sebastian Bochan's great support!
I am trying to add local json data to a GeoJson layer in Leaflet, and then (for now) bind a popup to each feature in the json. The trouble is that I am unable to first create a geojson layer, and then later bind popups. Is there any way to do this? I am only able to create the layer and add the popups at the same time. What I have so far:
Create the map.
map = new L.Map('map');
Grab the local json file:
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {
"name": "Denver",
"amenity": "Baseball Stadium",
"popupContent": "This is where the Rockies play!"
},
"geometry": {
"type": "Point",
"coordinates": [-102.99404, 37.75621]
}
},
{
"type": "Feature",
"properties": {
"name": "Baltimore",
"amenity": "Baseball Stadium",
"popupContent": "This is where the Orioles play!"
},
"geometry": {
"type": "Point",
"coordinates": [-76.6167, 39.2833]
}
}
]
}
and send json through to plotData():
function plotData( data )
{
var pointLayer = L.geoJson().addTo(map);
// 1. works
L.geoJson(data, {
onEachFeature: onEachFeature
}).addTo(map);
// 2. does not bind popups
pointLayer.addData( data, {
onEachFeature: onEachFeature
}
);
// 3. Error - invalid GeoJson Object
pointLayer.addData( L.geoJson(data, {
onEachFeature: onEachFeature
})
);
}
function onEachFeature( feature, layer )
{
layer.bindPopup( feature.properties.name );
}
The markers display just fine on the map for scenario 1 and 2 (with 1 also displaying popups). Now, is there any reason why I should not be trying to first create the layer and then bind actions to the features? Is it better practice to just do what I have stated in 1?
The third option won't work, because you're feeding L.Layer object where a GeoJSON object should go. L.GeoJSON.addData() function does not have onEachFeature parameter. Basically, when you have processed a GeoJSON, its feature properties are gone.
There are two ways to proceed.
// create empty GeoJSON layer
var pointLayer = L.geoJson(null, { onEachFeature: storeName }).addTo(map);
// add data to it later, invoking storeName() function
pointLayer.addData(data);
// which stores names
function storeName(f, l) { l._gname = f.properties.name; }
// and when you're ready...
pointLayer.eachLayer(addPopupFromGName);
// add popups with stored name
function addPopupFromGName(l) { l.bindPopup(l._gname); }
Or just add onEachFeature function to L.GeoJSON layer options:
var pointLayer = L.geoJson(null, { onEachFeature: onEachFeature }).addTo(map);