We are proud to share a new show case of dhtmlxScheduler. Read about the project that was successfully implemented by WebAuthor team.

Initial Request

In August 2016, we had a request to create an interface to be used by a government agency for appointment scheduling. It required that appointments could be scheduled across several different offices and many different representatives. Representatives needed to be able to create their availability by blocking off time when they were not available during a Monday to Friday, 8:30 to 5:30pm schedule.

Operators could then set appointments for callers by accessing the calendar and searching by office, representative or simply first available appointment.

Implementation

We are using several views of the DHTMLX Scheduler for this implementation.

1. Representatives can see their own appointments in a day, week, month or agenda view. They can block off time and manage appointments. They also have the ability to “check in” their clients and flag the appointment status as Arrived, Late, No Show, Completed, etc. (This is used for reporting purposes)
2. Phone Operators load the scheduler for all offices/reps or they can filter by office and or rep. They search for available appointment slots and create the appointments. We created a new view type “ELC Reps” to be able to show a column for each Office/Rep combination in the Day view

Additional Notes

A good amount of customization was required for this implementation. We found that the flexibility inherent in this product along with the incredibly responsive and helpful support team was key in successfully delivering what was requested.

Our Recommendations to Other Developers

DHTMLX Scheduler is powerful and it is flexible beyond what you would think. The documentation is very helpful and the comments section on each page gives many insights into this flexibility. It allows you to see what other developers have achieved and to learn additional “tricks” to push the platform even farther. Most of our questions were answered by reading through these sections. On the rare occasion that we were unable to find a solution in the docs or the comments, we posted our own questions to these sections which were promptly answered with details and examples. This enabled us to create a truly custom solution for our client.

We are very grateful to WebAuthor team for providing us their great experience and pleasant feedback.

Do you want to share your success story? Send us an email to discuss the details.

The post Customer Spotlight: dhtmlxScheduler Integration by WebAuthor appeared first on DHTMLX Blog.

dhtmlxScheduler is one of most flexible components available, but yet when you check the basic examples of dhtmlxScheduler, they can look pretty far from a final look and feel that you need to implement. And a usual challenge for developers that are new to dhtmlxScheduler is how do I get from this:

to this:

At this point familiarizing with the API and figuring the appropriate approach can take unnecessarily long.

In this tutorial, we want to show you some frequently used settings in order to speed up this process. We’ll start from a plain timeline config and will show how to make it into something more complex, like our hotel reservation demo.

When you understand how our Scheduler component works, it’ll be much simpler for you to develop any functionality you want. As a result of this tutorial, you will learn how to work with the Scheduler’s timeline and be able to configure it based on your needs.

Now, let’s define which features we will implement during the tutorial:

1. Filtering allows visualizing the rooms according to particular criteria
2. Timescale should be changed to show a full month
3. Lefthand labels, step one. We’ll add a header above the lefthand column
4. Lefthand labels, step two. We’ll add the possibility to display multiple columns with a custom HTML content and colors
5. The default appearance of the event boxes will be changed
6. We’ll add custom tooltips
7. We’ll add the highlight for the days off

As we successfully defined what should be done, we can proceed with the code writing.

Step 0 – Prerequisites

We’re starting with the plain timeline view, like the one you can find in our package:

Before proceeding with the coding, we’re do some preparations.

Firstly we add test data – we need lists of bookings, rooms, room types, booking statuses (confirmed, arrived, etc.) and room statuses (ready, clean up, dirty). In this tutorial we’ll load all of this in a single json document formatted like this.

All arrays from the “collections” part of json can be accessed using scheduler.serverList method by their respective name.

If the list objects have the expected structure (`key` and `value` properties), they can be connected to the timeline/units views or to the lightbox select controls directly. Moreover, if you reload data or update these collections from code, the views and controls connected to the appropriate collections will be repainted automatically in order to reflect the changes.

Thus, the data models may look as following:

booking:

room:

booking status:

room status:

room type:

And here is how a complete JSON will look like. After we connect list of rooms to the timeline view, we’ll be able to see the following calendar and drag bookings between rooms:

Another small thing we can do is to set the default values, such as booking status, paid status or a default text. It is usually done via onEventCreated event:

Check the code.

And now let’s go through the list of features we made.

Step 1 – Filtering timeline rows (rooms)

As we’ve found out at the previous step, we have a list of rooms which are displayed as rows of the timeline, and room types which are associated with the rooms:

What we want here is to filter timeline rows by the room type, e.g. ‘show two bed rooms only’.

How it’s usually done – scheduler allows dynamically replacing timeline rows with a new collection using
scheduler.serverList/updateCollection.

Knowing this, the task is pretty simple.

1) We connect the timeline to the empty serverList:

2) Then we define a function that filters a complete list of rooms, select ones that pass the filter and put them into “visibleRooms” list, updating the timeline:

3) Once data is loaded, we can run the filters in order to populate the timeline initially:

Here is how everything looks at this point.

Finally, let’s add a dropdown for a user to change the filter.
We can put it on the place of .dhx_cal_tab elements in the scheduler header:

And that’s how we implement the filtering:

Step 2 – Displaying a full month in the time scale

As per requirements, we need a two line time scale – one day per cell of the time scale, and the month line on top of days. Also, the timeline should show a complete month.

The time unit and number of columns of the timeline view are defined by x_size/x_step/x_date properties of configuration object. It’s also allows adding a second row to the time scale.

So, intuitively we can get a config like this:

And get a timeline looking like this:

You may see a problem here – the timeline must always start from the first day of the month, and a number of columns should match a number of days per month, which may vary.

How we solve this? We can access the instance of the timeline view from code and modify the number of days per view according to the displayed month. We can do it each time the displayed date is changed using onBeforeViewChange event.

Then we need to make sure that timeline starts from the first day of the month, this can be done using scheduler.date[timelineName + “_start”] method. This method is defined by the timeline instance and controls the starting point of the time scale:

We use a ‘month_start’ method of scheduler date helper, which does exactly what we need.

Finally, we need to make sure that the timeline is scrolled for exactly one month when user clicks forward/backward navigation in the scheduler head. We do it by redefining scheduler.date.add_timeline method. This is also a generic scheduler.date[“add_” + viewName] method that is defined for the each view:

Note that the scheduler.date methods of the timeline should be declared after scheduler.createTimelineView call, otherwise the timeline will overwrite them.

And now you should have a correct month scale:

Step 3 – Adding a header to the lefthand column of the timeline

Now we need to add a header here:

Unfortunately, the scheduler does not provide a built-in method or a template that would add a required markup where we need it.

So, the only available solution would be to create a header element manually and put it over the lefthand column of the timeline using absolute position.

Note that all sizes of this header element we can take from the configuration of scheduler.

So, we’ll create this element dynamically using scheduler config values, rather than hardcoding them, so the element will be displayed correctly even if you change some settings of the calendar.

The code may look as following:

And css:

Step 4 – Adding multiple columns to the left part of the timeline

Scheduler always creates a single column before the time scale of the timeline, and as of the current version, there is no way to tell it otherwise.

The good news are, we have a complete control over the contents of that column via template function. Thus, we can put any html into that column, including extra cells.

In short, the code may look like following:

Step 5 – Changing the color and the inner contents of the event boxes

There are three settings that define look of an event in the timeline view:

1) the height of the event box is defined by event_dy property of the Timeline config.

2) css class applied to the event box

3) and the inner html of the event box

