JQuery GanttChart - Apply Data

I tried to use the gantview jquery plugin (https://github.com/thegrubbsian/jquery.ganttView)

So the needed data is like:

    {
        id: 1, name: "Feature 1", series: [
            { name: "Planned", start: new Date(2010,00,01), end: new Date(2010,00,03) },
            { name: "Actual", start: new Date(2010,00,02), end: new Date(2010,00,05), color: "#f0f0f0" }
        ]
    }, 
    {
        id: 2, name: "Feature 2", series: [
            { name: "Planned", start: new Date(2010,00,05), end: new Date(2010,00,20) },
            { name: "Actual", start: new Date(2010,00,06), end: new Date(2010,00,17), color: "#f0f0f0" },
            { name: "Projected", start: new Date(2010,00,06), end: new Date(2010,00,17), color: "#e0e0e0" }
        ]
    }, 
    {
        id: 3, name: "Feature 3", series: [
            { name: "Planned", start: new Date(2010,00,11), end: new Date(2010,01,03) },
            { name: "Actual", start: new Date(2010,00,15)开发者_开发问答, end: new Date(2010,01,03), color: "#f0f0f0" }
        ]
    }, 
    {
        id: 4, name: "Feature 4", series: [
            { name: "Planned", start: new Date(2010,01,01), end: new Date(2010,01,03) },
            { name: "Actual", start: new Date(2010,01,01), end: new Date(2010,01,05), color: "#f0f0f0" }
        ]
    }

Ok I think its JSON :-) So I built it in php, my funcs output is:

SERIES DATA
Array
(
    [name] => Krank
    [start] => 1317420000
    [end] => 1320102000
)
DATA
Array
(
    [id] => 1
    [name] => 15
    [series] => Array
        (
            [name] => Krank
            [start] => 1317420000
            [end] => 1320102000
        )

)
JSON
{"id":1,"name":15,"series":{"name":"Krank","start":1317420000,"end":1320102000}}

Of course I submit only the json part to the plugin ;)

I built an array and encode it to json.

So with this data the plugin doesn't work. I have no idea how to rebuild this data with php.

some hints? ;)

here is some workaround: http://dhanushkaat.blogspot.com/2011/01/jquery-gantt-chart.html

After reading the source code of jquery.ganttView and some trial and error, I found that the start and end accept format in Y-m-d and m-d-Y when the data is supplied by an external url (using dataUrl instead of data):

$(function () {
        $("#ganttChart").ganttView({ 
            dataUrl: 'data.json',
            slideWidth: 900,
            behavior: {
                onClick: function (data) { 
                    var msg = "You clicked on an event: { start: " + data.start.toString("M/d/yyyy") + ", end: " + data.end.toString("M/d/yyyy") + " }";
                    $("#eventMessage").text(msg);
                },
                onResize: function (data) { 
                    var msg = "You resized an event: { start: " + data.start.toString("M/d/yyyy") + ", end: " + data.end.toString("M/d/yyyy") + " }";
                    $("#eventMessage").text(msg);
                },
                onDrag: function (data) { 
                    var msg = "You dragged an event: { start: " + data.start.toString("M/d/yyyy") + ", end: " + data.end.toString("M/d/yyyy") + " }";
                    $("#eventMessage").text(msg);
                }
            }
        });

    });

An example of data:

[
{
    "id": "1", "name": "Feature 1", "series": [
        { "name": "Planned", "start": "2010-01-01", "end": "2010-01-03" },
        { "name": "Actual", "start": "2010-01-02", "end": "2010-01-05", "color": "#f0f0f0" }
    ]
}, 
{
    "id": "2", "name": "Feature 2", "series": [
        { "name": "Planned", "start": "2010-01-05", "end": "2010-01-20" },
        { "name": "Actual", "start": "2010-01-06", "end": "2010-01-17", "color": "#f0f0f0" },
        { "name": "Projected", "start": "2010-01-06", "end": "2010-01-17", "color": "#e0e0e0" }
    ]
}]

    $(function () {
        var ganttData = [];        
        function onDataReceived(Data) {
            $.each(Data, function (i, j) {
                var obj = { id: j.id,name:j.name,series:[] }                   
                $.each(j.series, function (i1, j1) {                   
                    obj['series'].push({ name: j1.name, start: new Date(2010, 00, 05), end: new Date(2010, 00, 20) });
              });
                ganttData.push(obj)        });

             $("#ganttChart").ganttView({
                data: ganttData,
                slideWidth: 900,
                behavior: {
                    onClick: function (data) {

                    },
                    onResize: function (data) {

                    },
                    onDrag: function (data) {


                    }
                }
            });       

        }
        var dataUrl = "/Engineering/GetData";
        $.ajax({
            type: "POST",
            url: dataUrl,
            data: "{}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: onDataReceived
        });


    });

Model

public class GanttModel
{
    public int id { get; set; }
    public string name { get; set; }
    public List<GanttProperties> series { get; set; }
}


public class GanttProperties
{
    public string name { get; set; }
    public DateTime start { get; set; }
    public DateTime end { get; set; }
    public string color { get; set; }

}

ACTION method

public ActionResult GetData()
{
    List<GanttProperties> series;
    List<GanttModel> gantdata = new List<GanttModel>
    {

        new GanttModel {id=  1,name="Brick Work", series=new List<GanttProperties> { new GanttProperties {name = "Scope work" ,start= DateTime.Now,end =DateTime.Now.AddDays(20),color = "green"} } },
        new GanttModel {id=  2,name="Common Work", series=new List<GanttProperties> { new GanttProperties {name = "No Of days to Complete 6th Slab", start= DateTime.Now,end =DateTime.Now.AddDays(20),color = "green"} } }

    };

    return Json(gantdata, JsonRequestBehavior.AllowGet);
}