How to Build a JavaScript Eisenhower Matrix with DHTMLX

Introduction

In this blog post, we’ll explain the specifics of the Eisenhower Matrix and provide a step-by-step guide on how to create it without any code manipulations using the DHTMLX Diagram editor.

What is Eisenhower Matrix and How it Works

It is a graphical diagram designed for arranging and prioritizing tasks on the basis of their urgency and importance. Combinations of these core parameters form the structure of the Eisenhower Matrix i.e. four categories (quadrants) for dividing tasks:

  • Important and urgent — tasks with known deadlines that have to be timely completed to avoid any repercussions;
  • Important but not urgent — tasks without a clear due date that should be scheduled for attaining your objectives in the future;
  • Not important but urgent — tasks that must be done but do not require your personal attention and it is possible to delegate them to your colleagues;
  • Not important and not urgent — time-wasting activities that can be neglected or even excluded from your workflow.

This kind of diagram is widely used by business analysts, product and project managers, team leaders, and ordinary employees to classify their day-to-day activities. People love this approach for its simplicity and straightforwardness. Therefore, it is nice to have an instrument that helps to incorporate this functionality into a web app with minimum time and effort.

JavaScript Eisenhower Matrix Example by DHTMLX

Our example provides a basic scenario of using the Eisenhower Decision Matrix to facilitate the workflow of a product team. Utilizing the task priority principle of this approach, we arranged tasks in four quadrants for three different product management stages: code review, automation, and maintenance. Each type of task is labeled with different colors to present the tasks’ prioritization in a more visually compelling and understandable way. As you can see, we also added clarification remarks for each category of the box that remind users how tasks should be handled.

JavaScript Eisenhower Matrix Example by DHTMLX

Our example provides a basic scenario of using the Eisenhower Decision Matrix to facilitate the workflow of a product team. Utilizing the task priority principle of this approach, we arranged tasks in four quadrants for three different product management stages: code review, automation, and maintenance. Each type of task is labeled with different colors to present the tasks’ prioritization in a more visually compelling and understandable way. As you can see, we also added clarification remarks for each category of the box that remind users how tasks should be handled.

Creating a JavaScript Eisenhower Matrix with DHTMLX Diagram Editor

const editor = new dhx.DiagramEditor(document.body, {    type: "default"});

The default mode of the JavaScript editor comes with a user-friendly UI, including four sections: header toolbar, grid area, and two side panels. It includes everything you need for creating a basic Eisenhower Priority Matrix.

The default mode of the JavaScript editor comes with a user-friendly UI, including four sections: header toolbar, grid area, and two side panels. It includes everything you need for creating a basic Eisenhower Priority Matrix.

Open our example in your browser and let us consider the main capabilities of the DHTMLX JavaScript editor in more detail.

  • Adding and manipulating matrix elements

Using the drag-and-drop interface, you can choose all necessary shapes and visual elements listed in the left panel and place them in the grid area. You can specify the core structure of the Eisenhower Box using any built-in swimlane template. It is easy to adjust swimlanes using a context (3-dot) menu.

All swimlane text labels are made via inline editing. Tasks and other clarifying textual content can be added with the help of built-in topic shapes. Each shape has a personal toolbar with a pack of basic editing operations (copy, add a connector, delete). Thus, you can use the copy option to save time on adding similar shapes but pay attention that this option is unavailable inside the swimlane.

  • Fine-tuning the appearance of matrix elements

When it comes to ensuring a unique look for your Eisenhower Matrix, you can find all editing options in the right-side panel. All you have to do is to click on the needed shape and you’ll get access to necessary settings. Here you can play around with all available parameters for any diagram element: dimensions, stroke, color, text, and text styling.

  • Exporting and importing in JSON

When your Eisenhower Matrix is completed, you can apply the exporting option given in the toolbar to save the result in the JSON format. You can use the exported file to populate DHTMLX Diagram with the Eisenhower Matrix data and use it in your application. It is also very convenient to import the JSON file back into the JavaScript editor and continue polishing the matrix.

That’s how you can use the DHTMLX Diagram editor for building your own Eisenhower Matrix.

Conclusion

This article was originally published in the DHTMLX blog.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
JavaScript UI Libraries — DHTMLX

Here we post news about our JavaScript UI libraries. In addition to this, we also share useful tips, news and articles about JavaScript.