{"id":2832,"date":"2015-05-15T15:29:00","date_gmt":"2015-05-15T11:29:00","guid":{"rendered":"http:\/\/www.dhtmlx.com\/blog\/?p=2832"},"modified":"2023-05-05T13:41:39","modified_gmt":"2023-05-05T10:41:39","slug":"using-dhtmlx-gantt-chart-meteorjs-framework","status":"publish","type":"post","link":"https:\/\/dhtmlx.com\/blog\/using-dhtmlx-gantt-chart-meteorjs-framework\/","title":{"rendered":"Using DHTMLX Gantt Chart with MeteorJS Framework"},"content":{"rendered":"

MeteorJS<\/a> 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.<\/p>\n

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

\"download<\/a>
\n<\/p>\n

Why you may need this?<\/strong><\/h3>\n

\nIf you create a project management application (with Gantt chart<\/a> 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.<\/p>\n

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

(1) Special dhtmlxGantt package for Meteor<\/strong><\/p>\n

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\u2019s why we created a special package which requires only two small steps to start using dhtmlxGantt with Meteor:<\/p>\n

Step 1. Add this dhtmlxGantt package<\/a>:<\/p>\n

meteor add dhtmlx:<\/span>gantt<\/div><\/div>\n

Step 2. Initialize dhtmlxGantt component:<\/p>\n

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

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.<\/p>\n

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.<\/p>\n

(2) Meteor data adapter for dhtmlxGantt<\/strong><\/p>\n

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.<\/p>\n