Quick development of interactive Gantt charts in JavaScript/HTML5

Power-up your online application with cutting-edge visual scheduling

Many software companies and also end users use our Gantt controls in their solutions for visualizing data in form of interactive, visual planing boards, none of which being alike. Our knowledge of user-friendly, intelligent Gantt charts or planning boards is the basis of the new web technology. With little effort our development team creates a JavaScript Gantt widget for you that reflects your individual planning board requirements. The widget is accessed by API, thus controlling look and functionality of the planning board.


No developer control, but also no ready-made Gantt application

Thus you don’t get a „rigid“ Gantt application every modification has to be ordered for specifically,  but a Gantt „framework“ , especially designed for you. Like a control, this Gantt framework can be accessed by various properties and be equipped with individual data, labels, colors etc. according to your wishes. And the good thing is: you can always select which of your options shall „come into action“.  If, for instance, your specification includes the option of showing labels within, beneath, and above the bar you can nevertheless decide that, for starters, texts are only displayed within the bar. 

So what this means is that we are anxious to provide you with a hands-on planning board that can be quickly integrated while at the same time offers you the necessary freedom of design for your own individual controls that you have specified with us.


Demo JavaScript planning board for testing

See below an example of how a web application with our individual JavaScript widget for production could look like.

Different views (of orders, resource allocations, capacity load), linking of orders, dragging tools, flexible timescale and much more help the user to plan, manage and control orders and resources. Watch and test the planning board live.

HTML5 Gantt Widget tailord for production


Connection between Gantt widget and your solution

Controlling by API gives you considerable freedom of design

JavaScript / HTML5 Gantt Widget from NETRONIC


The Gantt widget we develop for you is tailored towards the specific visualization requirements of your business logic. By accessing your objects by API you can modify the settings as you like. That way, you gain an integrated planning board and at the same time design of freedom for your own visualization.


Your benefit

 - The planning board can be easily accessed by API

 - You stay flexible and can make modifications

- -You gain “time-to-market” or “time-to-value”, respectively.

 - You benefit from our decades of experience in designing user-friendly visual planning board.


 Discuss with us the design and functionality of the  HTML5/JavaScript Gantt Chart for your scheduling solution. 

Make your JavaScript Gantt chart intelligent and user-friendly

5 features our customers love to work with

Dynamic Timescale

Our customers normally use a dynamic timescale that automatically (by mouse-wheel interaction) adjusts to the selected solution, so that the planner can zoom in and out seamlessly. The timescale changes in both directions: from years to months, to weeks, to days, to hours, to minutes, and to seconds. The timescale even allows to scroll left and right.

For Developers - HTML5 Gantt Chart - Feature 1.gif
For Developers - HTML5 Gantt Chart - Feature 2.png

Histogram in Gantt chart row

The benefit of a histogram is obvious: Capacity conflicts at a resource or resource group immediately become apparent. Up to now, histograms were usually shown below the diagram. However, some of our customers want to show histograms within a diagram row, thus shaping the link between allocation and availability more directly. More ideas about how to visualize capacity loads you will find in this blog post.

Combine projects to campaigns

Showing links between a project’s tasks is standard of a Gantt chart but our customers sometimes also have to link projects among each other or combine them to campaigns.

For Developers - HTML5 Gantt Chart - Feature 3.png
For Developers - HTML5 Gantt Chart - Feature 4.gif

Built-in animations

Small functions sometimes have great impact. Especially when it comes to expand or collapse bigger groups, users often lose their “visual bearings”. Built-in animations, especially when switching between “showing all nodes in one row” and expanded view, let the user always understand what’s happening on the screen

Visualizing not yet allocated orders 

Some applications require to display more than one Gantt chart. Many customers would like to stack Gantt charts and, e.g., visualize not-yet allocated orders in the upper Gantt and the actual plan in the lower chart. Or they select other forms of visualizing the order backlog as described in this blogpost.

For Developers - HTML5 Gantt Chart - Feature 5.png

Let's Collaborate to Build YOUR HTML5 Gantt Chart

Three steps will lead you to a faster market-readiness of your product combined with a better planning experience for your customers.

 We have shaped the cooperation according to a certain schedule that is based on our experience and ensures obtaining convincing results.

Step 1: Understanding your scheduling process

This is the most important step at the very beginning of a cooperation. We need to understand the business that your application serves, and which data are scheduling revelant in terms of "needed for interactions" and which are needed for information purposes only.

Step 2: Defining the HTML5/ JavaScript Gantt chart application

Typically, there is no "one size fits it all" approach and a Gantt chart no longer is just a Gantt chart. We recommend to think about different views on the same data. Such as a job oriented view, a resource oriented view, a capacity orientied view etc. Of course, each view will support individual scheduling aspects/tasks within your application.

Based on this, we will jointly define "your" API of your customized widget for just your specific scheduling tasks. Usually we will come up with a proposal for the API that will embrace the structure of all required data, the methods, and the events.

Step 3: Collaborative development

Now that the groundwork is done, we'll start developing a first rapid prototype of your custom HTML5/ JavaScript Gantt chart. We aim at providing you with a quick result so that you can significantly contribute to your UI widget taking shape. 

We will collaborate with you in an agile fashion. Transparent and with a lot of feedback loops so that you become a crucial contributor to finetuning your JavaScript UI widget

Happy customers :-)

Nothing more to say. You will see how your customers will love the interactive HTML5 planning board.

Discuss with us the design and functionality of the  HTML5/JavaScript Gantt Chart for your scheduling solution.