JChartFX Gantt chart is not working with dates

[niravbhatt]

Currently I am using licensed JChartFX and trying to plot gantt chart in my project. I need to plot gantt chart between some date to some date. The sample JSON for that is

ganttData = [
  {
    "ProjectName": "PROJECT 1",
    "StartValue": "2",
    "EndValue": "5",
    "TimeStamp": "15/11/2016 12:33 PM",
      },
  {
    "ProjectName": "PROJECT 1",
    "StartDate": "2016-11-05T00:00:00+05:30",
    "EndDate": "2016-11-30T00:00:00+05:30",
    "TimeStamp": "15/11/2016 12:33 PM",
  },
] 

my code to plot is 

$.each(ganttData, function (index, source) {
      $.each(source, function (key, value) {
            if (key == labelValue) {
                chart1.getAxisX().getLabels().setItem(index, (value));
             }
             else if (key == startValue) {
                data.getYFrom().setItem(0, index, (value));             
             }
             else if (key == endValue) {
                data.setItem(0, index, (value));
             }
        });
});

1. Is JChartFX Gantt chart supports date and time?

2. if yes then, How to feed date and time in Gantt chart

Please guide me if I am missing something or JChartFX way of doing it.

Thanks in advance.

Edited November 15, 2016 by niravbhatt
Bold points

[JuanC]

I am including sample code on how to create a simple gantt chart using either numerical data or dates, please note that if you set the fields correctly you do not need to manually loop through the data.

    var usingDates = true;
    var ganttData;

    if (usingDates) {
        ganttData = [
            {
                "ProjectName": "PROJECT 1",
                "StartValue": "2016-11-05T00:00:00+05:30",
                "EndValue": "2016-11-30T00:00:00+05:30",
                "TimeStamp": "15/11/2016 12:33 PM",
            },
            {
                "ProjectName": "PROJECT 2",
                "StartValue": "2016-11-12T00:00:00+05:30",
                "EndValue": "2016-12-05T00:00:00+05:30",
                "TimeStamp": "15/11/2016 12:33 PM",
            },
        ];

        chart1.getAxisY().getLabelsFormat().setFormat(cfx.AxisFormat.Date);
    } else {
        ganttData = [
            {
                "ProjectName": "PROJECT 1",
                "StartValue": "2",
                "EndValue": "5",
                "TimeStamp": "15/11/2016 12:33 PM",
            },
            {
                "ProjectName": "PROJECT 2",
                "StartValue": "3",
                "EndValue": "8",
                "TimeStamp": "15/11/2016 12:33 PM",
            },
        ];        
    }

    var fields = chart1.getDataSourceSettings().getFields();
    var field;
    field = new cfx.FieldMap();
    field.setName("StartValue");
    field.setUsage(cfx.FieldUsage.FromValue);
    fields.add(field);

    field = new cfx.FieldMap();
    field.setName("EndValue");
    field.setUsage(cfx.FieldUsage.Value);
    fields.add(field);

    field = new cfx.FieldMap();
    field.setName("ProjectName");
    field.setUsage(cfx.FieldUsage.Label);
    fields.add(field);

    chart1.setGallery(cfx.Gallery.Gantt);
    chart1.setDataSource(ganttData);

Hope this helps.

JuanC

[niravbhatt]

Yes, This helped me. Thanks a lot
Another question for Gantt chart is,

can we plot gantt graph with termination value for example,

[{
  "id": 1,
  "developer": "Linda Oliver",
  "projectname": "Vagram",
  "startdate": "2015-11-17",
  "currentdate": "2016-01-01",
  "ProjectEndDate" : "2016-06-22"
}, {
  "id": 2,
  "developer": "Todd Frazier",
  "projectname": "Otcom",
  "startdate": "2016-01-02",
  "currentdate": "2016-02-12",
  "ProjectEndDate" : "2016-06-22"
}]

How can we plot "ProjectEndDate" (see in JSON) to measure project progress.

 

Please let me know if we can plot gantt chart with End value.

Thanks in advance.

[JuanC]

Please note that we want projected end date to be the first series because of the order we paint elements, also note that we are faking a FromValue for that series because we expect all series to be have the same shape. Finally note that we are setting the gallery for the first series to be Scatter.    

var usingDates = true;
    var ganttData;

    if (usingDates) {
        ganttData = [
            {
                "ProjectName": "PROJECT 1",
                "StartValue": "2016-11-05T00:00:00+05:30",
                "EndValue": "2016-11-30T00:00:00+05:30",
                "ProjectedEndValue": "2016-12-10T00:00:00+05:30",
                "TimeStamp": "15/11/2016 12:33 PM",
            },
            {
                "ProjectName": "PROJECT 2",
                "StartValue": "2016-11-12T00:00:00+05:30",
                "EndValue": "2016-12-05T00:00:00+05:30",
                "ProjectedEndValue": "2016-12-01T00:00:00+05:30",
                "TimeStamp": "15/11/2016 12:33 PM",
            },
        ];

        chart1.getAxisY().getLabelsFormat().setFormat(cfx.AxisFormat.Date);
    } else {
        ganttData = [
            {
                "ProjectName": "PROJECT 1",
                "StartValue": "2",
                "EndValue": "5",
                "ProjectedEndValue": "6",
                "TimeStamp": "15/11/2016 12:33 PM",
            },
            {
                "ProjectName": "PROJECT 2",
                "StartValue": "3",
                "EndValue": "8",
                "ProjectedEndValue": "7",
                "TimeStamp": "15/11/2016 12:33 PM",
            },
        ];        
    }

    var fields = chart1.getDataSourceSettings().getFields();
    var field;

    field = new cfx.FieldMap();
    field.setName("ProjectedEndValue");
    field.setUsage(cfx.FieldUsage.FromValue);
    fields.add(field);

    field = new cfx.FieldMap();
    field.setName("ProjectedEndValue");
    field.setUsage(cfx.FieldUsage.Value);
    fields.add(field);

    field = new cfx.FieldMap();
    field.setName("StartValue");
    field.setUsage(cfx.FieldUsage.FromValue);
    fields.add(field);

    field = new cfx.FieldMap();
    field.setName("EndValue");
    field.setUsage(cfx.FieldUsage.Value);
    fields.add(field);

    field = new cfx.FieldMap();
    field.setName("ProjectName");
    field.setUsage(cfx.FieldUsage.Label);
    fields.add(field);

    chart1.setGallery(cfx.Gallery.Gantt);
    chart1.setDataSource(ganttData);    

    chart1.getSeries().getItem(0).setGallery(cfx.Gallery.Scatter);

 

Hope this helps.

 

JuanC