Gantt Chart
Download: Gantt Chart
Note: In January 2019, we're happy to announce that our Professional Services team developed a supported Gantt Chart plugin. Check it out in the Sisense Marketplace! If you're interested in this plugin, please reach out to your Customer Success Manager for more information.
Introduction
This post explains how to import a gantt chart plugin that functions dynamically as part of Sisense dashboards.
Purpose/Benefits
Gantt charts are a common tool to plan & visualize tasks and resources over time.
It is used in layout deliverables in project management, for scheduling production processes, employee scheduling and other duration oriented resources usage management.
Steps
Step 1 - Add the plugin to your sisense installation
Download the attachment and unzip the contents into your C:\Program Files\Sisense\PrismWeb\plugins\ folder. If you are using version 7.2 and higher unzip the contents into your C:\Program Files\Sisense\app\plugins\ folder. If the plugins folder doesn't exist, just create it. You may also have to restart the web server. N
Now, when you create a new widget the gantt chart should show up in the list of options
Step 2 - Create the Chart
-
On your dashboard, click the Create Widget button and select Advanced Configuration.
-
Select the Gantt chart from the chart type menu.
-
Pick 1 or 2 dimensions to use as your Y-axis, such as task ID and task owner
-
Select the start date and end date fields
-
Add a metric value, such as complexity or progress numeric indicator (mandatory field)
- Optionally, you may add up to 3 additional metric fields for details (shown in a tooltip)
- Once you add the aforementioned fields, hit apply
Notes
- In order to render the chart, you must select 1 or more items, a start and end date, and a value for coloring
- When selecting start-end dates, make sure the start date is placed before the end date (order is important) and that the date granularity is defined correctly (days, months Etc)
- ** 6/6/2016 Plugin was updated to support V 6.2.5
- ** 10/4/2016 Plugin was updated to support V 6.4.2 and now allows more formatting options
- ** 12/12/2016 - Fix for export to PDF in V6.5
-
There is an issue with the plugin. There is a lag in the header and the rows because of which the data representation doesnt seems correct.
Capture.PNG -
Thank you Michael & Evan for your comments
I attached a new zip file with a fix to the icon issueSinu - we will look into that, just
Aviad
ganttWidget.zip -
Sinu, thank you for sharing !
Grate solutionAttached is a fixed version of it
ganttWidget.zip -
If you want more descriptive tooltips, just search for the following line of code in widget.js
val1['desc'] = s.queryResult.$$rows[i][0].text + ' / ' + s.queryResult.$$rows[i][1].text + ' / ' + s.queryResult.$$rows[i][4].text;
and change it to something like this
var description = "<p>" + s.rawQueryResult.headers[0] + ": " + s.queryResult.$$rows[i][0].text + "</br></br>"
+ s.rawQueryResult.headers[1] + ": " + s.queryResult.$$rows[i][1].text + "</br></br>"
+ s.rawQueryResult.headers[4] + ": " + s.queryResult.$$rows[i][4].text + "</p>"; val1['desc'] = description;
-
documentation can be found here: http://taitems.github.io/jQuery.Gantt/
-
This plugin depends on the string representation of the from and to date.
This may lead to a wrong intepretation of the dates:
Date(01 dec 2015) is represented as String(01-12-2015 ) and interpreted by Date.parse() as Date(12 jan 2015)
Date.getTime() should be used instead.
This bug in widget.js can be fixed by using the code below
//val1['from'] = '/Date(' + Date.parse(s.queryResult.$$rows[i][2].text) + ')/';
val1['from'] = '/Date(' + s.queryResult.$$rows[i][2].data.getTime() + ')/';
//val1['to'] = '/Date(' + Date.parse(s.queryResult.$$rows[i][3].text) + ')/';
val1['to'] = '/Date(' + s.queryResult.$$rows[i][3].data.getTime() + ')/'; -
Hi,
How can I show item wise single row in Gannt Chart.
For example, for project P-1, if an activity i.e. 'Site Visit' is planned every Friday for one day. Currently, the Gantt Chart will be plotted and will show separate rows for Site visit.
While, I want to show single row for 'Site Visit' where the chart will be plotted on different due dates.
Thanks,
Rahul
-
A very interesting plug-in, for us is fundamental, thanks very very much for your work.
Using it we found an incomprehensible problem. Seems that the gantt bar sometime are shift to right for a random number of cells.
We found a solution for it
On style.css file change the following class:
.fn-gantt .leftPanel .fn-wide, .fn-gantt .leftPanel .fn-wide .fn-label {
width: 225px;
height: 24px; /* Added */
}
//--------^
.fn-gantt .day, .fn-gantt .date, div#root.fn-gantt .day, div#root .fn-gantt .date {
overflow: visible;
width: 25px; /* <--- ex 24px */
line-height: 24px;
text-align: center;
border-left: 1px solid #DDD;
border-bottom: 1px solid #DDD;
margin: -1px 0 0 -1px;
font-size: 11px;
color: #484a4d;
text-shadow: 0 1px 0 rgba(255,255,255,0.75);
text-align: center;
}On jquery.fn.gantt.js make the following code changes
// change the width property adding 1
dataPanel: function (element, width) {
var dataPanel = $('<div class="dataPanel" style="width: ' + (width + 1 ) + 'px;"/>'); /* +1 */
// In "Week" case switch, from about row 554,
// add +1 pixel to with property:
// Fill months
if (rday.getMonth() !== month) {
monthArr.push(
('<div class="row header month" style="width:'
+ (tools.getCellSize() * daysInMonth + 1) /* +1 to correct offset */
+ 'px;"><div class="fn-label">'
+ settings.months[month]
+ '</div></div>'));
month = rday.getMonth();
daysInMonth = 0;
}
// In "Default" case switch, from about row 554,
// add +1 pixel to with property:
if (rday.getMonth() !== month) {
monthArr.push(
('<div class="row header month" style="width:'
+ (tools.getCellSize() * daysInMonth + 1) /* +1 to correct offset */
+ 'px;"><div class="fn-label">'
+ settings.months[month]
+ '</div></div>'));
month = rday.getMonth();
daysInMonth = 0;
}Giuseppe
-
Hi Giusseppe,
This month a supported Gantt chart plugin was added to the Sisense Marketplace. You can check it out here.
If you're interested in this plugin, please reach out to your Customer Success Manager for more information.Edit: Thanks for sharing the solution you came up with!
Post is closed for comments.
Comments
17 comments