I am working with Google Analytics Embed API. Basic line chart is created (rendered in days).
However I would like to switch display of the chart into week display. Like you do in GA this way:
Here is my piece of code:
var longTermVisits = new gapi.analytics.googleCharts.DataChart({
query: {
ids: 'ga:XXXXXXXX',
metrics: 'ga:sessions',
dimensions: 'ga:date',
'start-date': '30daysAgo',
'end-date': 'yesterday'
},
chart: {
container: 'long-term-visits',
type: 'LINE',
options: {
width: '100%',
height: '200px'
}
}
});
Change your dimensions from ga:date to ga:week
Related
I put the fullCalendar plug-in on my site. It needs to display events from several google calendars. I did it by analogy from the documentation
(Multiple Google Calendars)
But events are displayed only on the week and month intervals, on the day interval, events are not displayed. They are displayed only if I remove the block (array) resources. But without it, the display of events inside the day becomes horizontal, but it needs to be vertical (shaded time zones of the event). When i manually fill events in events, everything works fine, but I need to take them from Google.
How do I get the events from google on the daily interval displayed in a vertical view?
$('#calendar').fullCalendar({
schedulerLicenseKey: 'CC-Attribution-NonCommercial-NoDerivatives',
scrollTime: '09:00:00',
minTime: '08:00:00',
googleCalendarApiKey: '<MY API KEY>',
defaultView: 'agendaDay',
header: {
left: 'prev,next today',
center: 'title',
right: 'agendaDay,agendaWeek,month'
},
eventSources: [
{
id: 'k01',
resourceId: 'k01',
googleCalendarId: 'hhug0bdep49rjgq4kk79rrjbgg#group.calendar.google.com', // 1 calendar
color: 'blue',
},
{
id: 'k02',
resourceId: 'k02',
googleCalendarId: 'db1ls6vg0fh9sgqt57fkethens#group.calendar.google.com' //2 calendar
},
{
id: 'k03',
resourceId: 'k03',
googleCalendarId: 'ncvl95m9f8irl6nd3ejm99fvho#group.calendar.google.com' //3 calendar
}
],
resources: [
{ id: 'k01', title: 'calendar 1', eventColor: 'red'},
{ id: 'k02', title: 'calendar 2',},
{ id: 'k03', title: 'calendar 3'}
]
});
Your events coming from Google will not have resource IDs. If there is no resource ID, it is impossible for fullCalendar to know which column to display it in, so it cannot display it at all.
To stop the agendaDay view from displaying with resources, you need to set the option groupByDateAndResource to false:
groupByDateAndResource: false
Although the documentation says this is false by default, it appears you do have to explicitly set this option in your calendar config for it to work.
See http://jsfiddle.net/toytd26b/63/ for a working example (you can fill in your API key to see actual event data, but it shows the layout correctly).
I'm using the google analytics embed API to show data in console. All works well till i add a filter to the query.
I want to not include pages what have Movie.aspx in it.
Is it not supported by the API or is my syntax incorrect?
var dataChart = new gapi.analytics.googleCharts.DataChart({
query: {
metrics: 'ga:pageviewsPerSession',
dimensions: 'ga:pagePath',
sort: '-ga:pageviewsPerSession',
//doesn't work when i add this line
// 'filters':'ga:pageviewsPerSession!#Movie.aspx',
'start-date': '30daysAgo',
'end-date': 'yesterday',
'max-results': 10
},
chart: {
container: 'chart-5-container',
type: 'TABLE'
}
});
Edit:
Also i can't seem to get the chart to format correctly.
Each column returns 00,01,02,03 etc.
I'm trying to format it to display 02:00 AM
var dataChart3 = new gapi.analytics.googleCharts.DataChart({
query: {
metrics: 'ga:sessions',
dimensions: 'ga:hour',
'start-date': '1daysAgo',
'end-date': 'yesterday'
},
chart: {
container: 'chart-7-container',
type: 'COLUMN',
options: {
width: '100%',
hAxis: {
title: 'Time of Day',
format: 'hh:mm a'
},
vAxis: {
title: 'Number of sessions'
}
}
}
});
Update 24/05/2017
Thanks I've manged to sort it out using the below query
var PageListConfig = {
query: {
//metrics: 'ga:sessions,ga:avgPageLoadTime',
metrics: 'ga:sessions',
dimensions: 'ga:pagePath',
filters: 'ga:pagePath!#Movie;ga:pagePath!#SessionTimesDisplay;ga:pagePath!#SessionTimesDaySelect;ga:pagePath!#VenueTicketing',
sort: '-ga:sessions',
'max-results': 30
},
chart: {
container: 'chart-5-container',
type: 'TABLE'
}
};
ga:pageviewsPerSession
The average number of pages viewed during a session, including repeated views of a single page.
The above metadata is a metric not a dimension which means you need to use one of the metric filter operators also its a number you cant compare a number to a string
You may want to consider one of the page path dimensions.
ga:pagePath=#Movie.aspx
check out the filter syntax documentation on the Google Analytics developer site. I also recommend testing them out in the query explorer
I would like to generate an API call that looks as follows:
var dataChart5 = new gapi.analytics.googleCharts.DataChart({
query:
[
{
metrics: 'ga:totalEvents',
dimensions: 'ga:date',
'start-date': beginDate,
'end-date': endDate,
filters: 'ga:eventAction==Search;ga:eventCategory==Company'
},
{
metrics: 'ga:totalEvents',
dimensions: 'ga:date',
'start-date': beginDate,
'end-date': endDate,
filters: 'ga:eventAction==Search;ga:eventCategory==Accommodation'
}
],
chart: {
container: 'chart5-container',
type: 'LINE',
options: {
width: '100%'
}
}
});
You'll notice there are two queries being generated for the chart. When I execute this, nothing is rendered. This tells me either the syntax is wrong or what I'm trying to do isn't supported. Is something like this possible?
No, what you're asking is not possible with the Embed API. If you check the documentation for the DataChart component you'll see the query option takes an Object not an Array.
To do what you want, you'd have to make two queries using the Data component and then render the chart yourself.
In Google Analytic dashboard, I found that the table chart for language, Country, City, etc got a column for sessions percentage.
How to add the column to my website ? Currently only total sessions column is being shown
var userSessionChart = new gapi.analytics.googleCharts.DataChart({
query: {
"dimensions": "ga:language",
"metrics": 'ga:sessions',
"start-date": start_date,
"end-date": end_date
},
chart: {
container: 'user-session-container',
type: 'TABLE',
options: {
width: '100%'
}
}
});
I have an otherwise working application at Sample Web Site
I would like to change the display of the selected line from the default thin red line to a much thicker green (or red) line.
When I changed the following code in the map.js file from
// Google Fusion LineFeat table
var linLayer = new google.maps.FusionTablesLayer({
query: {
select: 'name',
from: linTableId,
where: idStr,
},
map: GlobalMap
});
to add the styles section as shown, nothing changes in the display
// Google Fusion LineFeat table
var linLayer = new google.maps.FusionTablesLayer({
query: {
select: 'name',
from: linTableId,
where: idStr,
styles: [{
polylineOptions: {
strokeColor: "#00FF00",
strokeWeight: "12"
}
}]
},
map: GlobalMap
});
Can someone provide me some direction on what I might be doing wrong? I get these same results if I comment out the call to the zoom.js functions that zoom the map into the specific project.
The styles option doesn't go in the query:
// Google Fusion LineFeat table
var linLayer = new google.maps.FusionTablesLayer({
query: {
select: 'name',
from: linTableId,
where: idStr
},
styles: [{
polylineOptions: {
strokeColor: "#00FF00",
strokeWeight: "12"
}
}],
map: GlobalMap
});
BTW - in your "Sample Map" you are overwriting linLayer with the layer for AreaFeat, you probably don't want that.