We’ll need all of them.

Firstly, let’s make events occupy the whole height of the timeline row:

Now let’s color events based on their status.

For that we’ll need css rules for each status, for this tutorial we’ll simply hardcode them:

And assign these classes to the appropriate events:

And the coloring should be done:

The template is called each time the event is repainted. So, if a user changes event status from the UI, a new color will be immediately applied.

And now we move to the inner content of events. As you remember, our aim is something like this:

Here is how it can be implemented:

And css:

Step 6 – Tooltips

Tooltips are defined in the extension file which has to be added to the page after dhtmlxscheduler.js.

After that we can define a tooltip content using tooltip_text template.

Note that we reused helper functions we’ve declared for event text and header templates, all these templates are supposed to be declared in the same scope.

And here is how the result looks like:

There are couple of things to consider regarding tooltips.

Tooltip template can be called very frequently. It’s preferable not to make the tooltip_text function too heavy. If the tooltip should show a result of some relatively complex calculations, it’s better to precalculate values and save them into some property of the event object, rather than calculating them each time from the tooltip template.

Find out the related docs here and here.

The template function does not support async/promise result and you can’t use synchronous requests there (technically one could, but that would hit client-side performance and usability hard).

Thus, if you need to load tooltip content from the backend, simply requesting the data from a tooltip wouldn’t be enough.

This is usually solved by loading the tooltip content into some property of an event via ajax and returning this property value from the tooltip template. If the property value is not loaded from the server yet, you can display some kind of placeholder. Here is a jsfiddle where we emulate ajax loading with timeouts, but the idea is the same.

Step 7 – Highlight weekends

It’s also done with the help of the extension which allows coloring time ranges from code.

One important thing – if you use the dhtmlxsheduler_limit.js extension together with the timeline, it should be added before the dhtmlxscheduler_timeline.js:

After you add the extension you can color days like this:

Here is the result:

A more complex use-case would involve loading areas you want to highlight from the backend.

Usually it’s done from onBeforeViewChange event. You can detect when the displayed date is changed and start loading markers for the displayed range.

Once they loaded – you can add them using scheduler.addMarkedTimespan and repaint scheduler to display them:

Step 8 – Configuring the lightbox

What we need from the details form:

• a text input with booking details
• a dropdown for selecting a room
• a control for selecting booking state
• a checkbox for marking booking as paid
• and a date picker for booking dates

For this we’ll need to add extensions where these controls are defined:

And update the settings of the lightbox:

Note that no lightbox controls have a config for the default value – that’s intentional. Lightbox controls are configured to read the value from specific properties of the event object.

That means that instead of setting a default value for the lightbox control, you should set default property values of the scheduler event object itself. It’s done like we did in the step 0, the lightbox will reflect them once opened.

Also, add a following config for labels of lightbox controls:

After that you’ll get the lightbox looking like this:

As you can notice, the description at the top-left container of the lightbox is now not quite useful for us:

We can redefine this content. Check the docs.

Step 9 – Preventing double bookings for the same time

To avoid double bookings, we’ll use this extension.

Once you add it to the page, it will revert actions that put several events to the same time.
You can also control this behavior by capturing https://docs.dhtmlx.com/scheduler/api__scheduler_oneventcollision_event.html event either to conditinally allow double bookings, or simply show a user some warning

Conclusions

Overcoming the learning curve of dhtmlxScheduler, you’ll see that it’s possible to build on new features and change look and behavior of the component pretty simple. We hope that this tutorial gave you clear understanding how the Timeline of dhtmlxScheduler behaves and helped you in achieving your own goals when building your applications.

If you’re already familiar with our tutorials, you may notice that this time we used jsfiddle to provide you more detailed and informative description of each step. Do you find it useful?

Also, if you have any thoughts and ideas what are the next topics/tutorials you would like to discover, don’t hesitate to share them in comments. We are open for suggestions.

The post How to Make Hotel Booking Calendar with dhtmlxScheduler appeared first on DHTMLX Blog.

Great news for users (and future users) of Export from dhtmlxGantt to MS Project. Now you have the ability to export resources along with the tasks and links.

While dhtmlxGantt doesn’t have a built-in resource management capability which you can find in larger solutions, you still can attach additional info to the tasks and manage workers, workload, etc. from your code. Check the example. With this update, you can export these values as resources and resource assignments of Project and vice-versa.

Here is a sample where you can export the gantt chart with resources.

After that, you can import the received file to MS Project to allocate and manage the resources:

You can find more information in our docs.

If you have any comments or feature requests, don’t hesitate to share them in the comments section below.

The post Export from dhtmlxGantt to MS Project Updated appeared first on DHTMLX Blog.

Our ASP.NET event/booking calendar celebrates its 6th Anniversary! Join the celebration and take the advantage of time-limited special offers that allow you to get 15%, 20% and 25% discount. Check all the terms here.

DHTMLX Scheduler .NET is a web control with rich scheduling capabilities, easy customization and configuration. With the help of Scheduler.NET, you can build interactive booking, rental and scheduling apps. Explore the demos.

What’s the difference between DHTMLX Scheduler .NET and the JavaScript dhtmlxScheduler?

DHTMLX Scheduler .Net is a server-side wrapper for dhtmlxScheduler, it

• simplifies data binding and allows using .Net code to configure the calendar
• allows initializing the component with the server-side code
• provides some helpers for loading and saving operations

Find out more information here.

The post Celebrate Scheduler.NET Anniversary With Us and Get Discounts! appeared first on DHTMLX Blog.

DHTMLX Diagram library makes a big step forward and receives a major update: the version 2.0 is out. Now, when using dhtmlxDiagram, you can build different types of diagrams and graphs! Besides, there are plenty of useful updates and improvements. Let’s review all of them.

Build different types of diagrams

The versions 1.x allow you to build and edit interactive organization charts. Now it’s time to expand the line of supported diagram types. Starting from the version 2.0, you can create such kind of diagrams like flowcharts, block, tree, decision, activity, network diagrams and so on.

For your use, we introduce a great variety of shapes and connectors which will help you to build detailed and expanded flowcharts. Check the docs.

By default, the shapes/nodes are elegant grey. We decided not to overload the diagrams by choosing specific colors, so that you could paint them the colors you need based on your specific design requirements.

We’ll add the diagram editor soon so you could manage the shapes, colors and structure faster and simpler. The release of dhtmlxDiagram 2.1 is planned on April, 2018.

Performance and API updates

Within this update, we’ve made great improvements to Diagram’s performance so the component renders 2 times faster now! What is more, dhtmlxDiagram has new API which is clearer and provides more flexibility.

Starting from the version 2.0, dhtmlxDiagram is adaptive, so you don’t need any special JavaScript code to handle auto-sizing, the component adjusts itself to any HTML container.

Export to PDF and PNG

Another important new feature is the ability to export your diagram to PDF and PNG formats. Check the sample.

By default, you’ll be able to use our online export service for free. Also, you can install the export service locally using the docker image. As the time-limited offer, this option will be available with the purchase of Enterprise license till the next update of dhtmlxDiagram. Buy now

Adding toolbar to diagram nodes

And last but not least: more interactivity is added. dhtmlxDiagram 2.0 allows you to add custom toolbar to the diagram nodes to perform some particular action. Check this example.

Related resources:

• Try dhtmlxDiagram 2.0
• For the licenses customers: go to the Clients Area to get the latest version
• Check the updated documentation with full what’s new list
• Browse new samples

