Jump to content
JChartFX Community
  • 0
niravbhatt

JChartFX Gantt chart is not working with dates

Question

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(ganttDatafunction (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 by niravbhatt
Bold points

Share this post


Link to post
Share on other sites

3 answers to this question

Recommended Posts

  • 0

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

Share this post


Link to post
Share on other sites
  • 0

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.

Share this post


Link to post
Share on other sites
  • 0

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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...