I need to implement a gantt chart and think mxGraph Gantt could be the ideal solution. The only problem is with the integration of it in the application.
Has anyone tried integrating and implementing it. If so , then please provide some directions/instructions on how to use it.
https://github.com/jgraph/mxgraph/
Here is Complete Solution:
Few details about different mxGraph Repos:
Repo-1: https://github.com/jgraph/mxgraph
This is an official release repo of mxGraph. With npm issues.
Repo-2: https://bitbucket.org/jgraph/mxgraph2
This is an official development repo of mxGraph. With npm issues.
If anyone wants to see what npm issues with these above repos(i.e. Repo-1 and Repo-2), then check these following issues:
- https://github.com/jgraph/mxgraph/issues/169
- https://github.com/jgraph/mxgraph/issues/175
Repo-3: https://bitbucket.org/lgleim/mxgraph2
Fork of Repo-2. With npm fixes.
Repo-4: https://github.com/ViksYelapale/mxgraph2
Fork of Repo-2. Merged npm fixes from Repo-3 as well. Added changes(i.e. required for local installation of mxGraph) to this repo.
Steps:
Clone Repo-4. Also, add remote of the official repo(i.e. Repo-2) to take the latest mxGraph updates/release/fixes.
Change directory to the mxgraph2 and run npm install
$ cd mxgraph2
$ npm install
Now go to your angular project repo and install mxGraph(i.e. mxgraph2 which we have build locally).
$ npm install /path/to/mxgraph2
e.g. npm install /home/user/workspace/mxgraph2
Which will add a similar entry as below in your package.json file:
"mxgraph": "file:../mxgraph2"
Run normal npm install once. For adding any missing/dependency package.
$ npm install
Now we will install mxgraph typings
Note - Minimum required version of the typescript is 2.4.0
$ npm install lgleim/mxgraph-typings --save
Now you can use mxGraph in your app.
i. component.ts
import { mxgraph } from "mxgraph";
declare var require: any;
const mx = require('mxgraph')({
mxImageBasePath: 'assets/mxgraph/images',
mxBasePath: 'assets/mxgraph'
});
.
.
.
ngOnInit() {
// Note - All mxGraph methods accessible using mx.xyz
// Eg. mx.mxGraph, mx.mxClient, mx.mxKeyHandler, mx.mxUtils and so on.
// Create graph
var container = document.getElementById('graphContainer');
var graph = new mx.mxGraph(container);
// You can try demo code given in official doc with above changes.
}
ii. component.html
<div id="graphContainer"></div>
That's it !!
Hope it will be helpful.