We’ll be happy to get your feedback and opinion on dhtmlxDiagram in general. Use the comments section below or feel free to contact us via email.

Stay tuned for future updates!

The post Meet Major Update of dhtmlxDiagram – Version 2.0 is Here appeared first on DHTMLX Blog.

We are proud to introduce our new release of dhtmlxGantt: the version 5.1. It brings you such long-awaited features as resource planning and ability to use right-to-left mode. Continue reading to learn everything about the update.

Download dhtmlxGantt 5.1, JavaScript Gantt chart library

Resource management

The possibility of resource management is quite critical for many projects because it helps to estimate not only a total load of a project, but its parts and load of each resource separately. When we talk about resources, we mean people, equipment, money, etc. In project management and gantt chart software in particular, the resources are mostly considered to be human resources, that’s why we’ve prepared some suitable examples for this case.

View the sample

So, the resource management in dhtmlxGantt allows you to assign resources and apply particular styles to the tasks according to the resources assigned. What is more, human resources can have their own working schedules, so when you re-assign some task to another person, the duration of the task and the whole project will be adjusted to another working schedule. View the sample

As the gantt chart resource diagrams clearly demonstrate the total load of people and projects, it’ll be simple for the end users of you app to balance the resources load and manage the projects more efficiently. Using resources diagram in dhtmlxGantt, you can show such information as completeness, workload, capacity for each resource.

Note that the resources management in dhtmlxGantt is available in Professional Edition only.

For now, you can assign one resource per one task. We’re planning to add the ability to split the task between multiple resources in future updates, so stay tuned.

RTL mode

Starting from the version 5.1, dhtmlxGantt can be displayed in the right-to-left mode. All the elements of the gantt chart including a time scale, grid columns, tasks and dates can now start from the right part of the page and continue to the left.

View the sample

Public destructors for Gantt chart and dataProcessor instances

The previous versions of dhtmlxGantt didn’t have a destructor method since usually the Gantt instance lives the whole lifetime of the page where it’s displayed.

It’s not a problem by itself, but when we’re using dhtmlxGantt together with modern frameworks like Angular or React, we have to remember about it since the gantt instance couldn’t be destroyed together with its parent component.

Thus, this is a small feature that will allow you to use dhtmlxGantt together with modular frameworks in a more intuitive way. Find out more in our documentation.

Various improvements to the layout configuration introduced in 5.0

In dhtmlxGantt 5.1, we’ve added many new options and removed some redundancy in the layout config, so your configuration code will be simpler and more powerful at the same time.

One of most noticeable update is the ability to have an inner horizontal scroll in a lefthand grid. It allows you to place as many columns as you need.

View the sample

Ability to drag-n-drop projects together with their subtasks

The last new thing for today: you can now move projects together with their subtasks in the timeline. The option is disabled by default, you can enable it in the config. View the sample

NPM installation for dhtmlxGantt Professional Edition

You often ask about the ability to install the PRO edition via npm. While we still don’t provide a private npm feeds for PRO versions of the component, the package now includes package.json file which allows installing it as a npm module locally. Read some useful information about all possible ways of npm installing dhtmlxGantt PRO here.

Related resources:

• Try new dhtmlxGantt 5.1
• Login to the Clients Area to get the latest PRO edition
• Check full what’s new list in the docs
• Browse new samples of using the resources
• Check dhtmlxGantt roadmap for future updates

We hope you enjoy the update! Let us know about your opinion in the comments section below.

The post dhtmlxGantt 5.1: Resource Management, RTL Mode and More appeared first on DHTMLX Blog.

dhtmlxGantt is enhanced to version 5.1.2. We’re glad to invite you to check what was fixed and update to the most stable version!

Here is the list of fixes:

• (fixed) errors with show_chart/show_grid configs
• (fixed) issues with hiding chart or grid dynamically
• (fixed) multiple issues with keyboard navigation extension
• (fixed) repainting tasks and links after id change
• (fixed) gantt not firing onGridResize events in complex layouts or when the horizontal scroll is enabled

Although the list of fixes is not very large, we highly recommend using the latest version to make your work with the component even more efficient.

If you’re our PRO user, you can download the updated version 5.1.2 in your cabinet. We’ll also send you an email notification at short notice.

If you haven’t used dhtmlxGantt PRO yet, you’re welcome to download 30-days free trial.

The post Maintenance Release: dhtmlxGantt 5.1.2 is Out! [PRO] appeared first on DHTMLX Blog.

It’s such a great pleasure to find out that our products meet the needs of clients from all over the world. Our Italian colleagues from KeyWorks OS, who provide solutions for the Italian public administration, shared with us their successful story of dhtmlxGantt integration into their platform.

About KeyWorks OS (Sistematica S.p.A. – Italy)

KeyWorks OS is a Cloud multi-tenant platform with a BPMN 2.0 workflow engine for managing processes, activities, documents and much more, able to solve a large number of use cases for companies and organizations of any kind. In the context of the Italian public administration, it manages the Protocollo Informatico, digital signature (usb token, smart card and remote signature), certified e-mail (PEC) and Conservazione Sostitutiva.

The administrator can define, with the visual designer, multiple workflow definition that can be initiated by users. The execution of the workflow will produce a series of activities to do for users of the departments.

That activities are available can be accessed through many kind of visualization like gantts, charts, grids, timelines and maps.

The Challenge

The challenge of the project was to create a simple way to manage the activities produced by different kind of workflow in many instances using in a single graphical representation with the ability to modify and complete the workflow activities directly using the dhtmlxGantt.

I must say that the final result is really beautiful and effective.

Why dhtmlxGantt

Our technical team has had the opportunity to try all the features of dhtmlxGantt through many tutorials available online on the dhtmlx site, analyzing every single piece of code necessary for each tutorial.

After, our team had the opportunity to download the trial version of dhtmlxGantt and performed a first experimental integration in our very complex KeyWork OS platform based on Dojo Toolkit Framework and in less than a day we managed to have our first Gantt prototype directly in KeyWorks OS without any technical compromise and without external libraries.

It was enough to add the CSS for the theme, the main JavaScript, some optional extensions, and we also added the extension that allows you to export in different formats including Excel, MS Project, PDF and PNG and they work great.

Thank you to dhtmlxGantt team.

We’re very grateful to KeyWorks OS for sharing their experience of using dhtmlxGantt. We do hope that our collaboration will always be fruitful and wish them good luck!

Now sharing your success stories became even easier – just fill in a small form here.
We’re eager to help you increase your brand awareness and we’ll highly appreciate your contribution.

The post Customer Spotlight: dhtmlxGantt for KeyWorks OS appeared first on DHTMLX Blog.

Today, on April 19, dhtmlxGantt turns 8 years old. Since 2010 our team has been working fruitfully on the development of the most complete gantt chart library for project management. On its 8th anniversary we’re proud to share the milestones of dhtmlxGantt history.

But firstly, we’d like to thank all our clients for relying on us and wish you to have a successful work with our library! We’re here to fulfill your needs and provide you with the best possible solutions.

What Makes dhtmlxGantt Popular?

We’re very pleased to admit that dhtmlxGantt has been in high demand since its release in 2010. It’s a pure Javascript library with rich and flexible API for building full-featured gantt charts. Gantt charts enjoy great popularity among project managers helping them to schedule tasks, assign resources, estimate project workload and, thus, stay both efficient and effective.

