If you do not find a plugin, you can use oracle-jet gantt by making direct references using a CDN to the files on your apex page.
1 - First upload the main.js file to the shared components of your application. He must follow these guidelines https://docs.oracle.com/middleware/jet400/jet/developer/GUID-219A636B-0D0B-4A78-975B-0528497A82DD.htm#JETDG-GUID-219A636B-0D0B-4A78-975B-0528497A82DD
Your main.js look like this:
/*
* To change this license header, choose License Headers in Project Properties.
* To change this template file, choose Tools | Templates
* and open the template in the editor.
*/
function _getCDNPath(paths) {
var cdnPath = "";
var ojPath = "";
var thirdpartyPath = "";
var keys = Object.keys(paths);
var newPaths = {};
function _isoj(key) {
return (key.indexOf('oj') === 0 && key !== 'ojdnd');
}
keys.forEach(function(key) {
newPaths[key] = cdnPath + (_isoj(key) ? ojPath : thirdpartyPath) + paths[key];
});
return newPaths;
}
require.config({
paths: _getCDNPath({
'knockout': 'https://static.oracle.com/cdn/jet/v4.0.0/3rdparty/knockout/knockout-3.4.0',
'jquery': 'https://static.oracle.com/cdn/jet/v4.0.0/3rdparty/jquery/jquery-3.1.1.min',
'jqueryui-amd': 'https://static.oracle.com/cdn/jet/v4.0.0/3rdparty/jquery/jqueryui-amd-1.12.0.min',
'ojs': 'https://static.oracle.com/cdn/jet/v4.0.0/default/js/min',
'ojL10n': 'https://static.oracle.com/cdn/jet/v4.0.0/default/js/ojL10n',
'ojtranslations': 'https://static.oracle.com/cdn/jet/v4.0.0/default/js/resources',
'text': 'https://static.oracle.com/cdn/jet/v4.0.0/3rdparty/require/text',
'promise': 'https://static.oracle.com/cdn/jet/v4.0.0/3rdparty/es6-promise/es6-promise.min',
'hammerjs': 'https://static.oracle.com/cdn/jet/v4.0.0/3rdparty/hammer/hammer-2.0.8.min',
'signals': 'https://static.oracle.com/cdn/jet/v4.0.0/3rdparty/js-signals/signals.min',
'ojdnd': 'https://static.oracle.com/cdn/jet/v4.0.0/3rdparty/dnd-polyfill/dnd-polyfill-1.0.0.min',
'css': 'https://static.oracle.com/cdn/jet/v4.0.0/3rdparty/require-css/css.min',
'customElements': 'https://static.oracle.com/cdn/jet/v4.0.0/3rdparty/webcomponents/custom-elements.min',
'proj4js': 'https://static.oracle.com/cdn/jet/v4.0.0/3rdparty/proj4js/dist/proj4'
})
})
requirejs.config({
baseUrl: '',
// Path mappings for the logical module names
paths: {
},
// Shim configurations for modules that do not expose AMD
shim: {
'jquery': {
exports: ['jQuery', '$']
},
'maps': {
deps: ['jquery', 'i18n'],
}
},
// This section configures the i18n plugin. It is merging the Oracle JET built-in translation
// resources with a custom translation file.
// Any resource file added, must be placed under a directory named "nls". You can use a path mapping or you can define
// a path that is relative to the location of this main.js file.
config: {
ojL10n: {
merge: {
//'ojtranslations/nls/ojtranslations': 'resources/nls/menu'
}
}
}
});
2 - Now you need to load this file (main.js) and require.js on your page. Use the "File URLs" field for this.
require.js: https://static.oracle.com/cdn/jet/v4.0.0/3rdparty/require/require.js
3 - In the header of your page you need to include this code:
<link rel="stylesheet" id="css" href="https://static.oracle.com/cdn/jet/v4.0.0/default/css/alta/oj-alta-min.css">
<script>
if (!document.createElement) {
document.createElement = document.constructor.prototype.createElement;
document.createElementNS = document.constructor.prototype.createElementNS;
document.importNode = document.constructor.prototype.importNode;
}
// The "oj_whenReady" global variable enables a strategy that the busy context whenReady,
// will implicitly add a busy state, until the application calls applicationBoostrapComplete
// on the busy state context.
window["oj_whenReady"] = true;
</script>
4 - Create a region to place the html of your oracle-jet chart
5 - Finally, create a dynamic action to effectively create your gantt chart. The dynamic action event is page loading. It should run a javascript code. This code is the file demo.js on cookbook site.
Ex. https://apex.oracle.com/pls/apex/f?p=145794:23
login on: https://apex.oracle.com/pls/apex/f?p=4550
workspace: stackquestions
user: test
pwd: test
app: 145794
page: 23
Once you make this work, your problem will be how to get the data and update the gantt depending on some filters. I suggest creating a restful service to get this data from your tables. For this you will need some javascript handling to make your data follow the format expected by oracle-jet. You can see the expected format in the ganttData.json file.
Good luck.
I noticed that the css file needed to make the oracle-jet work interferes with the page's css. I tried to use this idea Limit scope of external css to only a specific element? but it did not work completely.
