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

Pat VachonPat Vachon ✭✭
edited June 25 in Ideas
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.

image

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/
7
7 votes

Under Consideration · Last Updated

Comments

  • edited June 25
    How much is it worth to ya?
  • Pat VachonPat Vachon ✭✭
    edited January 2016
    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.
  • edited June 25
    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?


  • Pat VachonPat Vachon ✭✭
    edited June 2016
    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
  • Rob HatchRob Hatch 🛠️ 
    edited September 2016
    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.   
  • edited February 2015
    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.
  • edited February 2015
    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.
  • edited November 2016
    need this .. please build
  • edited January 2019
    Any timeline when Gantt Chart will be available on Skuid?
  • edited September 2018
    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 [email protected]
  • Jack SanfordJack Sanford ✭✭
    edited January 2019
    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)         }]     }]  });
  • Jack SanfordJack Sanford ✭✭
    edited January 2019
    Looks like a separate license cost for Highcharts Gantt
  • edited January 2019
    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="var" title="Link: https://code.highcharts.com/gantt/highcharts-gantt.js">var">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
Sign In or Register to comment.