DHTMLX Scheduler Block/Mark employee hours on Timeline? - javascript

I am using the Timeline in somewhat of an unconventional way. I have the typical day and week event/tasks working fine but I need an hour summary for the week. I cannot get marking/blocking to work for the life of me. The picture example on the bottom of this page gets it correct (http://docs.dhtmlx.com/scheduler/limits.html) but where do the IDs come from?
scheduler.addMarkedTimespan({
days: [0,3],
zones: "fullday",
css: "green",
sections: { timeline: 2}
});
To further explain, we have employees Sally, Bob and Jerry. Let's say Sally worked 7, 8, 9, 4, 8 hours from the beginning of the week, Bob worked 8,9,8,8,9 and Jerry was off all week (so 0,0,0,0,0). If they worked 8 hours, the cell should be yellow, if over 8 green, and under 8 red. I'd also like to display the number in the cell. These can be disabled or not, events will not be allowed on the Hours timeline. Any help is greatly appreciated, as I've been stuck on this for a while. http://jsfiddle.net/Ld9vZ/24/

The best way to do this is to switch timeline to Cell mode (you should set render: 'cell' in the timeline config).
To change cells background colors and text you can overwrite scheduler.templates.timeline_cell_class and scheduler.templates.timeline_cell_value methods.
(see http://docs.dhtmlx.com/scheduler/timeline_view_templates.html)
You can see example here: http://docs.dhtmlx.com/scheduler/snippet/6be2d971

Related

Fullcalendar dayGrid from and to ranges

I am facing issue to set full calendar view for ranges of selected dates, As an example when I select dates from May 1 to May 7th using the code
calendar.changeView('dayGrid', {start: startDate,end: endDate});
it shows all the selected dates in vertical columns as in the first section of the figure.
Similarly when I select dates from May 1 to May 8th it shows all the 8 columns in vertical view as in the second section of the figure.
In another case, suppose if I select dates multiples of 7, such as from May 1 to May 14, the calendar view shows 2 horizontal rows, one for each 7 days attached in last section of the figure.
So I tried to get the same horizontal view for 10 days like 7 dates are in first horizontal row and the remaining 3 days in second horizontal row, but could not able to get it. Please suggest the steps to achieve it.

VizFrame column chart with longer dimension

I am trying to implement a column chart, which lists data for many years.. If I choose an year for column chart, it displays data for 12 months (12 bars for each month). If I choose 10 years, then it ends up in showing
10*12 = 120 columns in chart.
To overcome this, I am looking for a column chart which would show dotted line between long ranges.
That is: if user chooses 10 years data from 2000 to 2010, I have to display first and last 5 months data as vertical bar [Jan-May data of 2000 (5 column bars), Aug-Dec data of 2010 (5 column bars)] and a dotted vertical line or some characters to indicate the data is not displayed between these ranges.
Horizontal scroll is an option for which I have seen some examples. However, my requirement is as mentioned above without scrollbar.. Which vizChart type can be used for this purpose? Can someone please provide more details..
Regards,
SAP Learner

Gapped data issues in highcharts

I'm having an issue with Highcharts which is not actually the framework's fault, but rather mine. The data I want to plot may have gaps sometimes in the middle of it, and when trying to plot the points the framework doesn't consider the density of the points and link the gaps when, in my case, it's not supposed to. As you can see in the image below the purple serie wasn't supposed to be linked, but rather leave a gap around 16:00 and 08:00.
One other problem that I face because of the gaps I have is that my chart is many times unproportional like in the image shown below where November takes 1/4 of the chart area, while the other months take the rest of the space. Also between August and September the space is larger than the other monthly intervals.
Last but not least there's finally the issue that I set my chart's X Axis accordingly to a date picker I have on my webpage and I'd love it to start and end at the dates picked, but it instead starts and ends at where the points start and end. I'm setting my limits like this:
xAxis: {
type: 'datetime',
min: min,
max: max,
minRange: $scope.minRange || Time.MINUTE,
events: {
afterSetExtremes: onLazyLoad
}
}
You can see the gap linking points problem over here
The unproportional chart problem here

How to show overlapping in various columns of highcharts column range graph

I have a requirement to display an event based calendar. However, there are almost no functionalities related to calendar and its just a graphical representation of events throughout a year. Hence I have planned to use HighCharts columnrange graph. This saves me a lot of boilerplate for event listening.
However, when I get several overlapping events, its hard for me to show them as distinct.
How can I use highcharts existing features to accomplish this.
I have looked for style properties in events. But couldn't found anything helpful.
I tried searching if highcharts provides any form of gradient's implementation, but I didn't get much help there either.
I tried giving color with an opacity as rgb(r,g,b, 0.2) but somehow this gets turn to black.
Here is my working demo. In this chart event8 and event7 are overlapping. There exact time duration is similar to event 9 and event 10 respectively.
I found a similar question here, but this question talks of vertical overlapping while I need to distinguish horizontal overlapping (as shown in demo). Also I tried the answer given here, which had no affect.
Can someone suggest the way to achieve it ?
I think that good idea is to use partially-transparent colors for your columns. To use transparent colors you should use rgba, not rgb parameter.
Here you can find code that may help you:
data: [{
name: 'event7',
x: 1,
low: 36,
high: 43,
color: "red"
}, {
name: 'event8',
x: 1,
low: 25,
high: 38,
color: "rgba(100,100,100,0.6)"
}]
And here you can find live example how it can work:
http://jsfiddle.net/ay1Lk2yw/4/

vis.js Timeline weekend dates

Is there a way to force .vis-grid.vis-saturday and .vis-grid.vis-sunday classes to show. I set up my timeline grouped by employees to show a monthly view but cannot get the Saturday and Sunday to how. I have to zoom in for it to show up. I tried manual add Saturday and Sunday for each employees but the result is not the same, can't get the whole column to shade. Is there anyway I can achieve the shaded to look like the built-in version with the monthly view?
Thanks
1st Picture: Auto shaded with .vis.sunday/saturday classes but have to zoom in to 2 week view to see.
2nd Picture: Manually added events to Saturday and Sunday.
This issues has already been fixed in vis.js.

Categories

Resources