HTML5 Gantt Chart components: in development

Gantt Chart Hyper Library for HTML5 is now ready!

As we have previously announced, we’re currently working to develop a Gantt Chart control library based on HTML5 and its new inline SVG features that are already available within all modern browsers.

Eventually the output JavaScript code could be extended and wrapped into ASP .NET controls for Web application developers (on the .NET platform), and, separately, as Metro style app components relying on WinRT for Windows 8 (and possiblly also Windows Phone 8) developers.

In order to support both these types of usage, and even more scenarios in the future (for example, PHP and other Web developers could use DlhSoft Gantt Chart components for the first time provided that they couldn’t have accepted Silverlight output in their output Web sites), we will enable component themeing with two built-in style sets: Aero and Metro. Moreover, we are going to enable virtually unlimited task shape customizations by allowing developers to inject JavaScript code that defines how task bars are presented, just as the WPF version does with bar templating. All these are going to be supported besides the basic set of features collected from our previously available Gantt Chart and Schedule Chart controls for .NET and related technologies.


var items = [
{ content: “Task 1”, isExpanded: false }, […]
{ content: Task 2”, isExpanded: true },
{ content: Task 2.1”, indentation: 1,
start: new Date(2012, 5, 2, 8, 0, 0),
finish: new Date(2012, 5, 3, 16, 0, 0),
completedFinish: new Date(2012, 5, 3, 16, 0, 0),
assignmentsContent: Resource 1, Resource 2 [50%]” },
{ content: Task 2.2”, indentation: 1 },
{ content: Task 2.2.1”, indentation: 2,
start: new Date(2012, 5, 3, 8, 0, 0),
finish: new Date(2012, 5, 5, 16, 0, 0),
assignmentsContent: Resource 2” },
{ content: Task 2.2.2”, indentation: 2,
start: new Date(2012, 5, 4, 12, 0, 0),
finish: new Date(2012, 5, 6, 12, 0, 0),
completedFinish: new Date(2012, 5, 5, 12, 0, 0) },
{ content: Milestone 2.A”, indentation: 1,
start: new Date(2012, 5, 6, 16, 0, 0), isMilestone: true }];
var ganttChartView = document.querySelector(“#ganttChartView”);
DlhSoft.Controls.GanttChartView.initialize(ganttChartView, items);

What do you think? Would you expect to need such controls in the short or long future? Do you have any suggestions at this early development stages for our team? We’ll be glad to add your feedback to the internally managed requirement list of the product, either for the first version or for a future one. Of course, it’s a lot better to get your ideas earlier rather than later, as it’s always easier to alter the software design, if needed, in the initial phases of a project, rather than after its first version release. Thank you very much in advance!


About DlhSoft Team

DlhSoft is a software development company focused on building high quality and innovative solutions using state-of-the-art technologies for customers worldwide. Our activity includes designing and developing general purpose software applications, components and tools, and customized software solutions upon request. DlhSoft team is highly experienced and fully dedicated to software development. Additionally, one of the most important things we rely on is the continuous communication with the customer.
This entry was posted in Development Components and tagged , , , , . Bookmark the permalink.

11 Responses to HTML5 Gantt Chart components: in development

  1. I like what you guys are up also. Such intelligent work and reporting! Keep up the superb works guys I¡¦ve incorporated you guys to my blogroll. I think it will improve the value of my website related with empresa diseño web 🙂

  2. Francisco Imperio says:

    I am very interested in this. Do you have a notion on when your HTML5 gantt chart components will be ready?

    • DlhSoft Team says:

      Hello and thank you for your interest! We are tying to package a beta version to be released to the public in June 2012. The final release date is not well known yet, as it would highly depend on the feedback received during the beta. To receive a notification when the Beta release is available, don’t hesitate to subscribe to our News Feed (although we’ll also post a note in our team blog).

  3. has04 says:


    Will this component be an editable Gantt?
    Will this component work with J2EE or just .net?
    Will the component give control to modify the gantt and effectively the structure which is represented in this Gantt.

    • DlhSoft Team says:

      Both GanttChartView (project hierarchy) and ScheduleChartView (resource based Gantt chart) support in place editing of the data, and allow injecting code to handle changes. Therefore, you are able to wire up procedures to submit changes back to a server, when the data (Gantt Chart items) are generated this way and changes need to be preserved.

      At runtime, both the end user and the developer (using custom code) can trigger changes in the Gantt Chart structures. (In the second case, the developer just needs to call refresh (or refreshItem) methods after item properties have changed in order to trigger updating the UI.)

      Note that the HTML5 components are already available on the client side (i.e. browser), in release form. They dot not need J2EE nor .NET, as they are pure JavaScript API-based. They can be used in all Web sites and applications, created with ASP .NET, PHP, etc. Product link:

      Note that we are currently in the process of developing a set of ASP .NET wrapper components, for those who want to use the HTML5 components directly in ASP .NET Web sites (without the need for client-server integration). Currently we do not have plans to develop similar products (such as the ASP .NET tool) for non-.NET platforms, but this might also change in the future, depending on the number of customers who might ask. The ASP .NET product link will be (to be available soon):

  4. I bought this component and when a try to access my html page via http with IE9 the follow error pops up:
    “Object does not support property or method ‘querySelector'”

    And when I right click the html and open with IE9:
    “Internet Explorer blocks the execution of scripts and activeX controls for this page”
    With a button “Allow blocked content”

    With Chrome works fine and the error still appear even when I down the security in my browser.
    What this could be?

    • DlhSoft Team says:

      First of all, in order to receive help faster, you may submit support requests at This is just a “team’s blog” which means answering comments here has lower priority than offering support on the standard channel. Thank you for understanding.

      Internet Explorer 9 does support HTML5’s querySelector when running Web sites in standard mode). Check this for a querySelector supporting browser list:

      However, Internet Explorer doesn’t support HTML5 new features when using Compatibility View. To unselect compatibility view for the Web page that you are viewing use the browser’s menu / Tools / Compatibility View checkbox. We have tested and it works with Internet Explorer 9 on Windows 7.

      ActiveX controls are not required by our component. Please make sure that you are not referencing other, external components in your Web pages that would trigger the ActiveX warning.

      In general, our HTML5 components should work fine in all modern browsers that support inline SVG features, using standards mode, and using the default security, without any errors or warnings. You can check here the status for the current and future browser support of inline SVG features:

      • Hi, tanks for the answer. Im posted my problem here because the support doesn help to fix it. Your segestion works but I have to put the code before html. Its fine.


      • DlhSoft Team says:

        The comment we have posted as a reply to your question is virtually the same as the message sent to you on e-mail by the Support Team before. It was sent as a reply to your original e-mail (usually the answers are received in less than 24 hours, in your case it was after about 12 hours). If you haven’t received the e-mail, please check your Junk mail folder too, and/or set as a safe address to make sure future e-mail messages don’t get filtered in the future.

  5. adil says:

    How would I go about setting a select tag inside content? :
    By default it shows title content “New Task”. But I want to display a dropdownlist, such as, “choose a tiitle?”

    • DlhSoft Team says:

      You may update the column’s cellTemplate and inject JavaScript that would actually return the element tree you wish for the content.

      Alternatively, when you want to add a new task item, ask the end user for the task name (and maybe other fields) using a dialog, and set the values accordingly on item before you add it to ganttChartView.items collection – then when it is displayed it will have the title and fields the end user specified.

Add a reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s