Dhtmlx Calculating duration without effecting the ganett grid chart similar to MS Project - dhtmlx

In Dhtmlx we realized that duartion can be calculated start to end or start duration or duration to end based on perfrence however we would like count the start to date as 1 not zero.
I Sow in many questions the answer is to change the display. Then, there will be the problem of exporting to xml MS Project or XML PM6 it will have conflict when it passes through Api and reault to incoherent output.
Is there any round about it
It is diffeent in MS project
Unfortunately, when we upload from MS project to DHTMLX Ganett the duration is calculated automatically because we don't wnat to change the grid time slots
Any suggestions of how to add this day in calculation without playing with start or end date
var dateEditor = gantt.config.editor_types.date;
gantt.config.duration_unit = "day";
gantt.config.work_time = true;
gantt.setWorkTime({day : 1, hours: true});
gantt.setWorkTime({day : 2, hours: true});
gantt.setWorkTime({day : 3, hours: true});
gantt.setWorkTime({day : 4, hours: true});
gantt.setWorkTime({day : 5, hours: true});
gantt.setWorkTime({day : 6, hours: true});
gantt.setWorkTime({day : 7, hours: true});
gantt.config.columns = [
{name: "text", label: "Name", tree: true, width: 200, editor: textEditor, resize: true},
{name: "duration", label: "Duration", width:80, align: "center", editor: durationEditor, resize: true},
{name: "start_date", label: "Start", width:140, align: "center", editor: startDateEditor, resize: true},
{name: "end_date", label: "Finish", width:140, align: "center", editor: endDateEditor, resize: true}
];
gantt.calculateEndDate({start_date: new Date("2022/01/13"), duration:5});
console.log(gantt.calculateDuration({start_date: new Date("2022/01/13"), end_date: new Date("2022/01/15")}));
gantt.init("gantt_here")

Gantt uses the non-inclusive duration. There is no way to change how Gantt works, but you can change what is displayed to the users by using the templates:
https://docs.dhtmlx.com/gantt/desktop__loading.html#taskenddatedisplayampinclusiveenddates
https://docs.dhtmlx.com/gantt/api__gantt_task_end_date_template.html
Here is an example of how it works:
https://snippet.dhtmlx.com/ixxx7r2i
Also, you can set the duration_unit to hour and enable the work_time parameter:
Gantt will show the same dates in the grid because the hours will be different.
To show the duration in days and even in fractional values, you can use the formatters:
https://docs.dhtmlx.com/gantt/desktop__formatters_ext.html#durationformatter
Here is an example with the date input type in the inline editors:
https://snippet.dhtmlx.com/j2axq1lu.
Here we need to modify the dates because the input element with the date type doesn't have the hour values.
Here is another example with the datetime-local input type in the inline editors:
https://snippet.dhtmlx.com/cy7tht5r.
The input element may take more space, but it will store the dates more accurately.

Related

jqgrid reading form element value and dynamically changing select option

I like to change the Type field drop down option depending on the inputs of Year and Level fields.
I am able to trigger an event when Level is change.
But how do I get the value of the Year field?
Portion of the code are as follows
colModel:[
{name:'Year',index:'Year', width:70,sortable:false,editable:true,align:'center',editoptions:{size:15, maxlength:4}, formoptions:{ rowpos:1, label: "Year (*)"},editrules:{required:true}},
{name:'Level',index:'Level', width:70,sortable:false,editable:true,align:'center',edittype: "select", editoptions: { value: '1:1;2:2;3:3;4:4;5:5;6:6', defaultValue:'1', dataEvents : [
{
'type' : 'change',
'fn' : function ( el ) {
// get the newly selected value from the user
var levelz = $(el.target).val(), yearz ;
var row = $(el.target).closest('tr.jqgrow');
var rowid = row.attr('id');
//yearz = ??
if (parseInt(levelz)==5 || parseInt(levelz)==6)
{
if (parseInt(yearz)>2017)
{
$("#gridmain").jqGrid('setColProp','Term', {editoptions: { value: '1:Sem 1;4:Sem 2;6:EY;9:OVR', defaultValue:'Sem 1'}} );
}else{
$("#gridmain").jqGrid('setColProp','Term', {editoptions: { value: '', defaultValue:''}} );
}
}else{
$("#gridmain").jqGrid('setColProp','Term', {editoptions: { value: '1:TA1/CT1;2:TA2-before 2013;3:MY/TA2/CT2;4:TA3/CT3;5:TA4-before 2013;6:EY/TA4/CT4;9:OVR;D:CW1;E:CW2;F:CW3;G:CW4', defaultValue:'TA1'}} );
}
}
}]}, formoptions:{ rowpos:2, label: "Level (*)"},editrules:{required:true}},
{name:'Term',index:'Term', width:70, sortable:false,editable: true,align:'center',edittype: "select", editoptions: { value: '1:TA1/CT1;2:TA2-before 2013;3:MY/TA2/CT2;4:TA3/CT3;5:TA4-before 2013;6:EY/TA4/CT4;9:OVR;D:CW1;E:CW2;F:CW3;G:CW4', defaultValue:'TA1'}, editrules: { required: true }, formoptions:{ rowpos:3, label: "Type"}},
The codes are from piecing together what I read from google search...
I face 2 issues:
1) I don't know how to get the Year value
2) The drop down option list doesn't seems to change. - hmm it seems that if I close the edit form and open again, the Type field drop down option changes. What I need is to change the option on the fly - wonder how this can be done...
After much googling, managed to get the ans from Oleg's post as shown here
Also from his example, I derive the year value:
var yearz = $("#Year.FormElement", form[0]).val();

