vAdditionalHeaders within jsGanttImproved not displaying values within JSON object

Question

Within my jsgantt project, I have a number of additional headers that are being dynamically generated based off of the users input.

The issue that im having is that the values that are getting passed to the gantt object are not being displayed within the chart. I feel like this is most likley a formatting issue on my end but I have no idea where this issue is at or where I can look.

I am not getting any errors at all and when I print the json object to the console, the values are there.

Below is my configuration of the gantt object

    g.setOptions({
        vCaptionType: 'Complete',  // Set to Show Caption : None,Caption,Resource,Duration,Complete,     
        vQuarterColWidth: 36,
        vDateTaskDisplayFormat: 'day dd month yyyy', // Shown in tool tip box
        vDayMajorDateDisplayFormat: 'mon yyyy - Week ww',// Set format to dates in the "Major" header of the "Day" view
        vWeekMinorDateDisplayFormat: 'dd mon', // Set format to display dates in the "Minor" header of the "Week" view
        vLang: 'en',
        vShowTaskInfoLink: 1, // Show link in tool tip (0/1)
        vShowEndWeekDate: 0,  // Show/Hide the date for the last day of the week in header for daily
        vAdditionalHeaders: headers, 
        vUseSingleCell: 1000, // Set the threshold cell per table row (Helps performance for large data.
        vFormatArr: ['Day', 'Week', 'Month', 'Quarter'], // Even with setUseSingleCell using Hour format on such a large chart can cause issues in some browsers,
        vEditable: true,
        vColumnOrder: ['vShowStartDate', 'vShowEndDate', 'vAdditionalHeaders', 'vShowAddEntries'],
    });

    $.get({
        url: '/gantt_data',
        dataType: 'json',
        success: function(data){
                data.forEach(function(item){
                    console.log(item);
                    g.AddTaskItemObject(item);
                }) 
                g.Draw();
            }

        });

here is how im configuring my additional headers

    var names = [];
    var headers = {
        pComp:{
            title: '% E.V.'
        }, 
        pHoursBudgeted: {
            title: 'Budget Hours'
        },

    };
    $.get({
    url: '/headers',
    dataType: 'json',
    success: function(data) {
        for(var i=0; i < data.length; i++){
        var tname = data[i]['Title'].replace(/ /g, "_");
        var name = data[i]['Title'];
        var Title = {title: name};
        headers[tname]=Title;
        names.push(name);
        }
    }
    });

some of my headers contained a space within the key value. i thought this might be the issue however when i replaced all of the spaces with underscores, the issue remained. the json object that is getting passed looks like this

{pID: 57, pName: "090668 Valve Turning Program", pStart: "2009-11-01 00:00", pEnd: "", pPlanStart: "2009-11-01 00:00", …}
pID: 57
pName: "090668 Valve Turning Program"
pStart: "2009-11-01 00:00"
pEnd: ""
pPlanStart: "2009-11-01 00:00"
pPlanEnd: ""
pClass: "ggroupblack"
pLink: ""
pMile: 0
pRes: ""
pComp: 0
pGroup: 1
pParent: 0
pOpen: ""
pDepend: ""
pCaption: ""
pCost: ""
pNotes: ""
pBarText: ""
pPhase: "090668 Valve Turning Program"
pHoursBudgeted: 999
pNum: "90668"
pManager: "Mary Nykamp"
pPrincipal: "Matthew Davis"
pTest: "999"
id: null
employee_id: null
project_id: 57
project_phase: "090668 Valve Turning Program"
year_week: "2020-W05"
hours: 7
ProjectID: 57
ScheduleID: 379
EmployeeID: 1
Freestone_Smith_T: 7

finally, after all of this is ran, my gant still looks like this

Answer 1

Well, you have to g.setOptions with the headers populated after u receive a fetch request.

Wha I think its happening here is that your headers array its empty in the moment that you set the options to the jsgantt.