Gantt Chart Component!!! Skuid would then be way better than any PM tool available in SF.

How much is it worth to ya?

I’d likely eventually make use of it myself, but I’m certain many many people can make use of it.

The cool thing is that since it would be working from data within objects in salesforce, we would be able to expand upon how project management can be done.

So, this component would provide traditional waterfall, which has it’s place.

Additionally, though I’m no expert in PM, I’d think that much of the tasks can as well/alternatively be managed via Agile PM if the proper schema were setup. Then burn down charts, scrum, etc. can potentially brought in.

Shooting from the hip.

Wow! That ExtJS component looks RAD!!

I started Googling around to see if anyone was ON IT for creating a Gantt Chart Skuid Component; even just simple Gantt view, like the embedded visualforce used in Milestones PM+. 

A Skuid Component with half the functionality of Ext Gantt or Ext Scheduler would be NUTS.

What’s the best way to beg the Skuid devs to tackle this?

Anyone know of any comparable js extensions to Ext Gantt?

Find executives super well connected in the upper echelons of enterprise companies to be an investor. Someone with a name that is recognizable. That type of investor is quite likely to have significant sway on the development team. 😃

You guys are great.  Pat is right,  we do have a bunch of cool things that get pitched at us.  Honestly our own executives have WAY more ideas than anyone else out there.  

Another idea that would be pretty straightforward to implement would use the D3 visualization library.  Check this out.   