AmChart not appearing in md-dialog

I have an AmChart that I want to appear in an md-dialog. It's passed a JSON dataProvider and yet nothing appears.
dialog.tmpl.html:
<md-dialog aria-label="Project Zone Chart">
<md-toolbar>
<div class="md-toolbar-tools">
<h2>Project Zone Chart</h2>
<span flex></span>
<md-button class="md-icon-button" ng-click="closeDialog()">
<md-icon aria-label="Close dialog">close</md-icon>
</md-button>
</div>
</md-toolbar>
<md-dialog-content>
<p><div id="projZoneChart" style="width: 100%; height: auto;"></div></p>
</md-dialog-content>
</md-dialog>
controller.js:
var projZoneChartOps = {
type: "serial",
valueAxes: [{
minorGridAlpha: 0.08,
minorGridEnabled: true,
position: "top",
gridAlpha: 0,
precision: 0
}],
startDuration: 1,
graphs: [{
type: "column",
fillAlphas: 1,
lineAlpha: 0,
valueField: "value",
colorField: "color",
lineAlpha: 0
}],
rotate: true,
categoryField: "metric",
categoryAxis: {
gridPosition: "start",
parseDates: false,
gridAlpha: 0
}
};
createChart($scope.chartdata, projZoneChartOps);
function createChart(chartData, chartOps){
$scope.projZoneChart = AmCharts.makeChart("projZoneChart", chartOps);
$scope.projZoneChart.dataProvider = chartData;
However nothing appears in the dialog at all. Is there a problem with my chartOps?
Note: the chartData variable is a JSON object with two fields, startOfWeek (supposed to be the x-axis) and metric (supposed to be the y-axis)
There are a few issues/comments:
1) Why aren't you assigning the data to the chartOps object before calling makeChart?
chartOps.dataProvider = chartData;
$scope.projZoneChart = AmCharts.makeChart("projZoneChart", chartOps);
This will actually make the chart start off with your data. The way you're doing it will require that you call validateData() on your chart object after manually setting the dataProvider, which is unnecessary overhead compared to including it directly in makeChart.
$scope.projZoneChart = AmCharts.makeChart("projZoneChart", chartOps);
$scope.projZoneChart.dataProvider = chartData;
$scope.projZoneChart.validateData(); //required if you're doing it this way but unneccessary overhead compared to simply including it inside of makeChart directly as you're essentially remaking the chart after you create it for the sake of rendering your data.
2) Make sure your *field properties match. startOfWeek isn't mentioned in your chart config at all, even though you're saying it's in your JSON data. Your valueField is set to "value" - you might want to set it to "startOfWeek" instead unless you're modifying your JSON object somewhere else.
3) Displaying charts inside a modal or other dynamic/hidden elements typically require that you call the chart object's invalidateSize method when the modal/tab/etc containing the chart is visible so that it will render correctly. You'll want to check for whatever event md-dialog offers to determine when it is visible before calling $scope.projZoneChart.invalidateSize().

Display and use time values on Highcharts

