I'm trying to achieve the same thing as described in here:
Use Embed API to embed Google Analytics location map view
but I`m also interested in getting the secondary dimension (i.e. the table underneath the map).
Any snippets for fiddling with ?
The simplest way is to create another DataChart object and include that in your visualisation. For example:
var dataTable = new gapi.analytics.googleCharts.DataChart({
query: {
'ids': 'ga:1234',
'dimensions': 'ga:country',
'metrics': 'ga:sessions',
'start-date': '30daysAgo',
'end-date': 'yesterday',
},
chart: {
type: 'TABLE',
container: 'data-table'
}
});
Related
I have a calendar like this defined:
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
plugins: [ 'dayGrid', 'list' ],
defaultView: 'dayGridMonth',
events: '/activities/calendar.json?view=' + 'dayGridMonth', //calendarEl.view.title,
I am trying to customize the events JSON feed to the view - way easier to do this on the server side then adding a bunch of JavaScript logic. All I want to do is append the current view to the json url. In my code above I just manually coded 'dayGridMonth' but looking to make it dynamic. Tried calendarEl.view.title but that returns undefined. Read the docs but can't make sense of this. Perhaps I am looking at this the wrong way.
The FullCalendar docs show the following for multiple Google calendars:
eventSources: [
{
googleCalendarId: 'abcd1234#group.calendar.google.com'
},
{
googleCalendarId: 'efgh5678#group.calendar.google.com',
className: 'nice-event'
}
]
This does not work:
eventObject.push({
googleCalendarId
});
eventSources: [ eventObject ]
How do I turn this into an array that will show multiple google calendars that I would dynamically be able to add?
What does work is:
eventObject.push({
id: eventId[i],
title: name[i],
start: startTime[i],
end: endTime[i],
description: evDes[i].description
});
eventSources:
[
{
events: eventObject
}
]
But this is not the same thing. Importantly, I want to be able to use both and have both the google calendar and the json source that I'm parsing out this way. How do I do that?
Ok, figured it out. So if I'm iterating through a list of google calendars, I would have this: (I'm using C# and MVC to get the list of calendars into the Javascript - that's what "model" refers to here)
CalendarId = model.data[i].calendar_source;
gcalObject.push({
googleCalendarId: CalendarId,
And then, in the calendar init, I'd have this:
eventSources: gcalObject,
And then I can separately have events that do not come from a Google calendar in the regular events object:
events: eventsObject
So problem solved. Google calendar events go in eventSources and other events go in events. And eventSources sits at the same hierarchical level as events.
I am struggling with including a custom map with custom data into Highmaps. I am sure it's a pretty dumb thing, but I just can't find any examples and explanations on the web.
I have a JSON file with the data, and a GeoJSON file with the map. So, it could look like this:
$(function ()
{
$.getJSON('http://xxx/data/P_.json', function (data)
{
// Initiate the chart
$('#container').highcharts('Map',
{
series : [
{
data : data,
mapData: 'http://www/data/countries.geojson',
joinBy: ['Name', 'Countries'],
}]
});
});
});
But something is quite obviously wrong. How do I add then the custom mapData?
Thanks for your help!
There is a instruction about how to create custom geoJSON: http://www.highcharts.com/docs/maps/custom-geojson-maps
In 9. there is link to jsFiddle that show how geoJSON file should be parsed to be used by Highcharts as mapData: http://jsfiddle.net/highcharts/xbzxfx2L/
$('#run').click(function () {
var geojson = $.parseJSON($('#geojson').val());
// Initiate the chart
$('#container').slideDown().highcharts('Map', {
series: [{
mapData: geojson
}]
});
});
I am trying to implement a search form where the results would be displayed via a dojo 1.6 data grid. I have the rendering working, I make an ajax call on form submit and then build a Datagrid in the call back function using the ItemFileWriteStore.
function search()
{
var action = './search.json';
dojo.xhrPost({url: action, form:"searchForm",
load: function(result) {
var newStore = new dojo.data.ItemFileWriteStore({
data: {
identifier: "id",
items: JSON.parse(result),
url:'./search.json'
}
});
var grid = dijit.byId("searchResultsGrid");
if(grid == null) {
var layout = [[
{'name': 'Id', 'field': 'id', 'width': '50px'},
{'name': 'Name', 'field': 'name', 'width': '50px',editable: true,},
{'name': 'Source', 'field': 'source', 'width': '50px',editable: true,},
{'name': 'Version', 'field': 'version', 'width': '50px',editable: true,}
]];
var grid = new dojox.grid.DataGrid({
id: 'searchResultsGrid',
store: newStore,
structure: layout,
autoHeight:true, autoWidth:true, editable:true, columnReordering:true,
rowSelector: '20px'
});
grid.placeAt("gridDiv");
grid.startup();
}
else {
grid.setStore(newStore);
}
}
});
}
Now, when I try to make the grid editable and persist the changes to server, nothing happens with the ItemFileWriteStore. So I want to switch to JsonRestStore so that I can persist.
But the question is, how do I tie my form submit to the JsonRestStore or in other words is there a way to pass a dynamic query to the JsonRestStore ?
I want the JsonRestStore to fetch data on submit of my search form and based on the values in the search form.
Thanks in advance!
I would use the dojo.store.JsonRest store. In order to use the JsonRest store with dojox.grid.DataGrid, you will need to wrap it in a dojo.data.ObjecStore like below:
var newStore = new dojo.store.JsonRest({
target: '/search/',
idProperty: 'id'
});
newStore = new dojo.data.ObjectStore({
objectStore: newStore
});
Now the /search/ target should be your REST url. Your backend for /search/ should be able to support REST, which means you should be able to support GET, PUT, POST, DELETE requests. Take a look at http://dojotoolkit.org/reference-guide/1.10/quickstart/rest.html its for Dojo 1.10, but the method for implementing the backend should be similar.
Once you have the REST backend implemented to be able to retrieve and update data. You can send query parameters to the REST backend by setting the query parameter in the grid.
grid.setQuery({
param1: 1,
param2: 2
});
This will trigger the JsonRest store to use the url /search/?param1=1¶m2=2 to load the refresh set of data in the grid.
I want to style my fusion table markers based on a field in the fusion table. If I use default Google markers, the following code works:
layer = new google.maps.FusionTablesLayer({
query: {
select: 'bizCity',
from: '1yfyijoeC3GwDnnLutBI8IFOH8y2mfZ8LJGUDly4'
},
styles: [
{where: "'bizCatSub' = 'Antique & Classic Motorcycle Dealers'", markerOptions:{ iconName:"star"}}, // other landmarks
{where: "'bizCatSub' = 'Other moto business'", markerOptions:{ iconName:"wht_pushpin"}}, //businesses
{where: "'bizCatSub' = 'Shop'", markerOptions:{iconName:"red_blank"}}, //town houses
{where: "'bizCatSub' = '12'", markerOptions:{ iconName:"orange_blank"}}, //country homes
{where: "'bizCatSub' = '15'", markerOptions:{ iconName:"target"}},
]
});
layer.setMap(map);
You can see the jsfiddle here.
However, I want to use my own custom markers. To this end, I tried something like this:
layer = new google.maps.FusionTablesLayer({
query: {
select: 'bizCity',
from: '1yfyijoeC3GwDnnLutBI8IFOH8y2mfZ8LJGUDly4'
},
styles: [
{where: "'bizCatSub' = 'Antique & Classic Motorcycle Dealers'", markerOptions:{ url: "http://pollster.net/test/icons/dealer.png" }},
{where: "'bizCatSub' = 'Other moto business'", markerOptions:{ url: "http://pollster.net/test/icons/othermoto.png" }},
{where: "'bizCatSub' = 'Shop'", markerOptions:{ url: "http://pollster.net/test/icons/shop.png" }}
]
});
layer.setMap(map);
With the above code, the data shows up on the map, but it uses default markers instead of styling them as requested. Jsfiddle here. I looked at the documentation for styles and markeroptions and icons and tried different variations, but nothing is working for me. I think I'm missing something simple, but not sure what.
Anyone know what I'm missing?
Fusion Table Layer doesn't actually allow custom marker icons. This is a known issue: http://code.google.com/p/fusion-tables/issues/detail?id=69
However, there are some workarounds, probably the easiest of which was posted by a Google employee near the bottom of that thread just a few months ago: http://code.google.com/p/fusion-tables/issues/detail?id=69#c107
The gist of the workaround is that you'll no longer be using a FusionTableLayer, but instead be using javascript to grab the fusion table data and add custom markers yourself. It's a bit more code, but it does seem to work pretty well: https://googledrive.com/host/0B9htKoV1ZaKUU1g3ZnJCUWQyd28/customicons_viaApi.html
You cannot use your own custom icons with FusionTablesLayers, you can only use the ones that are defined by name (see here).
If you need to use your own and can take the performance hit of not using the FusionTablesLayer tile based rendering, you can query the table using either GViz or the Fusion Tables Query API to use Google Maps API v3 custom icons.
See this issue which has been marked "not-Feasible", but includes a work around.