Using DHTMLX Gantt Chart with MeteorJS Framework

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!

What would you like to see in our next articles about dhtmlxGantt?

We need your feedback to provide the right integrations at the right time. Please leave your requests here:

Advance your web development with DHTMLX

Gantt chart
Event calendar
Diagram library
30+ other JS components