Using DHTMLX Gantt Chart with MeteorJS Framework

| Comments (9)

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

    • Mark January 18, 2017 at 5:12 pm

      I know it’s late but sticking this in here for others to find. Put the initiation into the rendered function. That way the innerHTML that the gantt.init is trying to mess around with will actually be on the page by then.

      Template.name.rendered = function() {

      //Init dhtmlxGantt.
      gantt.init(“gantt_here”);

      }

      NB I’m still having problems when updating a Task, oh well!

      update failed: Access denied. In a restricted collection you can only update documents, not replace them. Use a Mongo update operator, such as ‘$set’.

  4. Norbert January 20, 2017 at 12:11 pm

    Is it possible to activate a locale within the meteor package, where do i have to place the string, so that the wanted language will be used?
    Thanks in advance,
    Norbert

  5. benjamin February 1, 2017 at 9:52 am

    We are looking for gantt chart.
    Our service framework are using meteor js.
    We found it out DHTMLX to support meteor js.
    I ‘d like to know there are no problem with meteor js and DHTMLX gantt

    • Aras Kairys (DHTMLX team) February 8, 2017 at 7:08 pm

      Benjamin,
      Unfortunately, we don’t have a ready integration solution for dhtmlxGantt and Meteor.js. Nevertheless, such integration is possible and you can find some tips about it above.

Leave a Reply