Click here to Skip to main content
14,021,962 members
Click here to Skip to main content
Add your own
alternative version

Stats

17.5K views
9 bookmarked
Posted 18 Sep 2015
Licenced GPL3

Creating Gantt Chart App with dhtmlxGantt and MeteorJS

, 18 Sep 2015
Rate this:
Please Sign up or sign in to vote.
Detailed description of how to use Gantt Chart in the MeteorJS based applications

Introduction

Gantt Chart is one of the possible ways of data visualization. Since these charts allow visualizing the workflow in the intuitive way they are widely used in project management software. In this article, I want to cover the process of creation of an online Gantt chart application. There are only two components I’ll use: MeteorJS and dhtmlxGantt. Let’s take a closer look at them.

dhtmlxGantt and MeteorJS Basic Features

dhtmlxGantt is an open source JavaScript Gantt chart. Besides the Gantt chart creation, it allows you to add some extra features to your project, e.g. exporting, important tasks highlighting, filtering, zooming, critical path, deadlines, etc. Here’s the basic chart demo for you to understand how it looks and behaves. Want more? Here’s a bunch of samples that covers most of its features.

MeteorJS is an open-source complete full-stack JavaScript framework written using Node.js. It was designed to simplify the web applications development process. Its main feature is the possibility to transfer data changes in real-time. And there’s no need to write extra synchronization code. You can visit this page to check the features list.

Creating the Gantt Chart

First of all, we need to install MeteorJS and create the simple Meteor application.

Installing MeteorJS and Creating Your First Application

The way of installation may vary from one OS to another. On OS X or Linux you should run in your terminal the following command:

curl https://install.meteor.com/ | sh

If you use Windows, you should get the installer. Visit this installation guide for the details.

After you install NodeJS, you can open your terminal and create the basic application. Let’s call our project my-chart:

meteor create my-chart

This code will create the folder with my-chart name. Within this folder, you can find a couple of files and a folder that your project consists of at this stage. Here’s how they look like on my Linux system:

.meteor
my-chart.css
my-chart.html
my-chart.js

You can already run this basic application to make sure that everything works fine. Just type the meteor command from your project’s directory:

cd my-chart
meteor

Here’s the output you’ll get in case everything fine:

=> Started proxy.                             
=> Started MongoDB.                           
=> Started your app.                          

=> App running at: http://localhost:3000/

meteor-application

It’s a little web page with the button that counts the number of clicks. Well, it seems that everything works. Let’s proceed with dhtmlxGantt.

Adding dhtmlxGantt to Your Project

You can either download the package from the developer’s website or use the special Meteor package. Since there’s no reason for us to do some routine work such as downloading, unpacking and so on, let’s choose the second option:

meteor add dhtmlx:gantt

The next step is to get the data adapter that will enable real-time data update:

meteor add dhtmlx:gantt-data

Alright, all the required packages are downloaded, and we can continue creating the chart.

According to the documentation, the my-chart.html file defines view templates which mean that we can place our HTML code in it. Open the file and replace the code it contains with the following:

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

 This code will create the DIV container. We’ll soon place the chart within it.

The my-chart.js file is a JavaScript file loaded on both client and server. It will contain the code that creates the data storage, initializes and configures the chart.

MeteorJS uses the MongoDB database. You should use so-called Collections to store the data. Collections can be accessed both from the server and the client. Moreover, they update themselves automatically which means that all changes will be rendered on the screen immediately.

We should create two Collections. The first one will contain the data that describes the existing tasks. The second one holds the information about the links between the tasks.

Open the my-chart.js file and change its content to this:

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

The next step is to initialize the chart and use the data adapter. We want to run our chart code on the client side. We’ll use if (Meteor.isClient) statement for that purpose. To run the code we need, we can use this code: Meteor.startup(func).

Assuming this info, we can add to our .js file something like that:

if (Meteor.isClient) {
    /* runs only on the client side */
    Meteor.startup(function() {
        /* place your client side code here*/
    });
}

There are few short steps that separate us from the goal. First of all, we should initialize the chart within the previously created DIV container:

gantt.init("gantt_here");

The last step is to initialize the data adapter:

//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}

After you put this code within the client side function, you can run the application. Just open your terminal and type:

meteor

After that you can check the results in your browser:

gantt-meteor

This chart doesn’t have any data to render. We should create the task to see how it works. Click this “+” button and the “New Task” window will appear on the screen:

task-meteor-gantt

You can create as many tasks as you want, define the links between them, drag them through the calendar grid to change the start time and resize them to change the duration. The best part about it is that you can close the browser shut down the server, and after you run it again you’ll see that all your tasks are in the right places. 

Real-time Changes

Let’s check how the MeteorJS application reacts to changes. We’ll start with the simple example. Remember how we defined the DIV container? Let me remind you:

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

 Well, here’s the deal. You can change this code and after you save the changes there will be no need to refresh the page or do some other extra job. Application appearance will change automatically.

For example add this code to the style attribute:

border: 2px solid #222

Save it and after a couple of moments the application will refresh itself and change the style of the border:

style-border-gantt

Now let’s check how the database works. Open new tab in your terminal, go to the project’s directory and run:

meteor mongo

This code will open a console into your app’s local development database. Now you can handle your database. Let’s do some search work:

db.tasks.find({text:"Create my first app"});

This code will find the second task from our database. Here’s the output that I got:

{ "_id" : "YFhwdZxWtWns2g6oq", "id" : "1441072445217", 
"start_date" : ISODate("2015-08-31T21:00:00Z"), 
"text" : "Create my first app", "duration" : 1,
"end_date" : ISODate("2015-09-01T21:00:00Z"), "parent" : 0 }

Here you can see the values of the task properties, e.g. its ID, start date, duration, etc.

Let’s now delete this task. There are several ways to do it. We’ll use the Object ID value as an example:

db.tasks.remove({_id:"YFhwdZxWtWns2g6oq"});

Run this command, then back to your browser and you’ll see that the task with the proper ID is deleted:

meteor-and-gantt-app

Conclusion

MeteorJS allows you create an online application in a few easy steps. You can compare the example from this article with this Getting Started Guide that requires much more time to build a basic chart. One of the best parts of MeteorJS is the possibility to see the changes in real-time. And there’s no need to do some hard work to make this feature work. Meteor was initially designed to work like that.

 

License

This article, along with any associated source code and files, is licensed under The GNU General Public License (GPLv3)

Share

About the Author

Stas Wolski
Software Developer (Senior)
Russian Federation Russian Federation
Building web apps since 2001. Rich experience in HTML frontends for different platforms.

You may also be interested in...

Pro
Pro

Comments and Discussions

 
QuestionCannot SAVE Pin
Sebastian Cheung17-Sep-17 3:45
memberSebastian Cheung17-Sep-17 3:45 
Questionvery informative Pin
Member 1235163325-Feb-16 4:35
memberMember 1235163325-Feb-16 4:35 
QuestionWhat is difference between MeteorJS and AngularJS Pin
Tridip Bhattacharjee18-Sep-15 9:16
professionalTridip Bhattacharjee18-Sep-15 9:16 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Cookies | Terms of Use | Mobile
Web04 | 2.8.190417.4 | Last Updated 18 Sep 2015
Article Copyright 2015 by Stas Wolski
Everything else Copyright © CodeProject, 1999-2019
Layout: fixed | fluid