Reverse Event Order in Month View - javascript

Basically, if I have this:
events: [
{
title: 'First',
start: new Date(2014, 1, 24, 8),
end: new Date(2014, 2, 3, 8)
},
{
title: 'Second',
start: new Date(2014, 2, 3, 8),
end: new Date(2014, 2, 10, 8)
}
]
The First event displays below the Second Event.
Because this is a continuation of an event from the week above, I would like the First event to display above the Second event.
Any suggestions on how I can do this?

Related

Group bar colors of google chart timeline by ID

I'm trying to group the colors of the bar in google timeline according to the ID. I can't figure out why it mostly works. Here's an image of what it looks like.
The image is suppose to label tests in green like this:
Here's my code:
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load("current", {packages:["timeline"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart()
{
var container = document.getElementById('bed-trace-svg-insert');
var chart = new google.visualization.Timeline(container);
var dataTable = new google.visualization.DataTable();
var i, rows=[],curr_row, start_utcDate, start_local_date,
end_utcDate, end_local_date;
dataTable.addColumn({ type: 'string', id: 'Group' });
dataTable.addColumn({ type: 'string', id: 'Category' });
dataTable.addColumn({ type: 'string', id: 'ID' });
dataTable.addColumn({ type: 'date', id: 'Start' });
dataTable.addColumn({ type: 'date', id: 'End' });
// dataTable.addRows(rows);
dataTable.addRows([
[ 'M2016019706', 'HO', 'NYH01 816', new Date(2016, 5, 1), new Date(2016, 6, 12) ],
[ 'M2016019706', 'LTCO', 'NYLTC18', new Date(2016, 6, 13), new Date(2016, 7, 29) ],
[ 'M2016019706', 'HO', 'NYH01 834', new Date(2016, 7, 30), new Date(2016, 8, 7) ],
[ 'M2016019706', 'LTCO', 'NYLTC18', new Date(2016, 8, 8), new Date(2016, 8, 12) ],
[ 'M2016019706', 'test', '', new Date(2016, 8, 1), new Date(2016, 8, 2) ]
]);
var color_array = [];
var colorMap =
{
// should contain a map of category -> color for every category
HO: '#e63b6f', // pink
test:'#32a852', // green
LTCO: '#592df7', // purple
OPT: '#2dbef7', // blue
}
for (i = 0; i < dataTable.getNumberOfRows(); i++)
{
color_array.push(colorMap[dataTable.getValue(i, 1)]);
}
var rowHeight = 41;
var chartHeight = (dataTable.getNumberOfRows() + 1) * rowHeight;
var options =
{
timeline:
{
groupByRowLabel: true,
rowLabelStyle:
{
fontName: 'Roboto Condensed',
fontSize: 14,
color: '#333333'
},
barLabelStyle:
{
fontName: 'Roboto Condensed',
fontSize: 14
}
},
avoidOverlappingGridLines: true,
height: chartHeight,
width: '100%',
colors: color_array
};
// use a DataView to hide the category column from the Timeline
var view = new google.visualization.DataView(dataTable);
view.setColumns([0, 2, 3, 4]);
chart.draw(view, options);
}
</script>
<div id='bed-trace-svg-insert'></div>
The color_array array is correct:
["#e63b6f", "#592df7", "#e63b6f", "#592df7", "#32a852"]
I'm unsure why my colors change when the chart is drawn. Any ideas?
It might be related to the order because if I switch the order to:
dataTable.addRows([
[ 'M2016019706', 'test', 'test', new Date(2016, 8, 1), new Date(2016, 8, 2) ],
[ 'M2016019706', 'HO', 'NYH01 816', new Date(2016, 5, 1), new Date(2016, 6, 12) ],
[ 'M2016019706', 'LTCO', 'NYLTC18', new Date(2016, 6, 13), new Date(2016, 7, 29) ],
[ 'M2016019706', 'HO', 'NYH01 834', new Date(2016, 7, 30), new Date(2016, 8, 7) ],
[ 'M2016019706', 'LTCO', 'NYLTC18', new Date(2016, 8, 8), new Date(2016, 8, 12) ],
[ 'M2016019706', 'HO', 'NYH01 834', new Date(2016, 8, 13), new Date(2016, 8, 28) ]
]);
I get this:

This fiddle answered by question:enter link description here
You need to use:
dataTable.addColumn({ type: 'string', role: 'style' });

Google calendar chart date popup(tool tip) issues

When the cursor is placed over the calendar chart date should be popup like second attached image (like tool-tip), in my code it showing like (refer First figure)below the chart, I want my output as in Second Figure.
Please guide me to fix this issue, and below is see my code.
<script>
$.getScript("https://www.google.com/jsapi", function () {
google.load('visualization', '1.1' , { 'callback': calenderchart, 'packages': ['calendar'] });
});
function calenderchart(data) {
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'date', id: 'Date' });
dataTable.addColumn({ type: 'number', id: 'Won/Loss' });
dataTable.addRows([
[ new Date(2012, 3, 13), 37032 ],
[ new Date(2012, 3, 14), 38024 ],
[ new Date(2012, 3, 15), 38024 ],
[ new Date(2012, 3, 16), 38108 ],
[ new Date(2012, 3, 17), 38229 ],
// Many rows omitted for brevity.
[ new Date(2013, 9, 4), 38177 ],
[ new Date(2013, 9, 5), 38705 ],
[ new Date(2013, 9, 12), 38210 ],
[ new Date(2013, 9, 13), 38029 ],
[ new Date(2013, 9, 19), 38823 ],
[ new Date(2013, 9, 23), 38345 ],
[ new Date(2013, 9, 24), 38436 ],
[ new Date(2013, 9, 30), 38447 ]
]);
var chart = new google.visualization.Calendar(document.getElementById('calendar_basic'));
var options = {
title: "",
tooltip: {isHtml: true}
};
chart.draw(dataTable, options);
}
</script>
<body>
<div id="calendar_basic" style="width: 1000px;"ng-init ='calanderchart()'></div>
</body>

seems to work fine here, is there more you can share?
any CSS on your page?
google.load('visualization', '1.1', {
callback: function () {
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'date', id: 'Date' });
dataTable.addColumn({ type: 'number', id: 'Won/Loss' });
dataTable.addRows([
[ new Date(2012, 3, 13), 37032 ],
[ new Date(2012, 3, 14), 38024 ],
[ new Date(2012, 3, 15), 38024 ],
[ new Date(2012, 3, 16), 38108 ],
[ new Date(2012, 3, 17), 38229 ],
[ new Date(2013, 9, 4), 38177 ],
[ new Date(2013, 9, 5), 38705 ],
[ new Date(2013, 9, 12), 38210 ],
[ new Date(2013, 9, 13), 38029 ],
[ new Date(2013, 9, 19), 38823 ],
[ new Date(2013, 9, 23), 38345 ],
[ new Date(2013, 9, 24), 38436 ],
[ new Date(2013, 9, 30), 38447 ]
]);
var chart = new google.visualization.Calendar(document.getElementById('calendar_basic'));
chart.draw(dataTable, {
tooltip: {isHtml: true}
});
},
packages: ['calendar']
});
<script src="https://www.google.com/jsapi"></script>
<div id="calendar_basic" style="width: 1000px;"></div>

