{"id":2939,"date":"2015-08-25T12:29:34","date_gmt":"2015-08-25T08:29:34","guid":{"rendered":"http:\/\/www.dhtmlx.com\/blog\/?p=2939"},"modified":"2023-05-05T13:37:46","modified_gmt":"2023-05-05T10:37:46","slug":"use-dhtmlx-gantt-chart-with-firebase","status":"publish","type":"post","link":"https:\/\/dhtmlx.com\/blog\/use-dhtmlx-gantt-chart-with-firebase\/","title":{"rendered":"How to Use DHTMLX Gantt Chart with FireBase Platform"},"content":{"rendered":"

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

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

\"firebase-gantt\"
\n<\/p>\n

Firebase adapter for dhtmlxGantt: what for?<\/strong><\/h3>\n

<\/p>\n

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

\"gantt-firebase\"
\n<\/p>\n

How to use<\/strong><\/h3>\n

<\/p>\n

Step 1.<\/strong> First af all, we need to include dhtmlxGantt and Firebase files on the page.<\/p>\n

\nDownload dhtmlxGantt<\/a>
\nDownload Firebase adapter for Gantt<\/a><\/p><\/blockquote>\n

<!--<\/span> dhtmlxGantt --><\/span>
\n<<\/span>script src=<\/span>"..\/source\/dhtmlx_gantt\/sources\/dhtmlxgantt.js"<\/span>><\/<\/span>script><\/span>
\n<<\/span>link rel=<\/span>"stylesheet"<\/span> href=<\/span>"..\/source\/dhtmlx_gantt\/sources\/skins\/dhtmlxgantt_skyblue.css"<\/span>><\/span>
\n
\n<!--<\/span> dhtmlxGantt-<\/span>Firebase adapter --><\/span>
\n<<\/span>script type=<\/span>"text\/javascript"<\/span> src=<\/span>"..\/source\/dhtmlx_gantt_firebase.js"<\/span>><\/<\/span>script><\/span>
\n
\n<!--<\/span> FireBase --><\/span>
\n<<\/span>script src=<\/span>"https:\/\/cdn.firebase.com\/js\/client\/2.2.4\/firebase.js"<\/span>><\/<\/span>script><\/span><\/div><\/div>\n

\nStep 2.<\/strong> The next step is to create html for dhtmlxGantt:<\/p>\n

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

\nStep 3.<\/strong> Now we init dhtmlxGantt:<\/p>\n

gantt.init<\/span>(<\/span>"gantt_here"<\/span>)<\/span>;<\/span><\/div><\/div>\n

\nStep 4.<\/strong> Create firebase connection and set this to the gantt.<\/p>\n

Note: we used our test base. Your need to create your own base on firebase.com<\/a> and use your URL.<\/p><\/blockquote>\n

var<\/span> data =<\/span> new<\/span> Firebase(<\/span>"https:\/\/dhtmlxgantttest.firebaseio.com\/"<\/span>)<\/span>,<\/span>
\ngantt.firebase<\/span>(<\/span>{<\/span>tasks:<\/span> data.child<\/span>(<\/span>"tasks"<\/span>)<\/span>,<\/span> links:<\/span> data.child<\/span>(<\/span>"links"<\/span>)<\/span>}<\/span>)<\/span>;<\/span><\/div><\/div>\n

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

Thanks for reading!<\/p>\n","protected":false},"excerpt":{"rendered":"

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 …<\/p>\n","protected":false},"author":2,"featured_media":3385,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[17,71,1,38],"tags":[33,47,20,14],"class_list":["post-2939","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-posts-for-codeproject-com","category-tutorials","category-uncategorized","category-visible","tag-all-posts","tag-firebase","tag-gantt","tag-tips"],"_links":{"self":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/2939","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/comments?post=2939"}],"version-history":[{"count":2,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/2939\/revisions"}],"predecessor-version":[{"id":8946,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/2939\/revisions\/8946"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/media\/3385"}],"wp:attachment":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/media?parent=2939"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/categories?post=2939"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/tags?post=2939"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}