No need to spend much words on stating the obvious: the way of how enterprise software applications are built is changing quickly, and HTML5/ JavaScript have become state-of-art in a cloud- and mobile-driven world. For us as company with decades of experience and tradition in developing Java, ActiveX and .NET Gantt chart controls, this market disruption created a bit of a challenge. However, changes bring always chances and hence we took the challenge … and re-invented our way of building interactive Gantt chart. The purpose of this blog post is to share with you where we are with providing you with HTML5 Gantt chart capabilities. I also want to highlight how you can benefit from our new HTML5 Gantt visualization technology – independent if you are software developer looking for a control or an end user looking for a visual scheduling application.

The Framework for HMTL5 Gantt charts

For almost three years we have been engaged in developing HTML5 Gantt charts. In the initial, but extensive first phase we started with exploring all the available technical options for realizing such charts by using HTML5, JavaScript and CSS. We spent a considerable part of our time in order to find out the best way for building high-performance charts that the user loves to work with. We evaluated the capabilities of the various HTML elements, which initially seemed to be suitable to realize the graphic parts of a Gantt chart. As such, we built prototype Gantt charts based on

• the canvas element
• the div element, and
• the SVG element.

Contrary to our conventional strategy and go-to-market approach, we decided not to start with building a software control (like VARCHART XGantt or VARCHART JGantt), but to realize a ready-to-use application. The reason for that decision is quite obvious: Developing a component (with all its high requirements regarding API and documentation) is way more time-consuming than creating a ready-to-use application. In addition to this, with an application it is easier to quickly obtain the crucial end users’ feedback. The result of that approach was our Visual Production Scheduler JavaScript Add-in for Microsoft Dynamics NAV.

While developing this first product we discovered that we had achieved a lot of valuable experience and many great concepts realized by a respectable number of lines of code. To be able to benefit in the future from all these things we restructured our code and redesigned the architecture:

Our NETRONIC Web Application Framework – nWAF for short – was born. With this Framework, we are now in a position of being able to very effectively develop interactive HTML5 Gantt charts.

nWAF in a nutshell

Let me start with some internal details. As mentioned above, nWAF is not a developer control with its own API and a documentation of 1,000+ pages that we hand over to our customers for developing their applications. Instead, it is a framework used by us to develop HTML5-based graphical planning boards for our customers. These customers can be other software developers as well as end users. In both cases, the nWAF takes up all graphical functionalities being needed for HTML5 Gantt charts within a web application.

As you can see in the figure below, nWAF is based on jQuery and jQuery UI and it is using D3.js, a JavaScript library for manipulating documents based on data.

There are two main parts:

• Gantt Library – It contains all the functionality that is needed for creating the Gantt chart. Within this library, we provide modules like a Gantt widget, a timescale widget, a module for calculating calendar data, a module for mapping dates to screen coordinates and vice versa (called time axis) and so on.
• App Tools – The App Tools cover all things not directly related to the Gantt chart, but nevertheless needed building a meaningful graphical planning board. The tooltip widget and the splitter widget are good samples for the App Tool’s content.

Within this framework, the Gantt Widget obviously is the central component and of course it is well integrated with the other components to unleash its full value.

Developers’ pride: “eating the own dog food”

Although, we started with HTML5/ JavaScript with building the JavaScript version of the Visual Production Scheduler add-in for Dynamics NAV, the resulting NETRONIC Web Application Framework soon started playing a broader role. We do not just use it to build tailor-made solutions for bespoke customers, but we also put it into the heart of another NETRONIC product: we started developing a Microsoft Azure-based SaaS (software as a service) product, with which we will address small and mid-sized job shops and make-to-order manufacturers which are kind of too small to have a state-of-the-art ERP system. This new product currently is in “private beta” (open for selected early customers) and is called just plan it.

So, from a developers’ standpoint: we are proud of the tools we build and hence happily “eat our own dog food”.

As such, we already have concrete plans what to build next based on the nWAF: it will be a JavaScript version of our Visual Job Scheduler Add-in for Dynamics NAV. And as with the Visual Production Scheduler JavaScript Add-in, it will allow customers to use the Visual Jobs Scheduler in any Dynamics NAV client, that is, in the classic Windows Client, in the Web Client, and in the Tablet Client as well.

You may sense it: we believe that with the nWAF we can deliver an unprecedented visual scheduling experiences independent of the platform or the environment. As such, it will be delight building further products with it and basing further custom developments on it. And with any new development project, we will for sure add new functionality to the nWAF so that all other related products and apps will benefit from it.

Our options for you

Did you recognize it? With the nWAF, we are confident being able to help you out independent if you are a software developer or an end user looking for Gantt functionality in your HTML5 application. Here is how:

We decided not to sell nWAF as on own developer component like our conventional software controls. Instead, we are offering a very interesting cooperation model in which we want you to benefit from our 30+ years’ experience in developing interactive Gantt charts. With this approach, we jointly develop the nWAF based Gantt User Interface (GUI) for your application. The implementation of the business logic and the integration of the GUI into your existing software environment will remain in your responsibility.

2) You are a production planner or project manager looking for a tailor-made scheduling solution as addition to your current ERP system.

This case is similar to case 1. Hence, see my remarks above. The only difference is that will also implement the data connection of the new application to your existing environment. 

Good news: we will need no tailor-made development. All (or most) of what you might require is available “out-of-the-box”. Just visit just plan it and learn more. It is based on the nWAF described here, plus a scheduling engine on server side.

For you, our Visual Production Scheduler JavaScript Add-in is the tool of your choice. It allows you to work with a powerful interactive diagram instead of struggling through all the lists of production data. You will simply get a better overview of your data.

Next steps

As said: with our nWAF, we develop for you high-performance, platform-independent graphical planning boards based on HTML5 and JavaScript. You can then embed these web-based planning boards in your application - with access to the application's source code. We can also develop for you the complete planning application and host it either at your servers or in the cloud for you. But have a look for yourself: Test our sample application here and now. Four views let you comfortably see and edit your data in the browser .

• Production Orders (Production Orders View)
• Capacities (Capacities View)
• Loads (Loads View)
• Combination of all three views (Splitted View)