dhtmlxGantt provides cross-browser support as well as any imaginable client-side and server-side integration. It also enables full customization of all gantt chart’s elements. At the same time end users benefit from incredibly fast performance, intuitive UI and accessibility options. Our dhtmlxGantt boasts of having such outstanding features as task auto scheduling, creating working calendars for different tasks and resources and a variety of other resource management features.

To make a long story short, check our release history in infographics:

If you haven’t made up your mind yet whether to try dhtmlxGantt or not, we’re happy to share:

• the latest stories of how our customers work with dhtmlxGantt: KeyWorks OS, Splitvice, Hive, vTiger CRM
• live demo on the Gantt page
• our documentation and samples

Contact us if you have any questions and try dhtmlxGantt now!

The post dhtmlxGantt Is 8 Years Old: Release History in Infographics appeared first on DHTMLX Blog.

Our dhtmlxDiagram library consists of various types of diagrams. One of the most widely used is a javascript flowchart, which shows any kind of workflow, process or system. You can download the evaluation version of dhtmlxDiagram and try it out yourself.

What Are Javascript Flowcharts For?

A javascript flowchart (otherwise called a javascript workflow diagram, process flow or simply flow diagram) can be integrated into an app for visualization of company’s activities. It can reflect the whole business process, workflow in certain departments or steps of a single operation. The scope of your diagram depends entirely on the needs of end users.

Wide flowchart

Let’s have a look at some of the cases when building a flowchart may be useful:

• Illustrating a process with this diagram type helps company’s members better understand this process and what it comprises.
• Finding errors, drawbacks and weak points gets much easier with a detailed workflow representation in a flowchart.
• Flowcharts are very effective for explaining complicated issues to coworkers or team members, as they show the process step by step.
• These diagrams can also be used while brainstorming to visualize a problem, ways of solving it or what should be improved.

As you can see, js flowcharts serve lots of different purposes. For that reason they’re applied in a wide range of fields. We’ll give several examples.

Flowcharts are frequently used in programming to describe complex sequences and subjects like user’s path on the website, code structure or software architecture.

Business modeling also benefits from js workflow diagrams for illustrating business processes, building strategies, visualizing infrastructure and other objectives.

Process flow diagrams are considered to be handy tools for project managers, as they perfectly fit for showing steps of a project.

Flowcharts are also popular in the field of enterprise resource planning to demonstrate the flow of human, financial, manufacturing or any other resources.

Besides, they are often applied in scientific methods and research.

How Flowcharts Help to Visualize Data

Flowcharts can be used in numerous ways to visualize data due to the variety of graphic elements characteristic of this diagram type. You can combine flowchart elements in a unique way to illustrate what you need.

Our library provides more than 30 different types of flowchart shapes, each type meant for a particular purpose. Here are the most frequently used shapes:

In many cases a flowchart starts with a “start” shape and ends with an “end” shape, which mark the beginning and finishing points of a process.

“Process” shapes are drawn in the middle of a flowchart as certain steps of a process, for example, as an action to be taken by users on the website. Meanwhile, process steps are based on “preparation” shapes that describe the conditions in which the process is flowing (for instance, user is not logged in).

The “or” shape allows adding several possible outcomes of previous steps.

You can also make use of “subroutine” shapes, which are predefined process shapes linking to an existing process in another flowchart.

Among other common shapes are “database” and “document” shapes. Their names speak for themselves.

Apart from shapes, connectors also play an important role for building a flowchart, as they show how flowchart elements are related to each other and guarantee that your diagram is read correctly.

Why Build Javascript Flowcharts with dhtmlxDiagram

Being able to manipulate a flowchart is significant for workflow visualization. Rich and flexible API gives an opportunity to achieve any goal you set with our javascript/html5 workflow diagram.

1. Customizing and styling each flowchart element to tailor it to your needs

A crucial feature of our javascript flowchart is that you can set a different type for each flowchart shape with the help of the type attribute. You can adjust the look and feel of your diagram to your requirements by redefining the corresponding CSS classes. Moreover, you decide how far your shapes are situated from each other specifying their margins.

2. Manipulating shapes freely via API to make changes whenever needed

Our js flowchart is highly flexible. It’s always possible to add new shapes, delete the old ones or even start your diagram from scratch by using the related data collection API.

The add method enables you to add new shapes to your flowchart:

Deleting some of the shapes you don’t need or even all of them can be done with the remove method:


If you’re satisfied with the shapes you have, but their content needs to be improved, you can apply the update method to place new data into your shape.

3. Making wide flowcharts easy-to-read with zoom and scroll

Wide flowcharts with lots of data don’t cause trouble to you and your end users anymore due to zooming and scrolling features. Taking into account your flowchart’s size, you can zoom in or out with the help of the scale property:

Another option is to add horizontal and/or vertical scrolls for viewing your flowchart.

4. Exporting flowcharts to PNG and PDF

Your process visualization can be easily saved, stored and shared with others if you export your flowchart to png or pdf.
The pdf or png export methods permit not only exporting diagrams as they are, but also adjusting the export settings:

5. Providing seamless back-end integration and cross-browser support

What is really vital, our javascript flowcharts can be integrated into any web app performing equally well in all modern browsers and with any server-side technologies. Data is easily loaded into your diagram in the JSON format. On top of that, the coming spring update 2.1 is going to introduce a diagram editor bringing a much more interactive javascript flowchart for end users.
All that makes our library an indispensable tool for process visualization.

Conclusion

Process visualization becomes really easy and enjoyable with a great variety of features javascript flowcharts offer. They can reflect any interrelated facts in a consistent structure. You can apply this diagram type to illustrate whatever you need and get a very descriptive and intuitive visualization.

We do hope that our article will help you to take in the peculiarities of flowcharts and create your own javascript process flow diagrams.

Our documentation provides developers with more details of how to build flowcharts as well as other diagram types included in dhtmlxDiagram library.

If you’d like to give javascript flow diagrams a try now, just download our 30-day trial version.
Find more diagram types on dhtmlxDiagram page and contact us if you have any questions.

The post Why Use Javascript Flowchart for Process Visualization appeared first on DHTMLX Blog.

The highlight of Scheduler’s major release 5.0 is, obviously, its stylish and trendy Material Design look. But that’s not the only great news we have! Another outstanding feature of the release is a major CSS overhaul. Now dhtmlxScheduler allows you to modify the existing skins in a simple way or even create new custom skins for your calendar apps on your own. Server-side integration also became much easier due to improved REST support with updated client-side API and documentation.

Meet dhtmlxScheduler 5.0 and learn all about the release in our blog post. Or cut it short and try out version 5.0 right now.

On Trend with Material Design

Inspired by Google Material Design patterns we’ve arrived at a complete redesign of our event/booking calendar component to give it a modern and trendy look and feel. Our new Material skin presents a much clearer and more vibrant user interface:

Check Material Skin Sample >

Bright and pure colours of events and other elements enrich the impression of using the calendar. We bet that skin would be one of your favourites!

Besides changing the colour palette, there have been some UX enhancements in switching the time period (days, weeks, months) and filling in the event details form. To make your calendar even more Google-like you may also add an orange button in the bottom right corner of the screen. Pressing the button will trigger a lightbox to pop up, where end users will enter event details.

UI/UX improvements covered all the Views as well:

Check Year View Sample >

Check Agenda View Sample >

