I have setup my code to load 3 gantt charts on the same page. I got first gantt chart working all the time but the second and third gantt chart works sometimes. My code seems to be erroring out on the *.load mechanism but only on the second and third gantt chart. Any ideas?
Do you have an example with documentation on how to setup multiple gantt charts (using JSON url fetching) on the same page
// # {{{ GENERATE GANTT IBM 1 - DEVICE CHART
function generate_gantt_ibm_1(gantt) {
$.getJSON("./scripts/serverside_processing.cgi", {JSON_DATES_IBM_GANTT: 1 }, function(data) {
gantt.load({
// Configures how to fetch resources for the Gantt
resources: {
data: data, // resources are provided in an array. Instead, we could configure a request to the server.
// Activities of the resources are provided along with the 'activities' property of resource objects.
// Alternatively, they could be listed from the 'data.activities' configuration.
activities: 'activities',
name: 'name', // The name of the resource is provided with the name property of the resource object.
id: 'id', // The id of the resource is provided with the id property of the resource object.
},
// Configures how to fetch activities for the Gantt
// As activities are provided along with the resources, this section only describes how to create
// activity Gantt properties from the activity model objects.
activities: {
start: 'start', // The start of the activity is provided with the start property of the model object
end: 'end', // The end of the activity is provided with the end property of the model object
name: 'name', // The name of the activity is provided with the name property of the model object
}
});
});
}
// # }}}
// # {{{ GENERATE GANTT IBM 2 - ENGINEER RESOURCING
function generate_gantt_ibm_2(gantt) {
$.getJSON("./scripts/serverside_processing.cgi", {JSON_DATES_IBM_GANTT_ENG: 1 }, function(data) {
gantt.load({
// Configures how to fetch resources for the Gantt
resources: {
data: data, // resources are provided in an array. Instead, we could configure a request to the server.
// Activities of the resources are provided along with the 'activities' property of resource objects.
// Alternatively, they could be listed from the 'data.activities' configuration.
activities: 'activities',
name: 'name', // The name of the resource is provided with the name property of the resource object.
id: 'id', // The id of the resource is provided with the id property of the resource object.
},
// Configures how to fetch activities for the Gantt
// As activities are provided along with the resources, this section only describes how to create
// activity Gantt properties from the activity model objects.
activities: {
start: 'start', // The start of the activity is provided with the start property of the model object
end: 'end', // The end of the activity is provided with the end property of the model object
name: 'name', // The name of the activity is provided with the name property of the model object
}
});
});
}
// # }}}
// # {{{ GENERATE GANTT IBM 3 - FAMILY GENERATION
function generate_gantt_ibm_3(gantt) {
$.getJSON("./scripts/serverside_processing.cgi", {JSON_DATES_IBM_GANTT_FAMILY: 1 }, function(data) {
gantt.load({
// Configures how to fetch resources for the Gantt
resources: {
data: data, // resources are provided in an array. Instead, we could configure a request to the server.
// Activities of the resources are provided along with the 'activities' property of resource objects.
// Alternatively, they could be listed from the 'data.activities' configuration.
activities: 'activities',
name: 'name', // The name of the resource is provided with the name property of the resource object.
id: 'id', // The id of the resource is provided with the id property of the resource object.
},
// Configures how to fetch activities for the Gantt
// As activities are provided along with the resources, this section only describes how to create
// activity Gantt properties from the activity model objects.
activities: {
start: 'start', // The start of the activity is provided with the start property of the model object
end: 'end', // The end of the activity is provided with the end property of the model object
name: 'name', // The name of the activity is provided with the name property of the model object
}
});
});
}
// # }}}
$(document).ready(function() {
var ibm_gantt_chart_1 = new Gantt('gantt' /* the id of the DOM element to contain the Gantt chart */, config);
var ibm_gantt_chart_2 = new Gantt('gantt_2' /* the id of the DOM element to contain the Gantt chart */, config2);
var ibm_gantt_chart_3 = new Gantt('gantt_3' /* the id of the DOM element to contain the Gantt chart */, config);
generate_gantt_ibm_1(ibm_gantt_chart_1);
generate_gantt_ibm_2(ibm_gantt_chart_2);
generate_gantt_ibm_3(ibm_gantt_chart_3);
...
`
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent