A New Way Building An Interactive HTML5 Gantt Chart

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

What. The NETRONIC Web Application Framework (NWAF) is a new approach to building interactive HTML5 Gantt diagrams and JavaScript scheduler. It is a framework with which we and you collaborately and efficiently develop platform-independent graphical planning boards as JavaScript UI widgets for your applications. 

Why. We have been building Gantt chart controls for almost 30 years. Experience has shown

  1. State-of-the-art applications are platform-agnostic, and can be used anytime and anywhere.
  2. Many customers don't have enough time to take a real deep-dive into a specialized developer control.
  3. Nevertheless, they need visual planning boards, especially for production scheduling purposes.

What else. With NWAF you achieve your Gantt development targets faster. With a better visual scheduling experience for your users.

HTML5 Gantt Charts Animated - Mission Statement.gif


HTML5 Gantt Chart Demo

See and test our visual production scheduling sample application 


For Developers - HTML5 Gantt Chart - Banner.pngHave a look for yourself: Test our JavaScript scheduler sample application, in this case reflecting production planning and scheduling. Four views let you comfortably see and edit your data in the browser:

  • Production orders (Production Order View)
  • Capacities (Capacity View)
  • Loads (Load View)
  • Combination of all three view (Split View)

Even more: we give you the option to test the sample application with your data.


Advanced HTML5/ JavaScript Gantt Chart Features

5 features to empower your visual scheduling application

Dynamic Timescale

Every Gantt chart consists (at least) of a table part, the graphical part and the timescale. The NETRONIC Web Application Framework comes with a dynamic timescale which automatically adapts (by mousewheel interactions) to the resolution you selected. By this, you can seamlessly zoom in and out, and the timescale changes from years to months, to weeks, to days, to hours, to minutes and to seconds ... in both directions. You can even use the timescale 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

A state-of-the-art Gantt chart allows you to show a histogram, which is a load curve for one or more resources. The value of a histogram is obvious: it lets you see at one glance if you have a capacity conflict at a resource or at a resource group. Conventionally, these histograms had been displayed at the bottom of a Gantt chart. With our NWAF, we enable you dynamically showing a histogram within a row of the Gantt chart so that you can assess the resource's availability right where you move the respective bar.


Aggregation of jobs to campaigns

Typically, a Gantt chart knows jobs, which are broken down into tasks. These tasks usually are linked with each other, and sometimes also jobs are linked. In addition to linking multiple jobs, and in addition to grouping jobs (e.g. released, material pending, planned), with NWAF you also can associate multiple jobs with one campaign or project. This helps you better summarizing your data.


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

Built-in animations

Sometimes, tiny functions make a huge difference. A HTML5 Gantt is a very visual way of dealing with your time- and resource-oriented planning data. Especially, when expanding and collapsing larger groups, users can loose their "visual orientation" on the screen. With built-in animations - especially when switching from a "all nodes in one row" view to an expanded view - the NWAF makes sure that your users always can follow what is happening on the screen.


Multiple, stacked Gantt charts 

For some applications, showing just one Gantt chart is not enough. Users want to stack Gantt charts and see e.g. unassigned orders in the upper chart and the de facto schedule in the lower chart. Or they want to combine a project Gantt chart with a resource Gantt chart. With NWAF, you can stack multiple Gantt charts on top of each other - and they will all scroll synchronously in horizontal direction.


For Developers - HTML5 Gantt Chart - Feature 5.png

Let's Collaborate to Build YOUR HTML5 Gantt Chart

Three steps to make your customers happy: We are ready to help you achieve a faster time-to-market with getting more visual scheduling power

We know that a collaborative framework is different than just buying a control and using it. By the way: we know this very well as we have been developing Gantt chart controls for almost 30 years. However, together with our clients, we have been experiencing a new (and better!) way of building interactive Gantt charts with the NWAF. We compiled these experiences into a collaboration process making sure that you will achieve great results fast.

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.


An offer for Microsoft Dynamics 365 Business Central ISVs

Get your JavaScript scheduler without the need to learn JavaScript!

This goes to all D365 Business Central (or NAV) ISVs who build vertical solutions: We actually use our NWAF as basis for a compelling offer:

  1. We have the NWAF not only "B2B-ready", but also "Microsoft Dynamics-ready" so that it can get easily integrated into any vertical solution built either on Dynamics 365 Business Central or Dynamics NAV. 
  2. This means in essence: we have this framework accessible through, addressable via and configurable with an API that Business Central and NAV developers can work with.
  3. Last but not least, we design this API in a way that C/AL developers can use C/AL when embedding this framework into their applications, and that AL developers can do the same with AL.

Actually, we put together an extensive guide for these ISVs developing a Gantt chart scheduler for Microsoft Dynamics 365 Business Central and Dynamics NAV.