jQuery Gantt not initialising

Question

I'm not too sure why my jQuery Gantt isn't working - I've followed the exact examples as seen on the website. This is my code so far:

$(function () {

    "use strict";

    $(".gantt").gantt({
        source: [{
            name: "Sprint 0",
            desc: "Analysis",
            values: [{
                from: "/Date(1320192000000)/",
                to: "/Date(1322401600000)/",
                label: "Requirement Gathering",
                customClass: "ganttRed"
            }]
        }, {
            name: " ",
            desc: "Scoping",
            values: [{
                from: "/Date(1322611200000)/",
                to: "/Date(1323302400000)/",
                label: "Scoping",
                customClass: "ganttRed"
            }]
        }, {
            name: "Sprint 1",
            desc: "Development",
            values: [{
                from: "/Date(1323802400000)/",
                to: "/Date(1325685200000)/",
                label: "Development",
                customClass: "ganttGreen"
            }]
        }, {
            name: " ",
            desc: "Showcasing",
            values: [{
                from: "/Date(1325685200000)/",
                to: "/Date(1325695200000)/",
                label: "Showcasing",
                customClass: "ganttBlue"
            }]
        }, {
            name: "Sprint 2",
            desc: "Development",
            values: [{
                from: "/Date(1326785200000)/",
                to: "/Date(1325785200000)/",
                label: "Development",
                customClass: "ganttGreen"
            }]
        }, {
            name: " ",
            desc: "Showcasing",
            values: [{
                from: "/Date(1328785200000)/",
                to: "/Date(1328905200000)/",
                label: "Showcasing",
                customClass: "ganttBlue"
            }]
        }, {
            name: "Release Stage",
            desc: "Training",
            values: [{
                from: "/Date(1330011200000)/",
                to: "/Date(1336611200000)/",
                label: "Training",
                customClass: "ganttOrange"
            }]
        }, {
            name: " ",
            desc: "Deployment",
            values: [{
                from: "/Date(1336611200000)/",
                to: "/Date(1338711200000)/",
                label: "Deployment",
                customClass: "ganttOrange"
            }]
        }, {
            name: " ",
            desc: "Warranty Period",
            values: [{
                from: "/Date(1336611200000)/",
                to: "/Date(1349711200000)/",
                label: "Warranty Period",
                customClass: "ganttOrange"
            }]
        }],
        navigate: "scroll",
        scale: "weeks",
        maxScale: "months",
        minScale: "days",
        itemsPerPage: 10,
        onItemClick: function (data) {
            alert("Item clicked - show some details");
        },
        onAddClick: function (dt, rowId) {
            alert("Empty space clicked - add an item!");
        },
        onRender: function () {
            if (window.console && typeof console.log === "function") {
                console.log("chart rendered");
            }
        }
    });

    $(".gantt").popover({
        selector: ".bar",
        title: "I'm a popover",
        content: "And I'm the content of said popover."
    });
});

I've included a link here to show it: http://jsfiddle.net/Zn2ML/

Not sure why it doesn't look like this: http://taitems.github.com/jQuery.Gantt/

Answer 1

It seems that you are missing to include javascript files and css files from:

http://taitems.github.com/jQuery.Gantt/

start from an easy example, do not forget to include all the css and javascript like in the example, and then start doing your code updates to make it fit your needs.

Answer 2

See this example

the icons not be loaded for this...

you code

.fn-gantt .dataPanel {
    margin-left: 0px;
    border-right: 1px solid #DDD;
    background-image: url(../img/grid.png);
    background-repeat: repeat;
    background-position: 24px 24px;
}

change for:

.fn-gantt .dataPanel {
    margin-left: 0px;
    border-right: 1px solid #DDD;
    background-image: url(http://taitems.github.com/jQuery.Gantt/img/grid.png);
    background-repeat: repeat;
    background-position: 24px 24px;
}

jsFiddle example