While Material skin has been introduced, we’ve removed 2 older skins, Glossy and Classic ones.
*Please, note that if you’d like to keep on using these skins, you’ll need to stick to relevant CSS files from older versions of the calendar. Otherwise, you’re welcome to migrate to another skin.

In connection with dhtmlxScheduler redesign, the update 5.0 also caused a grand CSS refactoring. Now you can take advantage of vastly renewed Scheduler styles for building your apps.

Check all the details regarding migration and CSS refactoring in our migration guide.

Skin Customization

On top of all, version 5.0 provides you with a unique opportunity to create your own custom skins for calendar apps. From now on, style files will be included in dhtmlxScheduler package. On the basis of these files you can rebuild existing skins tailoring them entirely to your needs or even create a brand-new skin to convey an exclusive look and feel in your app. Our skin customization article will guide you through all the steps of this process.

Smooth Server-Side Integration

Now using dhtmlxScheduler with back-end technologies became really easy. Version 5.0 adds some long-awaited improvements to the dataProcessor module, which enables a simple connection with RESTful backends. For your convenience we’ve also updated documentation on server-side integration, which now covers all request and response formats for dhtmlxScheduler’s communication with the backend. This will help you to implement your backend API on any platform or to move from dhtmlxConnector to a more flexible custom implementation.

What Else?

Apart from groundbreaking changes mentioned above, dhtmlxScheduler 5.0 involves a number of other essential improvements:

• The update of touch support for Microsoft devices
• Hebrew locale is added for recurring events forms
• onLoadError is added for network and server errors

Other minor changes and bug fixes can be found in “What’s New” section of our documentation.

We’re pleased to invite our clients with active support subscription to download the newest version of dhtmlxScheduler in the Client’s Area or check our upcoming newsletter where you can find a download link.

If you’ve just discovered dhtmlxScheduler, get our 30-day free trial to make sure our javascript calendar is exactly what you need.

We’ll also appreciate your feedback on the new update together with your desired feature ideas left in the comments section below or sent via email.

Stand by for future news and updates!

The post dhtmlxScheduler 5.0 Major Update with Modern Material Design Look appeared first on DHTMLX Blog.

May 20, 2009 is the day dhtmlxScheduler was released for the first time.

From the very beginning our calendar component was distinguished by its intuitive drag-and-drop interface, support for all major browsers and easy JavaScript API configuration. Over 9 years dhtmlxScheduler has gone through significant improvements, acquired plenty of sought-after features and gained popularity among numerous developers.

With our Ajax-enabled javascript calendar you can create various events making them recurring or lasting for several days in a row. But among the most awesome features are multiple calendar views for displaying events the way you need. You can have an overview of all planned events in the Agenda View or attach a map to find your destination quickly in the Map View. You can add any items, to which you’d like to assign events, in multiple-resource views (Units View and Timeline View). All in all, there are 10 views to build any calendar for any purpose.

Through its development dhtmlxScheduler has turned into a highly customizable event/booking calendar. Every element can be modified to cater for your needs including custom views and skins. For that reason dhtmlxScheduler can be applied in a wide variety of fields from hotel booking or car rental service to medical appointment or human resource management.

We continue to constantly enhance dhtmlxScheduler functionality. On the eve of its 9th anniversary we’ve rolled out a major update 5.0 with modern Material design look, improved server-side integration and flexible skin customization. Hope you’ll enjoy it!

Besides, we’ve decided to keep on with the series of infographics devoted to the release history of our products and designed special anniversary infographics with love to dhtmlxScheduler:

Learn more about dhtmlxScheduler:

• the latest story of how our customers work with dhtmlxScheduler by WebAuthor
• hotel reservation and car rental demos
• our documentation and samples
• DHTMLX Scheduler for ASP.NET

Contact us if you have any questions and try dhtmlxScheduler now!

The post 9 Incredible Years with dhtmlxScheduler: Anniversary Infographics appeared first on DHTMLX Blog.

Our dhtmlxDiagram library expands its functionality more and more with the release of a new updated version 2.1. Meet our long-awaited diagram editor for all diagram types and other improvements!

Download dhtmlxDiagram 2.1

Diagram Editor

Version 2.1 introduces a new editor for all possible diagram types presented in our library such as flowcharts, tree diagrams, block diagrams, activity diagrams etc. The editor allows you to manipulate every diagram element: shapes and their content, connectors, colors of all elements etc.

Try diagram editor >

On the left side of the editor there’s a panel with all available shapes for building your diagram from scratch. The right panel contains fields for setting the style of diagram elements as well as changing their size and arrangement by modifying values of the shapes’ attributes. On top you can find a toolbar to control how your design process goes. Anytime you can reset all the changes you’ve applied, zoom in and out for your convenience or switch to the preview mode.

Working in the diagram edit mode is simple and intuitive. The editor allows you to drag shapes, resize them and make a small toolbar with editing options appear by clicking on a particular shape. You can also edit a particular shape by selecting it and changing necessary settings in the right sidebar.

To make your work faster we’ve introduced several hot keys for the most frequent operations:

• Ctrl + C – to copy a shape
• Ctrl + V– to paste a shape
• Ctrl + Z – to revert the latest action
• Del – to delete a shape
• Arrows – to move a shape left/right/up/down

Now adjusting your diagram’s look and feel to your taste takes you just a few moments. Moreover, you can create a small application to switch between the editor mode and your diagram that allows you to save changes to your diagram and view them on the fly.

New Configuration Options

In dhtmlxDiagram 2.1 we’ve enlarged the set of configuration options for diagram and org chart shapes and connectors. Now styling your diagram via object properties discovers lots of new opportunities, for example, defining the shape’s angle of rotation, color, stroke, the font color of a shape’s text, the radius of connector’s rounded corners and much more. Here is the full list of new configuration options for diagrams and org charts.

More Flexible Customization

Besides enriched configuration options, version 2.1 brings about greater possibilities for diagram and org chart customization via CSS. New ways of styling via CSS include changing the style of connector’s lines and arrows and modifying the look of connectors between diagram shapes or org chart cards. Read more about customization of diagrams and org charts.

Other Improvements

To complete the list of changes in version 2.1 we’ll add that dhtmlxDiagram Guide was reorganized and updated. Now surfing through its chapters will be handier, as we’ve divided parts devoted to diagrams and org charts into 2 sections: Diagram Guides and Org Chart Guides.

Other updates in version 2.1:

• New events ShapeHover and EmptyAreaClick are added
• The lineGap config option is added

If you’ve never tried dhtmlxDiagram, we invite you to get our 30-day trial version.
Our clients are welcome to download dhtmlxDiagram 2.1 in the Client’s Area.

Related Resources:

• Updated documentation and “What’s New” section
• Samples
• Diagram editor
• Org chart editor

The post dhtmlxDiagram 2.1 with Diagram Editor for All Diagram Types appeared first on DHTMLX Blog.

Another popular diagram type available in dhtmlxDiagram library is a javascript decision tree. It serves as a useful tool for making decisions or predicting events in various fields. Download dhtmlxDiagram 30-day trial version for testing this and other diagram types.

Where Javascript Decision Trees Are Applied

Javascript decision trees are used by developers to build analytics tools, which enable end users to visualize and weigh alternatives in order to find the best solution. That might be alternative investment options, possible causes of business failures, a choice of some crucial aspects, for example, what product features to develop, or any other kind of dilemma.

