How to Use DHTMLX Gantt Chart with FireBase Platform

In this post we’d like to share the instructions that will help you to use dhtmlxGantt with Firebase. For this we developed a special adapter that you’re welcome to download from github.

Firebase is a powerful platform that provides API for data storage and real-time synchronization, and the server where the data is stored. Moreover, it includes user authentication, static hosting, and more.

firebase-gantt

Firebase adapter for dhtmlxGantt: what for?

Some time ago real-time sync of web apps was a cool feature, but today it’s a must-have. The changes that are made in the app will be synced to all clients: both to the connected users in real-time and to those who are offline (data is synchronized instantly when your app regains connectivity). So, all the changes made to the Gantt Chart in your application will be transfered to clients working with your app.

gantt-firebase

How to use

Step 1. First af all, we need to include dhtmlxGantt and Firebase files on the page.

Download dhtmlxGantt
Download Firebase adapter for Gantt

<!-- dhtmlxGantt -->
<script src="../source/dhtmlx_gantt/sources/dhtmlxgantt.js"></script>
<link rel="stylesheet" href="../source/dhtmlx_gantt/sources/skins/dhtmlxgantt_skyblue.css">

<!-- dhtmlxGantt-Firebase adapter -->
<script type="text/javascript" src="../source/dhtmlx_gantt_firebase.js"></script>

<!-- FireBase -->
<script src="https://cdn.firebase.com/js/client/2.2.4/firebase.js"></script>

Step 2. The next step is to create html for dhtmlxGantt:

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

Step 3. Now we init dhtmlxGantt:

gantt.init("gantt_here");

Step 4. Create firebase connection and set this to the gantt.

Note: we used our test base. Your need to create your own base on firebase.com and use your URL.

var data = new Firebase("https://dhtmlxgantttest.firebaseio.com/"),
gantt.firebase({tasks: data.child("tasks"), links: data.child("links")});

Well, that’s all we need to start using dhtmlxGantt on FireBase Platform. If you have any questions/comments, you’re welcome to leave them below.

Thanks for reading!

Advance your web development with DHTMLX

Gantt chart
Event calendar
Diagram library
30+ other JS components