How to Use DHTMLX Gantt Chart with FireBase Platform

| Comments (2)

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 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.


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=""></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:


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 and use your URL.

var data = new Firebase(""),
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!


  1. john August 30, 2017 at 7:52 pm

    This is an excellent sample. I showed my boss what is possible and they were blown away by seeing a new project created on 10 different user screens in real-time collaboration. I’m trying to get them to move away from MSProject but the one question they had was having a rapid data entry grid with lots of other fields besides the gantt columns. So, is there a demo or connector of using Grid component with Firebase?

    • Aras Kairys (DHTMLX team) August 31, 2017 at 2:45 pm

      Hi John,
      Unfortunately, we don’t have a ready demo or a special adapter for dhtmlxGrid integration with Firebase. However, such integration is definitely possible.

Leave a Reply