I'm quite new to Highcharts and the documentation is pretty huge for me to solve my little big problem.
I'm working on app for runners and want to display running pace on chart in minutes:seconds by kilometer or mile, in format like 05:30, which means pace 5 minutes and 30 seconds pre kilometer or mile.
My current (and not working) code is here:
Highcharts.chart('container', {
yAxis: {
type: 'datetime',
categories: ['03:30','04:00','04:30','05:00','05:30','06:00','06:30','07:00','07:30','08:00','08:30'],
labels: { format: '{value:%H:%M}'}
},
xAxis: {
categories: ['2018-01-01', '2018-05-01', '2018-10-01']
},
series: [{
data: ['05:00', '06:00' , '06:30'],
dataLabels: { format: '{value:%H:%M}'}
}],
legend: {layout: 'vertical',align: 'right',verticalAlign: 'middle'},
plotOptions: {series: {label: {connectorAllowed: false},pointStart: 0}},
responsive: {rules: [{condition: {maxWidth: 1000},chartOptions: {legend: {layout: 'horizontal',align: 'center',verticalAlign: 'bottom'}}}]}
});
Currently the line in chart is not appearing. Can anybody repair my code to work correctly? Thanks.
Data needs to be numbers, not string values. If you look in console, you will most likely have Error 14 telling you this.
Changing your data to milliseconds (the format needed for highcharts to understand time) will work, like this:
data: [5 * 3600 * 1000, 06 * 3600 * 1000, 6.5 * 3600 * 1000],
Working example: https://jsfiddle.net/ewolden/55bk99ke/2/
If you want to fix the tooltip in the above example, you just need to format it the same way you format the yAxis labels. Like this:
tooltip: {
pointFormat: '{point.y:%H:%M}'
},
https://jsfiddle.net/ewolden/55bk99ke/5/

Turning off the KendoUI Scheduler k-current-view button

I am using Kendo UI v2016.2.714 and jQuery v1.9.1. I am unable to turn off the scheduler tool bar k-current-view which seems to redundantly indicate which of the Day/Week/Month buttons is selected:
This appears to be the result of a recent KendoUI upgrade as I never saw it before. Basically I just want to see the three buttons which I have defined in my javascript file:
var sch = $("#schAppointment").kendoScheduler({
date: new Date(), // date: new Date(), The current date of the scheduler
showWorkHours: true,
workDayStart: new Date("2013/1/1 06:00 AM"),
workDayEnd: new Date("2013/1/1 08:00 PM"),
height: 700,
timezone: "Etc/UTC",
views: [{
type: "day",
eventTemplate: $("#event-day-template").html(),
eventHeight: 40
}, {
type: "week",
eventTemplate: $("#event-week-template").html(),
eventHeight: 40
}, {
type: "month",
selected: true,
startTime: new Date("2013/1/1 06:00 AM"),
endTime: new Date("2013/1/1 08:00 PM"),
eventTemplate: $("#event-month-template").html(),
}],
I have not found in the Kendo documentation how to disable this k-current-view and I am still learning Javascript so I haven't discovered how to find the attribute to disable either.
Just for those who might be looking for this answer:
Turns out it was the missing kendo.*.min.css type files. I upgraded everything else but that...dumb mistake

FullCalendar showing event in month view but not day and week view?

I'm working with FullCalendar fetching events from a json feed. However, I've run into a problem.
The calendar shows my event just fine in the month view, but when going to the day/week in day-view and week-view, the even is not shown?
My initialization of fullcalendar looks like this:
var options = {
header: {
left: 'prev, next',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
allDaySlot: false,
monthNames: ["Januar","Februar","Marts","April","Maj","Juni","Juli", "August", "September", "Oktober", "November", "December" ],
monthNamesShort: ['Jan','Feb','Mar','Apr','Maj','Jun','Jul','Aug','Sep','Okt','Nov','Dec'],
dayNames: ['Søndag', 'Mandag', 'Tirsdag', 'Onsdag', 'Torsdag', 'Fredag', 'Lørdag'],
dayNamesShort: ['Søn','Man','Tir','Ons','Tor','Fre','Lør'],
buttonText: {
today: 'I dag',
month: 'Måned',
week: 'Uge',
day: 'Dag'
},
weekends: false,
defaultView: 'agendaWeek',
events: '/feed/',
firstHour: 8,
slotMinutes: 20,
defaultEventMinutes: 120,
axisFormat: 'HH:mm',
timeFormat: {
agenda: 'H:mm{ - h:mm}'
},
minTime: 8,
maxTime: 16
};
$('#calendar-holder').fullCalendar(options);
My feed returns the following json:
[{"id":"7","title":"Elias (10:00)","start":1359108000,"end":1359109800,"url":"\/tidsbestillinger\/edit\/"}]
Any ideas why this is happening?
Solved! Had to set
allDayDefault: false,
while initializing FullCalendar.
Alternatively I could have set
allDay = false
in the JSON - but doing it globally is much easier.
Also make sure that event length must be enough that it can be displayed in slotDuration.
e.g.
my slotDuration is 15 minutes, my event only displayed if it has minimum 2 minutes duration.

Resources