Unable to load multiple ibm gantt charts on the same page.

[gfong007]

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

My Example code:

        // # {{{ 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);

...
`

[delhoume]

I have no idea, and no such example seem to exist. I would make sure all references to parameters are unique, for example , change every time id: 'id' with a new value both in configuration and in data.