Tree diagrams, on the whole, are broadly applied to illustrate different choices, conditions, risks or objectives in numerous fields. Let’s highlight the main purposes for building a tree diagram:

• Situation analysis takes advantage of decision trees to compare the outcomes of decisions to be made taking into account possible profit or loss.
• Decision trees are applied for calculating probability and predicting events (for instance, estimating chances of an airplane crash by airlines).
• Decision trees facilitate deduction helping to draw different conclusions to the matter in question or extract detailed information from a broad concept. This methods are often involved in data mining processes.
• Building decision trees is useful for uncovering discrepancy, knowledge gaps and logical fallacies and, thus, is good for brainstorming.
• This diagram type is also suitable for describing qualities of items (for example, company’s products, services or events for analysis or further design).

Evidently, decision trees are powerful tools in maths and sciences. By showing the logic of things they also assist analysts with making decisions, forecasting events and strategic planning. That’s why it’s a crucial instrument in organisation’s management and business analysis. Besides, decision trees are used in machine learning, computer sciences and game theory.

Drawing a Decision Tree

Let’s take a look at the following decision tree diagram. It deals with the necessity to make a business decision on which company to invest resources: in company A or company B. Two branches of the tree represent outcomes for investing in company A and B and both positive and negative effects of that decision.

Investment Decision Tree

In most cases decision trees are drawn with the help of 3 types of nodes:

The rectangular node is the main one, which represents a decision to be made (investment decision in the diagram above).

Circular nodes are situated on separate tree branches and stand for possible alternatives: investing in company A or B.

Triangular nodes, which are also called endpoint nodes and may remind you of tree leaves, illustrate what the possible consequences of the two alternatives are, how beneficial the investment decision may turn out for the company.

Decision tree diagrams are usually drawn from left to right. Nodes are connected with arrows. Besides, there may be included text and numbers for showing the amount of resources to be invested, gained or lost as in the example above.

However, it’s also possible to create a tree diagram with branches spreading from top to bottom. Tree diagrams may also include other flowchart shapes. An example of such a vertical tree describing information characteristics is shown below:

Vertical Decision Tree

The tree-like structure of decision trees opens up lots of opportunities for application of this diagram type in various fields. They are very informative, as they may combine text and numbers. At the same time these diagrams are neat and easy to read and understand. That’s why building a decision tree is a fast way to arrive at a particular conclusion and estimate potential results.

Javascript Decision Tree in dhtmlxDiagram Library

Javascript decision trees are part of our javascript diagram library, which also includes flowcharts, org charts, activity diagrams, block diagrams etc. Building all these diagram types is simple and convenient.

Flexible Customization

Each aspect of your graphic javascript tree can be changed and styled the way you prefer via CSS or shapes and connectors object properties. Here you can see how some parts of the investment decision tree were configured:

Object properties allow you to define the color of the shape and its outline, the type and width of the outline, the pattern of dashes and gaps if it has a dashed stroke and many other properties for shape and connector objects. Styling via CSS also gives you lots of freedom to refine your diagram even further.

On top of all, the rich API of dhtmlxDiagram permits you to add, delete and update shapes and diagram content easily, so that you can modify your existing diagram whenever needed.
After you’ve finished creating your javascript tree visualization you can easily save it in pdf or png formats.

Interactive Diagram Editor

One of the coolest features introduced in dhtmlxDiagram 2.1 is a diagram editor. It gives end users a great opportunity to build decision trees from scratch with the help of an interactive editor interface. Drag and drop shapes from the left panel, add connectors between them, set other attributes such as the shapes’ arrangement, color and content and achieve the desired look and feel of your diagram.

A diagram editor can be easily initialized (read more in our guide). Besides, the editor may be used as a small application, which allows you to switch from the editor view to the diagram view for saving recent changes and verifying them at once.

Easy Integration Into Any Web App

Our library works equally well in all major web browsers and allows using any server-side technologies. As the learning curve for dhtmlxDiagram is quite short, it will take you just a few minutes to integrate it into your app.

Conclusion

Decision trees complement a range of tools for conducting analysis for various purposes. Being both informative and elegant they provide an intuitive way to find optimum solutions in unclear situations visualizing potential outcomes. Creating these diagrams takes a few steps: describe a decision to be made in the decision node, draw all possible options on diagram branches and assess the expected results in the leaflike endpoint shapes.

Our dhtmlxDiagram library provides a rich functionality to develop javascript/html interactive decision trees and other diagram types with flexible customization, smooth integration and user-friendly editor for end users. To get a more detailed insight into the use and features of our diagram library, consult our documentation.

Try out javascript tree diagrams in dhtmlxDiagram 2.1 evaluation version.
Don’t hesitate to contact us if you have any questions and leave your feedback on the usage of decision trees in the comments below.

The post Javascript Decision Tree: Visualization Tool for Finding Solutions appeared first on DHTMLX Blog.

JavaScript activity diagrams represent UML diagrams in our library. Their main purpose is to describe step-by-step activities and provide guidelines. You can test this diagram type in our 30-day trial version of dhtmlxDiagram.

Activity diagrams in UML reflect the behavior of a system or person. For that reason they’re often defined as behavioral diagrams. This means that they are used for showing how something behaves under certain circumstances taking into account different scenarios.

This diagram type is widely spread in business analysis for illustrating particular business use cases and activities involved in them. However, UML activity diagrams may be applied even on a larger scale describing any workflow, which shows all possible occurrences in the course of events.

View the Whole Activity Diagram

Another field of use of activity diagrams is programming. Developers apply this diagram type to formulate how a system or program should behave. It concerns both simple operations and more complicated functions.

How to Draw Activity Diagram

UML activity diagrams are distinguished by the possibility to illustrate parallel activities. For example, the first activity diagram we had a look at above describes the necessity to prepare both a room and laptop for meeting a client that is shown by parallel arrows leading to two different rectangular shapes.

These diagrams may also include iterations, when an error or other unfavourable event occurs, and an arrow is being directed to one of the previous activities to be repeated.

Activity diagrams are usually built using 3 types of shapes:

The circle shape marks the start and end points of activity diagrams.

Rectangles reflect activities themselves – what needs to be done.

Decision shapes serve as crossroads, a point where there’re two or more possible ways to follow. It occurs when an activity results in several outcomes, which lead to different steps to be taken next. Arrows flow out of decision shapes and are directed to separate rectangles to create several scenarios for further activities.

Besides, these diagrams may include other flowchart shapes – for example, to illustrate the connection with another diagram.

Nodes are linked with arrows showing the flow of activities. In order to make a diagram more descriptive, textual notes are often provided near shapes and arrows.

Tips to Build Javascript Activity Diagrams with DHTMLX

dhtmlxDiagram library consists of plenty of diagram types like flowhcarts, org charts, decision trees, and UML activity diagrams among them. All these JavaScript diagrams are highly customizable, can be rendered well in all major web browsers and are easily built involving any server-side technologies. Our extensive API gives you lots of maneuver to tailor your diagram entirely to your needs.

Below you can check the configuration of this activity diagram via CSS and shapes’ and connectors’ object properties:

With the help of our documentation you can grasp all tips about styling activity diagrams using CSS and object properties. Anything from the colors of diagram elements to their arrangement can be customized the way you prefer. Besides, you can make changes to your diagram anytime adding or deleting shapes and their content.

End users enjoy an opportunity to build and edit UML activity diagrams by means of the live editor equipped with interactive panels with a large choice of shapes and connectors and tools for styling them.

