Using DHTMLX Gantt Chart with MeteorJS Framework

| Comments (5)

MeteorJS is an open-source real-time JavaScript web application framework written on top of Node.js. The coolest thing about it is the ability to automatically transfer data changes to clients in real-time without requiring the developer to write any synchronization code.

On the client, Meteor can be integrated with any JavaScript UI library and we have managed to simplify using of dhtmlxGantt with this framework.

download gantt

Why you may need this?

If you create a project management application (with Gantt chart in our case) and use Meteor Web Framework, the end users of this app will be able to see all the changes of the charts in real-time. Business analysts and project managers would highly appreciate this ability – monitoring of the whole project process would be faster and more productive.

Leaving aside many words about the benefits of this integration, let’s move on to the technical part. Here we have two options:

(1) Special dhtmlxGantt package for Meteor

In general, you may download the package from our website and integrate it in your Meteor app, but it will require much more additional work: go to the website each time when the version is updated, download the package, unpack, include it, etc. That’s why we created a special package which requires only two small steps to start using dhtmlxGantt with Meteor:

Step 1. Add this dhtmlxGantt package:

meteor add dhtmlx:gantt

Step 2. Initialize dhtmlxGantt component:

<body>
    <div id="gantt_here" style='width: 100%; height: 500px;'></div>
</body>
gantt.init("gantt_here");

This is it. Note that in this case you’ll need to set the communication with database by yourself to get that cool real-time feature.

But we wouldn’t write this post without providing you the ready solution for this feature, and that’s why let’s look at the option 2.

(2) Meteor data adapter for dhtmlxGantt

The following instructions will help you to set up dhtmlxGantt in the way that data in the chart updates live on the screen as it changes.

meteor add dhtmlx:gantt-data

  • Define data collections as usual:

TasksCollection = new Mongo.Collection("tasks");
LinksCollection = new Mongo.Collection("links");

  • Initialize dhtmlxGantt and data adapter:

<body>
  <div id="gantt_here" style='width: 100%; height: 500px;'></div>
</body>

Meteor.startup(function() {
  //Init dhtmlxGantt.
  gantt.init("gantt_here");

  //Init dhtmlxGantt data adapter.
  gantt.meteor({tasks: TasksCollection, links: LinksCollection});
  //or
  gantt.meteor(
    {tasks: TasksCollection.find(/*[anything]*/), links: LinksCollection.find(/*[anything]*/)},
    {tasks: TasksCollection, links: LinksCollection}
  );
});

That’s all. Now you can enjoy having nice-looking gantt chart in your Meteor app. Soon we’ll share the similar instructions for dhtmlxScheduler integration with MeteorJS. Stay tuned!

Comments

  1. Francisco Calle May 26, 2015 at 9:59 am

    It’s great to know about this adapter. I’ve used DHTMLX-Gantt tool with previous versions of Meteor (<0.9) and it was, to say the least, tricky ;-) to make it work properly (re-render was a real pain) but the results where worth it.

  2. Mustafa June 19, 2015 at 3:00 am

    This does not work :/

  3. Michael August 7, 2016 at 12:49 am

    As soon, as I put the Gantt in a template:

    I get this error:
    dhtmlx_gantt.js:375Uncaught TypeError: Cannot set property ‘innerHTML’ of nullgantt._init_html_area @ dhtmlx_gantt.js:375gantt._reinit @ dhtmlx_gantt.js:374gantt.init @ dhtmlx_gantt.js:374(anonymous function) @ main.js:7maybeReady @ startup_client.js:26loadingCompleted @ startup_client.js:38

Leave a Reply