Unable to reference json file in Data attribute but array list data works

I am incorporating cal-heatmap in my asp.net website and all works fine as long as i am referencing data through an array, initialized as variable above the init method, however things stop showing up as soon as i create new text file in visual studio and rename it as datas-years.json and reference it in 'data' attribute, please help me ?
below is the working code, manually entered data in array and referencing
var cal = new CalHeatMap();
var data = { "1420498800": 20, "1420585200": 40, "1420671600": 60, "1420758000": 1, "1421103600": 2, "1421190000": 90, "1421276400": 1, "1421362800": 1, "1421622000": 1, "1421708400": 1, "1422226800": 1, "1422313200": 1, "1422399600": 2, "1422486000": 1, "1422572400": 1, "1423695600": 3, "1424127600": 2, "1424214000": 1, "1424300400": 3, "1424386800": 1, "1424646000": 2, "1424732400": 1, "1424818800": 2, "1424905200": 2, "1424991600": 1, "1425337200": 1, "1425855600": 4, "1426201200": 2, "1426460400": 2, "1426546800": 1, "1426633200": 2, "1426719600": 1, "1426806000": 1, "1427065200": 1, "1427151600": 1, "1427238000": 2, "1427324400": 1, "1427670000": 2, "1428361200": 2, "1428447600": 2, "1428534000": 3, "1428620400": 3, "1428966000": 2, "1429138800": 2, "1429225200": 1, "1429484400": 2, "1429570800": 1, "1429657200": 2, "1429743600": 2, "1429830000": 3 };
cal.init({
data: data,
itemName: ["volunteer", "volunteers"],
start: new Date(2015, 0, 1, 1),
domain: "month",
subDomain: "day",
cellSize: 15,
subDomainTextFormat: "%d",
range: 12,
legend: [20, 40, 60, 80],
});
below is the referencing through separate file, all under visual studio
var cal = new CalHeatMap();
cal.init({
datatype:JSON,
data: "datas-years.json",
itemName: ["volunteer", "volunteers"],
start: new Date(2015, 0, 1, 1),
domain: "month",
subDomain: "day",
cellSize: 15,
subDomainTextFormat: "%d",
range: 12,
//highlight: new Date(2016, 1, 15),
legend: [20, 40, 60, 80],
});
I also would like to know what is the best way to convert the date to seconds format, when i impliment it in live, should i ensure that it is added in seconds format to json file or it can be just like 2/26/2015 ? and then convert it into seconds while borrowing from json file ? Please guide me, thank you
EDIT:
Data in the datas-years.json file in directory
[{
"1420498800":20,
"1420585200":40,
"1420671600":80,
"1421708400": 1,
"1422226800": 1,
"1422313200": 1,
"1422399600": 2,
"1422486000": 1
}]