Our guide provides instructions on initializing the editor and using it by the example of a small application to be able to view all the latest changes immediately in the view mode.

Our online export service also allows you to download a ready diagram in a pdf or png format.

Conclusion

The definition of activity diagram in UML describes this diagram type as an illustration of step-by-step activity flows. Activities are based on various conditions and may evolve into different outcomes. Thus, activity flow diagrams cover all possible occurrences in the behavior of a system or person in question. It makes them very useful for analysing business use cases or describing a system’s behavior in programming.

Our diagram library supplies you with all the necessary tools for building eloquent and comprehensive activity diagrams. Just give it a try in our 30-day evaluation version.

If you have any questions on how to draw activity diagrams using our library, contact us.

Stay tuned for future reviews of different diagram types from dhtmlxDiagram!

The post UML Activity Diagram for Business and Programming appeared first on DHTMLX Blog.

Our JavaScript gantt chart library for project management rolls out its third update this year.

Meet dhtmlxGantt 5.2 with a super user-friendly way for modifying your gantt chart’s content by means of inline editing and a brand-new task-management feature of task splitting as well as a number of other important updates and improvements!

Download dhtmlxGantt 5.2 trial version for 30-day evaluation

Inline Editing

In prior versions of dhtmlxGantt changing task characteristics was available solely through the edit form (lightbox). End users had to click on each task to call the lightbox in order to describe tasks and set their time period together with start and end dates and then close the lightbox to check the changes in the gantt chart and open it up again if some more corrections were needed.

From now on editing tasks couldn’t be any simpler with inline editing. You can create tasks from scratch and make any corrections in the existing tasks right in the grid area due to special built-in editors. Create a task, type in its name, choose the start time and how long it will take to fulfill the task, define its priority and connect the task with other tasks in your project – and observe how your gantt chart changes before your very eyes.

Inline editing is easily enabled via columns configuration. Version 5.2 includes 5 types of predefined editors: text, number, date, select and predecessor editors.

Additionally, you can create your own custom inline editor to make any other changes to tasks necessary for your project.

For user convenience inline editing is available in two predefined modes:

1) Simple click-and-edit mode

It’s a simple and effective solution for inline editing. Editors are opened by a mouse click on a grid cell.

Keyboard shortcuts:
Enter – to save the editor
Esc – to close without saving
Tab/Shift-Tab – to start editing the next/previous cell

Check the sample >

2) Inline editing in conjunction with keyboard navigation

This is where new inline editing truly shines!

Try it out in inline editing with keyboard navigation sample >

You can easily create new tasks by entering the description into a placeholder row, navigate between cells using arrow keys and have the MS-Project like experience when editing automatically starts as soon as you start typing the text.

Additionally, the keyboard navigation extension gives you a complete control over the project via customizable keyboard shortcuts, which bring the user experience to a completely new level.

Main shortcuts:

Any letter or number – to open the editor in the current cell and enter the edit mode
Enter – to open/close the editor
Spacebar – to open the editor
Arrows – to navigate between grid cells
Shift+Right Arrow – to indent a task
Shift+Left Arrow – to outdent a task
Shift+Up Arrow – to collapse a branch with tasks
Shift+Down Arrow – to expand a branch with tasks

It’s also possible to implement a mouse/keyboard mapping schema for inline editors.

Split Tasks [PRO Edition]

It may happen that one of the tasks in a project can’t be carried out in one go for some reason like vacation of the person in charge or other events, which result in the need to break a task into parts. Gantt chart version 5.2 comes out with a split task feature, which allows interrupting a task and dividing it into several linked parts.

Check Split Tasks Sample >

Internally, a split task is stored as a regular summary item with subtasks, while the display mode shows splits in the same row where an original item was. The public API allows switching between a split mode and tree mode of task display on the fly, which gives users more control over the project.

Checkbox and Radio Button Controls

Now you can also make use of two types of controls in a lightbox: checkboxes and radio buttons. They come in useful when you need to choose team members for assigning resources, switch between the tree and split modes for displaying tasks or define the priority of tasks in your project.

Styling Your Gantt

And the cherry on the cake is an extensive guide to working with styles in Gantt recently updated and completed to cover all customization options. As you may know, our gantt chart is 100% customizable, every element can be tailored to your requirements with ease. And if our 7 predefined skins aren’t enough, there’s lots of room for your own creativity. Changing background colors of columns, rows and cells in the grid and scale areas, adding buttons, icons and other custom elements wherever needed, coloring text and tasks according to their progress, styling baselines and deadlines, tooltips, links and what not – all that is described in our guide.

Besides the features mentioned above, dhtmlxGantt 5.2 brings about such enhancements as ability to set task types automatically [PRO Edition], Auto Scheduling performance improvement and updated Content Security Policy extension.

Note that split tasks and ability to set task types automatically are available only in Professional Edition under Commercial and Enterprise licenses.

To test all these features right now, download version 5.2 for 30-day evaluation.

Our current clients are welcome to get the released update in their Client Area.

Enjoy the update and don’t hesitate to leave us your feedback in the comments section!

Related Resources:

• Full “What’s New in V5.2” list in our documentation
• Inline editing guide
• Split tasks guide
• Guide to working with styles in Gantt

The post dhtmlxGantt 5.2: Enhanced UX with Inline Editing and Split Tasks appeared first on DHTMLX Blog.

The summer release of our powerful component for business intelligence dhtmlxPivot delivers new ways of customizing and tailor-making your JavaScript Pivot table and makes your work with the tool even more convenient. A footer for resulting values of operations, customizing content and formatting data in cells, autowidth for columns, collapsible rows in a tree-like way – here comes version 1.3 new functionality!

Dive deep into the brand-new features and try dhtmlxPivot 30-day evaluation version right now.

Showing Operations’ Total in Footer

Now you can equip your Pivot table with a footer row, where the resulting values of operations from columns will be displayed. For operations with sums the total of all values from the column will be rendered in the corresponding footer cell. For Min and Max operations you’ll find the min and max values from the column there. The footer cell in the column with the Count operation will show you the total count.

The footer row is easily added through the layout configuration with the help of the footer:true option. Read more in documentation >

Check the sample >

Custom Content in Cells

The Pivot table is able to render not only values but any type of content in cells depending on your goals of analysis and reporting. You may choose exactly which cells should contain the custom content you need.
For example, end users need to check, which countries have had more than 3 oil production plants over several years. For this purpose you can define via the cellTemplate property that cells with the value more than 3 in the column with the Count operation for the Oil field will contain checked checkboxes and all other cells – unchecked checkboxes:

Check the sample >

You can modify the content of your Pivot table adding any custom elements in the same way. Check documentation >

Custom Formatting in Cells

The next step of Pivot customization is applying different formats to the values in cells like currency or mathematical symbols, or formatting values by rounding decimals via the customFormat configuration property. You can specify the format of particular cells on the basis of operations in columns. For instance, your Pivot table may show values in the currency format of the country you choose in all columns with summation. The example below illustrates oil production of different countries converted to euro with the German locale applied to the cell values.

Check the sample >

Automatic Adjustment of Column Width

If a cell in a column contains some large numbers which don’t fit the cell, the Pivot grid may automatically adjust the column width to the widest cell in this column.

Check the Sample >

Collapsible Fields in Grid

Pivot 1.3 also introduced a more convenient way of presenting data in rows with a possibility to collapse nested rows and expand them in a tree-like structure:

