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

  • 7
  • Idea
  • Updated 11 months ago
  • Under Consideration
  • (Edited)
I am not sure this is something that for sure can be made into a component, but it would be awesome!!! If I had the money to buy the license, I'd be all over this like white on rice.



Not everyone would want this, but I'd say "make it a add-on component".

http://www.bryntum.com/blog/ext-gantt-ext-scheduler-3-0-ga-available/
Photo of Pat Vachon

Pat Vachon, Champion

  • 45,236 Points 20k badge 2x thumb

Posted 5 years ago

  • 7
Photo of Irvin Waldman

Irvin Waldman, Champion

  • 9,026 Points 5k badge 2x thumb
How much is it worth to ya?
Photo of Pat Vachon

Pat Vachon, Champion

  • 45,236 Points 20k badge 2x thumb
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.
Photo of Oliver

Oliver

  • 72 Points
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?
Photo of Pat Vachon

Pat Vachon, Champion

  • 45,236 Points 20k badge 2x thumb
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. ;)

I'd be willing to bet that even if you or I just gave them the money to build this component they would only start to consider building it. That's unless a significant part of the community shows interest. Even then it would only move up the list some.

They have no shortage of things to build that would be cool. I'd say Gantt charts is just one of them.

It's not to say the dev team would not listen. It's just that there many voices in the cacophony of "Hey! Build this. That be awesome!"

So, together now, anyone interested in a Gantt Chart component, chime in and like this idea. :D
Photo of Rob Hatch

Rob Hatch, Official Rep

  • 44,968 Points 20k badge 2x thumb
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.   
Photo of Peter Baeza

Peter Baeza

  • 2,868 Points 2k badge 2x thumb
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.
Photo of Oliver

Oliver

  • 72 Points
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.
Photo of Jaime

Jaime

  • 1,230 Points 1k badge 2x thumb
need this .. please build
Photo of Mark Floyd

Mark Floyd

  • 60 Points
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
Photo of Toms Vineeth John

Toms Vineeth John

  • 552 Points 500 badge 2x thumb
Any timeline when Gantt Chart will be available on Skuid?
Photo of Jack Sanford

Jack Sanford, Champion

  • 10,100 Points 10k badge 2x thumb
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)
        }]
    }] 
});
(Edited)
Photo of Jack Sanford

Jack Sanford, Champion

  • 10,100 Points 10k badge 2x thumb
Looks like a separate license cost for Highcharts Gantt
Photo of Bill McCullough

Bill McCullough, Champion

  • 13,602 Points 10k badge 2x thumb
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 <skuidpage unsavedchangeswarning="yes" personalizationmode="server" showsidebar="false" useviewportmeta="true" showheader="false">
    <models/>
    <components>
        <template multiple="false" uniqueid="sk-3XPM-220" allowhtml="true">
            <contents>&lt;div id="container"&gt;&lt;/div&gt;</contents>
        </template>
    </components>
    <resources>
        <labels/>
        <javascript>
            <jsitem location="external" name="highchartsGantt" cachelocation="false" url="https://code.highcharts.com/gantt/highcharts-gantt.js">var params = arguments[0],
    $ = skuid.$;
</jsitem>
            <jsitem location="inline" name="newInlineJS" cachelocation="false" url="">(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);</jsitem>
        </javascript>
        <css/>
        <actionsequences/>
    </resources>
    <styles>
        <styleitem type="background" bgtype="none"/>
    </styles>
</skuidpage>

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