Display only a fraction (time window) of the loaded data

We try to switch the viewable tasks within a gantt chart. Basically this works, by changing config.start_date and end_date before calling gant.render().

The problem we are facing is, that the progress indicator now uses the config.start_date if the task was started before the time window, set. So all progress bars are now invalid. It only works for task starting and ending within the “viewed” time frame.

Is there a workaround for this behaviour ?

Hello,
currently there is no built-in solution for this. Probably you can display progress for such tasks manually (hide a default one and render custom progress bar using task_text template), but we don’t have a ready example

if any one else needs a solution … here is what I did …

gantt.init("gantt_here"); gantt.parse(tasks); // HDM Customizing ... workaround for miscalculation in Progress bar // Custom progress render function // 27.03.2015 Sven Lindekugel gantt._render_task_progress = function (t, e, n) { var i=1*t.progress||0; n=Math.max(n-2,0); // start custom part if ( t.start_date < gantt.config.start_date || t.end_date > gantt.config.end_date ) { var mid_date=gantt.date.add(t.start_date,(((t.end_date-t.start_date)*t.progress)/60000),'minute') if (t.start_date < gantt.config.start_date) var newstart=gantt.config.start_date; else { var newstart=t.start_date; } if (t.end_date > gantt.config.end_date) var newend=gantt.config.end_date; else { var newend=t.end_date;} i=(mid_date-newstart)/(newend-newstart); } // end custom part var a=document.createElement("div"),s=Math.round(n*i);if(s=Math.min(n,s),t.progressColor&&(a.style.backgroundColor=t.progressColor,a.style.opacity=1),a.style.width=s+"px",a.className="gantt_task_progress",a.innerHTML=this.templates.progress_text(t.start_date,t.end_date,t),e.appendChild(a),this.config.drag_progress&&!gantt._is_readonly(t)) {var r=document.createElement("div");r.style.left=s+"px",r.className="gantt_task_progress_drag", a.appendChild(r),e.appendChild(r) } }

As I am not sure, if our vendor allready provided a customized gantt engine, please be aware that we provide in out data:

  • start_date
  • end_date
  • progress (as percentage, ranging from 0 to 1)

Basically I recalculate the date, pointed to by the progress percentage and than starting from there give the engine the “right” percentage to display a progress bar in the correct manner within config.start_date and config.end_date.

another update … due to the fakt, that the first part of the progressbar can be totally outside the viewed time frame …

gantt.init("gantt_here"); gantt.parse(tasks); // HDM Customizing ... workaround for miscalculation in Progress bar // Custom progress render function // 27.03.2015 Sven Lindekugel gantt._render_task_progress = function (t, e, n) { var i=1*t.progress||0; n=Math.max(n-2,0); // start custom part if ( t.start_date < gantt.config.start_date || t.end_date > gantt.config.end_date ) { var mid_date=gantt.date.add(t.start_date,(((t.end_date-t.start_date)*t.progress)/60000),'minute') if (t.start_date < gantt.config.start_date) var newstart=gantt.config.start_date; else { var newstart=t.start_date; } if (t.end_date > gantt.config.end_date) var newend=gantt.config.end_date; else { var newend=t.end_date;} i=Math.max(0,((mid_date-newstart)/(newend-newstart))); } // end custom part var a=document.createElement("div"),s=Math.round(n*i);if(s=Math.min(n,s),t.progressColor&&(a.style.backgroundColor=t.progressColor,a.style.opacity=1),a.style.width=s+"px",a.className="gantt_task_progress",a.innerHTML=this.templates.progress_text(t.start_date,t.end_date,t),e.appendChild(a),this.config.drag_progress&&!gantt._is_readonly(t)) {var r=document.createElement("div");r.style.left=s+"px",r.className="gantt_task_progress_drag", a.appendChild(r),e.appendChild(r) } }