Wijemo event calender bind to angular controller

I'm trying to bind the wijeval to an array of events in an angularjs Controller.
This is what if tried so far:
View:
<div ng-app="MyApp" ng-controller="MainController">
<wijevcal viewtype="week" eventsdata="{{events}}">
</wijevcal>
</div>
Controller:
var app = angular.module("MyApp", ["wijmo"]);
function MainController($scope) {
$scope.events = [{ id: "ev1", subject: "First event", start: new Date(2013, 5, 23, 15, 30), end: new Date(2013, 5, 23, 17, 35) },
{ id: "ev2", subject: "Second event", start: new Date(2013, 5, 23, 10, 30), end: new Date(2013, 5, 23, 11, 35) }];
}
The eventsdata binding is not working and if I create a new event it's stored in the local browser stroage.
I hope somebody can help me to get the binding work because the "documentation" I found is terrible
Link to documentation: http://wijmo.com/5/docs/topic/wijmo.angular.WjCalendar.Class.html
Ceddy

I believe you are using WijEvcal widget of Wijmo 3 and not WjCalendar of Wijmo 5. Here is correct code for using WijEvcal widget with AngularJS:
<wij-evcal id="evcal" time-interval="30" style="min-height: 300px" events-data="eventsData" selected-date="selectedDate">
</wij-evcal>
$scope.eventsData = [{ id: "appt1", subject: "app1", start: new Date(2015, 2, 23, 15, 30), end: new Date(2015, 2, 23, 17, 35) },
{ id: "appt2", subject: "app2", start: new Date(2015, 2, 13, 10, 30), end: new Date(2013, 2, 13, 11, 35) }
];
$scope.selectedDate = new Date(2015, 2, 23);
If you want to use Wijmo 5 control then you can refer to the following link:
http://demos.componentone.com/wijmo/5/Angular/Scheduler/Scheduler/#/

fullcalendar javascript issue - its not showing the events in IE?

On my team website: http://www.berzerkers.org, head over to the Schedule. The calendar is supposed to have a few events listed - it works fine in Firefox, Chrome and Safari - but not in IE...what is the issue? I don't know what to do. Any help would be greatly appreciated! :)

Wherever you data is being generated from, there's an empty array element at the end of the events array:
events: [{id: 1, title: "BT Big Game", start: new Date(2009, 7, 8, 8), end: new Date(2009, 7, 8)},{id: 2, title: "Team Meeting # Clubhouse", start: new Date(2009, 7, 2, 20), end: new Date(2009, 7, 2)},{id: 3, title: "Trip to Stingray", start: new Date(2009, 7, 7, 15), end: new Date(2009, 7, 7)},{id: 4, title: "Practice / Eazy's Going Away Party # Cousins SI", start: new Date(2009, 7, 16, 8), end: new Date(2009, 7, 16)},{id: 5, title: "Berzerkers Team Tryouts at NYCPB", start: new Date(2009, 7, 11, 20), end: new Date(2009, 7, 11)},]
Notice the ,] at the end.
This is causing IE to throw an error when it tries to parse it.

Categories