{"id":5783,"date":"2018-12-18T17:40:29","date_gmt":"2018-12-18T14:40:29","guid":{"rendered":"https:\/\/dhtmlx.com\/blog\/?p=5783"},"modified":"2023-05-03T14:33:09","modified_gmt":"2023-05-03T11:33:09","slug":"video-tutorial-create-javascript-gantt-chart-node-js","status":"publish","type":"post","link":"https:\/\/dhtmlx.com\/blog\/video-tutorial-create-javascript-gantt-chart-node-js\/","title":{"rendered":"Video Tutorial: How to Create a JavaScript Gantt Chart with Node.js"},"content":{"rendered":"<p>We&#8217;re glad to introduce a video tutorial describing how to initialize dhtmlxGantt with Node.js. In this video, we&#8217;ll show you how to easily:<\/p>\n<ul>\n<li>create a basic <a href=\"https:\/\/dhtmlx.com\/docs\/products\/dhtmlxGantt\/\" rel=\"noopener\" target=\"_blank\">JavaScript Gantt chart<\/a> on the page<\/li>\n<li>connect it to the Node.js backend<\/li>\n<li>populate the Gantt chart with data<\/li>\n<li>and send user changes back to the backend where you can save them to your data storage<\/li>\n<\/ul>\n<p><iframe loading=\"lazy\" width=\"800\" height=\"450\" src=\"https:\/\/www.youtube.com\/embed\/D8YzyzBfyP8\" frameborder=\"0\" allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe><\/p>\n<p>This video doesn&#8217;t show the code that would save the user changes made to Gantt on the backend. However, you can find detailed instructions on how to do that in a complete <a href=\"https:\/\/dhtmlx.com\/blog\/integrating-gantt-with-node-js-using-rest-api-and-mysql\/\" rel=\"noopener\" target=\"_blank\">tutorial on Node.js integration using MySQL<\/a> from our blog.<\/p>\n<p>In order to create a basic Gantt chart on your own, follow these steps:<\/p>\n<ol>\n<li>Download <a href=\"https:\/\/dhtmlx.com\/docs\/products\/dhtmlxGantt\/download.shtml\" rel=\"noopener\" target=\"_blank\">dhtmlxGantt free trial version<\/a><\/li>\n<li>Consult a <a href=\"https:\/\/github.com\/DHTMLX\/gantt-howto-node\" rel=\"noopener\" target=\"_blank\">demo on GitHub<\/a><\/li>\n<li>Get acquianted with the <a href=\"https:\/\/docs.dhtmlx.com\/gantt\/desktop__howtostart_nodejs.html\" rel=\"noopener\" target=\"_blank\">integration guide<\/a> in our documentation<\/li>\n<\/ol>\n<p>Hope it will come in useful for you! If you have any questions, don&#8217;t hesitate to leave them in the comments&#8217; section below.<\/p>\n<p>Stay tuned for the upcoming video tutorials &#8211; Gantt with PHP Laravel is on its way!<\/p>\n<p><strong><a href=\"https:\/\/www.youtube.com\/user\/dhtmlx\/\" rel=\"noopener\" target=\"_blank\">Subscribe to DHTMLX youtube channel to be the first to get the news about DHTMLX video tutorials, release overviews and product updates ><\/a><\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"<p>We&#8217;re glad to introduce a video tutorial describing how to initialize dhtmlxGantt with Node.js. In this video, we&#8217;ll show you how to easily: create a basic JavaScript Gantt chart &#8230;<\/p>\n","protected":false},"author":101012,"featured_media":5893,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[71,1],"tags":[33,20,60,39],"class_list":["post-5783","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","category-uncategorized","tag-all-posts","tag-gantt","tag-integrations-gantt","tag-nodejs"],"_links":{"self":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/5783","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\/101012"}],"replies":[{"embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/comments?post=5783"}],"version-history":[{"count":1,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/5783\/revisions"}],"predecessor-version":[{"id":11345,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/5783\/revisions\/11345"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/media\/5893"}],"wp:attachment":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/media?parent=5783"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/categories?post=5783"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/tags?post=5783"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}