We do hope that dhtmlxPivot new features will come in useful in your projects. Our full documentation will help you take in all the new functionality. You may also check Pivot 1.3 feature list in the “What’s new” section.

We invite our current clients to download the latest version in their Client’s Area.

If you don’t have experience working with our Pivot table, seize a chance to get a free trial version now. Your feedback is highly welcome! Don’t hesitate to leave your comments in the section below or send them to our email.

The post dhtmlxPivot 1.3: Advanced Customization Options appeared first on DHTMLX Blog.

In search of the right tool for visualizing systems and concepts don’t forget about a simple and effective decision offered by JavaScript block diagrams. This diagram type helps to illustrate swiftly the main parts of a system or subject in question. You can download our JavaScript diagramming library with this and other diagram types for 30-day evaluation.

Check Sample >

Block diagrams are usually used for a brief description of a system, process or concept at the initial stage of work. They’re widespread in such fields of applied science as engineering, electronics, computing etc. for creating drafts of projects, general illustration of systems, programs and software applications. Details are omitted from block diagrams in order not to distract attention from the core elements and provide an overview of a system as a whole. In future such a diagram may be elaborated or divided into several diagrams to help with the further design process.

Besides, you may find useful to fall back on JavaScript block diagrams as a means of sketching your ideas, project steps or main points of something.

Drawing Block Diagrams

All elements of block diagrams play an equal role in visualization. They’re represented by similar rectangles, which are often treated as “black boxes”.

It’s not relevant to know what these elements consist of themselves to the process of creating block diagrams, but more important is their interconnection. There might be no hierarchy in block diagrams and their elements may be organised in a closed circuit.

Arrows denote the flow of data from one block to another and indicate how the diagram should be read. To make it clearer, captions may be provided beside shapes for adding brief explanations.

Building JavaScript Block Diagrams with DHTMLX

JavaScript block diagrams are included in DHTMLX diagramming library together with such diagram types as org charts, workflow diagrams, decision trees, UML diagrams etc. All these diagrams are easily integrated into an app due to rich API, extensive browser support and simple implementation with various frameworks and technologies. The data can be loaded to js block diagrams in the JSON format (check docs here).

The flexibility of customization options enables you to build block diagrams from scratch exactly the way you need and polish their look and feel to meet all the requirements of your project. The full list of shapes’ and connectors’ object properties is here. Our guide to CSS styles will help you finalize your diagram’s look and feel. Besides, there are many different operations allowing you to manipulate diagram shapes – add new shapes, delete old ones, update shapes’ content, filter shapes and what not.

Let’s take a closer look at how our JavaScript block diagram was configured via CSS and shapes’ and connectors’ object properties:

dhtmlxDiagram library makes lots of room for tailor-making diagrams not only by developers, but also by end-users due to a special diagram editor. It’s easily initialized and may be used as an application for creating diagrams from scratch without coding, customizing their appearance, saving changes and viewing them on the fly.

After you’ve finished designing block diagrams save them by exporting to PDF or PNG formats.

Conclusion

Block diagrams join a wide range of various diagram types in our library and give you the advantage of a simple yet effective way for a quick general visualization of systems and concepts, creating drafts and sketches and documenting ideas in a clear and compact way.

DHTMLX diagram library supplies you with a robust tool for building highly customizable JavaScript block diagrams and integrating them to any project. Our 30-day trial version lets you test all the features of our library and provides support from our dev team for the evaluation period.

Check the related materials and keep an eye on the recent updates!

Related Materials:

• Full DHTMLX diagram documentation
• All diagram samples
• Recent Diagram 2.1 update

The post JavaScript Block Diagrams for Simple Visualization appeared first on DHTMLX Blog.

dhtmlxPivot was introduced in August 2017. Over the last year our technical support team has faced various questions from the users of our JavaScript pivot table about its configuration and customization options.

As JavaScript pivot tables are widely applied in BI apps used by companies of any size, they need to be fine-tuned to meet the requirements of a particular business or country. Pivot tables help end users to analyze different types of data such as financial data, flows of capital, products, human resources, and what not. Pivot tables are supposed to process values in different formats what raises technical questions on behalf of developers, as they need to manipulate content in pivot grid cells and adjust it to the needs of the project they work on.

We’ve gathered together some of the most common issues developers deal with customizing JavaScript pivot tables. So here’s a wrap-up of frequent questions and our answers.

Is it possible to add currency symbols to the values of cells?

Yes, just like any other symbols currency symbols can be added to cell values with the help of the customFormat configuration property. You can define which values require custom symbols depending on the operation applied to data in a column as shown in the example below:

Besides, as you see from the example, you can also apply specific localization rules that dictate how to round numbers in cells according to the locale you need (German locale in our case).

Check custom formats sample >

Can we change values of cells for other custom elements?

Yes, you can change values of cells for any custom content you need to be shown in your JavaScript pivot table. For this purpose you can add a custom element to the cell like an icon, link, checkbox, button etc, and even create an event handler for it, for example, to show a popup after a click on the cell content.

In our case we added checkboxes to the cells in columns with the Count operation when the cell value is greater than 3.
Read more in docs >

Check cell templates sample >

Does JavaScript pivot table allow adding custom operations for values?

You can add any mathematical operations you need by means of the addMathMethod method.

You can redefine the existing methods and add your own custom ones, with which you can specify formats of cell values the way you need. For example, you can apply particular localization rules:

Check custom methods sample >

These were some of the most frequent questions from developers about our JavaScript pivot table component that our technical support team has encountered so far. Hope our answers turned out to be useful for you too!

Currently we’re working on the new functionality for dhtmlxPivot for the next updates. Vote for the features you require and check our roadmap here.

Download dhtmlxPivot 1.3 trial version

The post Most Frequent Questions from Developers about Our JavaScript Pivot Table appeared first on DHTMLX Blog.

This time CESC-IT, software company from Catalonia, will tell us about their experience integrating the UI components – Layout and Grid – into their software solution for public administration EGUS.

EGUS is a multilanguage software solution designed for the departments of public administration responsible for the registration of municipal activities; town councils, police forces, etc.

The software allows the user to manage the commercial activities located within the limits of a municipality in real-time and makes them visible in a GIS map, so they can be fastly located.

It also allows creating a registry of relevant data like license number or capacity.
Furthermore, the user can store data from establishments, individuals or legal entities related to the activity, incidents and if necessary, attach documentation about them.

In order to achieve this challenge, we have integrated OpenLayers to dhtmlx by developing a Javascript language software solution, based on Java Server technology + html5 + DHTMLX with its components of LAYOUTS and DATAGRIDPRO.

We wanted to have the server data displayed on a GIS map and that with the map on the screen the user could filter activities faster, for example; by typology, date and/or polygon selection, obtaining geolocated search data on the map in the form of activities.

The components of Layout + Datagridpro have allowed us to work with grids by grouping them according to applied filters. By this way, we give the users a great deal of power so that they can have immediate results, without overloading the server with new requests in the database. In conjunction with dhtmlxGridpro, we have integrated Openlayers to display the data on a GIS map, and this component has controls to show or delete lines of information according to interests in real-time.

Great thanks to the developers of EGUS from CESC-IT for sharing their experience with us!

If you’d like your story to be highlighted on our blog, feel free to submit it here.

The post Customer Spotlight: dhtmlxLayout and dhtmlxGrid for CESC-IT appeared first on DHTMLX Blog.