A gantt add-on would be a really nice feature. Another Gantt JS product is dhtmlxGantt (http://dhtmlx.com/docs/products/dhtmlxGantt/) . There is a free GPL version. Haven’t tried it but it looks like it could be usable.

Ha! Love it. These other two libraries look very cool to tackle either end of the spectrum. D3 seems dead simple and could likely work as Custom Skuid component. I’ve never worked with dhtmlx before. It’s ui seems nice and fluid and it seems some others have tried to integrate it with SF. I’m quite new to Skuid but seems dubious that something like their Gantt or Schedule component could be easily rolled as a Skuid component. Not sure.

Haven’t tested it, but nice that dhtmlx claims mobile compatibility. Also, Bryntum has a Sencha Touch version of their Scheduler, plus Ext 5+ is supposed to have better mobile chops.

need this … please build

Any timeline when Gantt Chart will be available on Skuid?

Has anybody successful implemented a GANTT view into skuid or classic salesforce.  I am interested in this and would pay someone if they could build it in my environment. please reach out if interested mfloyd@ntegrated.net

Highcharts has Gantt options - has anyone ever integrated non-skuid Highcharts options? Can you just call the Highcharts library?

https://www.highcharts.com/gantt/demo/

The code looks pretty straightforward, below is an example called ‘Subtasks’, but I’m not sure how you could call Highcharts.ganttchart if it’s not in Skuid’s highcharts library - install your own Highcharts library??

var today = new Date(), day = 1000 * 60 * 60 * 24; // Set to 00:00:00:000 today today.setUTCHours(0); today.setUTCMinutes(0); today.setUTCSeconds(0); today.setUTCMilliseconds(0); // THE CHART Highcharts.ganttChart(‘container’, { title: { text: ‘Highcharts Gantt With Subtasks’ }, xAxis: { min: today.getTime() - (2 * day), max: today.getTime() + (32 * day) }, series: [{ name: ‘Project 1’, data: [{ name: ‘Planning’, id: ‘planning’, start: today.getTime(), end: today.getTime() + (20 * day) }, { name: ‘Requirements’, id: ‘requirements’, parent: ‘planning’, start: today.getTime(), end: today.getTime() + (5 * day) }, { name: ‘Design’, id: ‘design’, dependency: ‘requirements’, parent: ‘planning’, start: today.getTime() + (3 * day), end: today.getTime() + (20 * day) }, { name: ‘Layout’, id: ‘layout’, parent: ‘design’, start: today.getTime() + (3 * day), end: today.getTime() + (10 * day) }, { name: ‘Graphics’, parent: ‘design’, dependency: ‘layout’, start: today.getTime() + (10 * day), end: today.getTime() + (20 * day) }, { name: ‘Develop’, id: ‘develop’, start: today.getTime() + (5 * day), end: today.getTime() + (30 * day) }, { name: ‘Create unit tests’, id: ‘unit_tests’, dependency: ‘requirements’, parent: ‘develop’, start: today.getTime() + (5 * day), end: today.getTime() + (8 * day) }, { name: ‘Implement’, id: ‘implement’, dependency: ‘unit_tests’, parent: ‘develop’, start: today.getTime() + (8 * day), end: today.getTime() + (30 * day) }] }] });

Looks like a separate license cost for Highcharts Gantt

Jack,

You can add a template component and add a ‘div’ tag as a target for the code. Here is a really simple example page.

you



<div id=“container”></div>





<jsitem location=“external” name=“highchartsGantt” cachelocation=“false” url=“https://code.highcharts.com/gantt/highcharts-gantt.js”>var params = arguments[0],
$ = skuid.$;

(function(skuid){
var $ = skuid.$;
$(document.body).one(‘pageload’,function(){
var today = new Date(),
day = 1000 * 60 * 60 * 24;

// Set to 00:00:00:000 today
today.setUTCHours(0);
today.setUTCMinutes(0);
today.setUTCSeconds(0);
today.setUTCMilliseconds(0);
today = today.getTime();

// THE CHART
Highcharts.ganttChart(‘container’, {
title: {
text: ‘Gantt Chart Test’
},
xAxis: {
currentDateIndicator: true,
min: today - 3 * day,
max: today + 18 * day
},

/*
plotOptions: {
    gantt: {
        pathfinder: {
            type: 'simpleConnect'
        }
    }
},
*/

series: [{
    name: 'Offices',
    data: [{
        taskName: 'New offices',
        id: 'new_offices',
        start: today - 2 * day,
        end: today + 14 * day
    }, {
        taskName: 'Prepare office building',
        id: 'prepare_building',
        parent: 'new_offices',
        start: today - (2 * day),
        end: today + (6 * day),
        completed: {
            amount: 0.2
        }
    }, {
        taskName: 'Inspect building',
        id: 'inspect_building',
        dependency: 'prepare_building',
        parent: 'new_offices',
        start: today + 6 * day,
        end: today + 8 * day
    }, {
        taskName: 'Passed inspection',
        id: 'passed_inspection',
        dependency: 'inspect_building',
        parent: 'new_offices',
        start: today + 9.5 * day,
        milestone: true
    }, {
        taskName: 'Relocate',
        id: 'relocate',
        dependency: 'passed_inspection',
        parent: 'new_offices',
        start: today + 10 * day,
        end: today + 14 * day
    }, {
        taskName: 'Relocate staff',
        id: 'relocate_staff',
        parent: 'relocate',
        start: today + 10 * day,
        end: today + 11 * day
    }, {
        taskName: 'Relocate test facility',
        dependency: 'relocate_staff',
        parent: 'relocate',
        start: today + 11 * day,
        end: today + 13 * day
    }, {
        taskName: 'Relocate cantina',
        dependency: 'relocate_staff',
        parent: 'relocate',
        start: today + 11 * day,
        end: today + 14 * day
    }]
}, {
    name: 'Product',
    data: [{
        taskName: 'New product launch',
        id: 'new_product',
        start: today - day,
        end: today + 18 * day
    }, {
        taskName: 'Development',
        id: 'development',
        parent: 'new_product',
        start: today - day,
        end: today + (11 * day),
        completed: {
            amount: 0.6,
            fill: '#e80'
        }
    }, {
        taskName: 'Beta',
        id: 'beta',
        dependency: 'development',
        parent: 'new_product',
        start: today + 12.5 * day,
        milestone: true
    }, {
        taskName: 'Final development',
        id: 'finalize',
        dependency: 'beta',
        parent: 'new_product',
        start: today + 13 * day,
        end: today + 17 * day
    }, {
        taskName: 'Launch',
        dependency: 'finalize',
        parent: 'new_product',
        start: today + 17.5 * day,
        milestone: true
    }]
}]

});

});

})(skuid);

You would need to have an object that would store the task values and modify this code to grab those values from your model and create a array you can pass to HighCharts Gantt.

Thanks,

Bill