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

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×