I want to display Google Analytics - active users of current session data in Chart.
This is my code.
var timeline = new gapi.analytics.googleCharts.DataChart({
reportType: 'ga',
query: {
'dimensions': 'ga:date',
'metrics': 'ga:sessions',
'start-date': '2daysAgo',
'end-date': 'today',
},
chart: {
type: 'LINE',
container: 'timeline'
}
});
Related
C# .net Core MVC fullcalendar.js
I have the JSON feed working great from my controller. I want to add a couple of custom fields to the JSON feed like description and type.
I can create manual events in the View Javascript and add all kinds of extra fields just fine. I'm trying to handle the same extra fields when they come from a url JSON feed. How can I change the object in the View javascript so that data is being stored?
Sample from JSON file:
[
{
"id": 2020,
"batch": "c8762027-91d6-4892-af45-9737e86cd1a8",
"type": "Schedule",
"date": "2022-02-17",
"title": "Schedule - 2020",
"description": "test",
"notes": null,
"color": "blue"
},
{
"id": 2021,
"batch": "45fe545f-a274-4e38-af85-6340c98ee4c0",
"type": "Schedule",
"date": "2022-03-01",
"title": "Schedule - 2021",
"description": "test",
"notes": null,
"color": "blue"
}
]
The events get created on the calendar with the correct ID, title, color, etc. .. all the standard fields. The description and type do not get filled.
From the View file
<script type="text/javascript">
let calendar = initCalendar();
function initCalendar() {
var calendarEl = document.getElementById('calendar');
let calendar = new FullCalendar.Calendar(calendarEl, {
initialView: 'dayGridMonth',
weekNumbers: true,
headerToolbar: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
},
eventClick: function (info) {
//alert('Title: ' + info.event.title + ' - ' + 'ID: ' + info.event.id);
document.getElementById('Title').innerHTML = info.event.title;
document.getElementById('Description').innerHTML = info.event.description;
$('#EventDetail').modal('show');
},
events: {
url: '#Url.Action("Calendar")'
}
});
calendar.render();
return calendar;
}
</script>
ends up showing
I figured it out. When the calendar receives the JSON stream, it will add non-standard fields to the extendeProps section automatically. So if you are sending in your stream a "description" field (which is not a standard field), it will be added to the extendedProps object.
When you need to reference those extra fields in the javascript, you need to reference extendedProps like below in the eventClick handler. For setting the "description" of my event to show in the body of my popup modal display, you reference the info.event.extendedProps.description.
<script type="text/javascript">
let calendar = initCalendar();
function initCalendar() {
var calendarEl = document.getElementById('calendar');
let calendar = new FullCalendar.Calendar(calendarEl, {
initialView: 'dayGridMonth',
weekNumbers: true,
headerToolbar: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
},
eventClick: function (info) {
document.getElementById('Title').innerHTML = info.event.title;
document.getElementById('Description').innerHTML = info.event.extendedProps.description;
$('#EventDetail').modal('show');
},
events: {
url: '#Url.Action("Calendar")'
}
});
calendar.render();
return calendar;
}
</script>
I am trying to show my google calendar schedule in my system using fullCalendar library. I had done all the steps as it is mentioned in the fullCalendar documentation. And it is working for week and month view. But for day view those schedule are not showing.
This is how I am integrating the calendar.
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
plugins: [ 'googleCalendar','interaction', 'resourceDayGrid', 'resourceTimeGrid', 'bootstrap' ],
themeSystem: 'bootstrap',
defaultView: 'resourceTimeGridDay',
header: {
left: 'prev,next today',
center: 'title',
right: 'resourceTimeGridDay,timeGridWeek,dayGridMonth'
},
events: {
googleCalendarApiKey: 'I am giving my calendar api here',
googleCalendarId: 'giving calendar id here',
className: 'gcal-event'
}
});
calendar.render();
});
Version of my fullCalendar is 4.
Looked through the docs, but don't see why the events are placed incorrectly in my node app:
Global.js:
var eventList = [];
document.addEventListener('DOMContentLoaded', function() {
var eventDesc = {};
eventDesc = { title: 'Test', start: '2019-10-22', backgroundColor:'red' }; eventList.push( eventDesc );
eventDesc = { title: 'Test2', start: '2019-10-23T10:00:00', end: '2019-10-23T11:00:00', backgroundColor:'blue' }; eventList.push( eventDesc );
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
defaultView: "timeGridWeek",
height: "auto",
slotDuration: "00:60:00",
events: eventList,
plugins: [ 'dayGrid', 'timeGrid' ]
}
);
calendar.render();
});
Getting the following view (expect the blue event to be at 10 am on the grid, but it's off the grid entirely):
grid view
I'm (trying) to implement Enhanced Analytics on an aspx/mvc website.
First, I set up a UA Tag triggering off the custom event "checkout":
Tag Type: Universal Analytics
Track Type: Event
Event Action: Checkout
Enable Enhanced Ecommerce Features: true
Use Data Layer: true
Then, I created a Custom HTML tag to push the checkout event to the Data Layer; firing off of Window Load of the checkout URL. the custom HTML is:
<script type='text/javascript'>
(function() {
dataLayer.push({
'event': 'checkout',
'ecommerce': {
'checkout': {
'actionField': { 'step': '1' },
'products': [{
'name': 'product1',
'id': '123456',
'price': '500',
'dimension2': 'Acccepted',
'dimension5': '12345'
}]
}
}
});
})
</script>
GTM preview shows the custom html tag firing but the associated UA Event tag does not fire.
Help?
You have a small mistake in your JS. You forgot to call defined function (pay attention at () at the end):
(function() {
dataLayer.push({
'event': 'checkout',
'ecommerce': {
'checkout': {
'actionField': { 'step': '1' },
'products': [{
'name': 'product1',
'id': '123456',
'price': '500',
'dimension2': 'Acccepted',
'dimension5': '12345'
}]
}
}
});
}())
How to display only allDay = true events in full calendar month view , and remaining non all Day events as usal in other views
You can do this by checking for view.name in a callback like eventRender. Take a look at this fiddle: http://jsfiddle.net/100thGear/vyKSZ/
Hope this helps!
$('#external-events div.external-event').each(function() {
// store data so the calendar knows to render an event upon drop
$(this).data('event', {
title: $.trim($(this).text()), // use the element's text as the event title
stick: true // maintain when user navigates (see docs on the renderEvent method)
});
// make the event draggable using jQuery UI
$(this).draggable({
zIndex: 1111999,
revert: true, // will cause the event to go back to its
revertDuration: 0 // original position after the drag
});
});
/* initialize the calendar
-----------------------------------------------------------------*/
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek'
},
editable: true,
droppable: true, // this allows things to be dropped onto the calendar
drop: function() {
// is the "remove after drop" checkbox checked?
if ($('#drop-remove').is(':checked')) {
// if so, remove the element from the "Draggable Events" list
$(this).remove();
}
},
eventDrop: function(event, delta, revertFunc) {
alert( event.id );
$.ajax({
type: "POST",
url: "${pageContext.request.contextPath}/task/periodic-task-update",
data : {
id : event.id ,
date :event.start.format()
},
success: function(data) {
if(data=='Task Period Succesfully Changed'){
toastr.success("Task Period Succesfully Changed.");
}else{
toastr.success("Something Wrong");
revertFunc();
}
},
error: function(data,textStatus,xhr) {
toastr.success("Something Wrong");
revertFunc();
}
});
},
events: [
<c:forEach var='periodicTask' items='${periodicTaskTemplates}'>
<c:forEach varStatus="i" begin = "1" end = "12">
{ id: '${periodicTask.id}', title: '${periodicTask.task}', start: new Date(y, '${i.index}', '${periodicTask.startDate}'), end: new Date(y, '${i.index}', '${periodicTask.lastDate}') ,type:'${periodicTask.description}',location:'${periodicTask.location.name}'},
</c:forEach>
</c:forEach>`
],
});