Web dashboards are in high demand today as they have proven to be a helpful tool for at-a-glance analysis of complex data together with its laconic visual presentation. Although dashboards originated from desktop applications web environment requires something not typical for them – responsiveness. In this article we will find out what Webix has already issued to meet this requirement and build our own flexible web dashboard.
Let’s consider the web dashboard that shows up key performance features of a multi-city organization. We will need to see the locations of its departments and switch between them for particular data.
The dashboard will consist of top and bottom panels and the main part between them, which, in turn, contains a fixed part to the left and a flexible part to the right. For the left panel we will use a Google-map component with markers for the needed cities while in the main part we will place a layout with responsive behaviour.
The initial mockup is easily drawn with Webix Layout which is implicitly initialized through rows and cols:
rows:[
{ template:"My Dashboard", type:"header" },
{ type:"wide", cols:[
{ view:"google-map",zoom:6, center:[ 48.724, 8.215 ], data:[
{ id:1, lat:47.366, lng:8.55, title:"Zurich" },
...
]},
{template:"right panel"}
]},
{ template:"Status: all data is saved" }
]
});
In terms of responsiveness Webix offers two totally different solutions both of which are available in the GPL version of the library. These are responsive and flexible layouts.
Responsive Layout
With Webix responsive layouts, you can tune your application to hide or move its parts when the screen shrinks. Let’s apply this approach to the main part of our dashboard:
view:"layout", rows:[
{ responsive:"layout", cols:[
comparison_chart, year_chart, month_chart, list
]}
]
}}
All the widgets in the board are placed in two rows so that they can move between rows as screen size alters. You can learn more about responsive layouts in the documentation.
Why sticking to Webix-way responsiveness?
- Responsive behaviour has been highly improved in the latest Webix 4.0;
- It is possible to define non-responsive widgets;
- It is possible to choose between “move” and “hide” responsiveness;
- Widgets feature responsive-related events.
Flexible Layout
Another way to achieve similar behaviour is the new FlexLayout widget that has seen the world with Webix 4.0 release. It is based on CSS3 flexboxes and grants neat and predictable behaviour. Here’s the alternative code of the main part:
view:"flexlayout", cols:[
month_chart, year_chart, list, comparison_chart
]
}}
FlexLayout offers only cols arrangement, but widgets inside will be split into rows and columns based on the available space.
Why using Webix FlexLayout for a Web Dashboard?
- Promising technology with clear and reliable API;
- No need of complex configuration: you just have to pile the widgets into cols and define minimal width and height for each of them;
- It is possible to load data directly into a flexible layout.
Data management in a flexible web dashboard
The “grown-up” Pro version of the FlexLayout – the FlexDataLayout – can simplify data management by loading the whole dataset directly into the web dashboard. Sure, you can populate only select widgets with data, but it’s nice to have something more tricky up your sleeve.
This advanced flexible layout supports Webix data loading API while each widget inside should have the name property to define which data should be parsed into it.
var data = { activities:[...], month_dataset:[...], year_dataset:[...]};
//configuration
{ view:"flexdatalayout", id:”flex”, data:data, cols:[
{ view:”chart”, name:”month_dataset”},
{ view:”chart”, name:”year_dataset”},
{ view:”list”, name:”activities”}
]}
The FlexDataLayout gives you an indisputable bonus if you need to constantly update the dashboard data. You can reload the whole data at once, not widget by widget:
$$("flex").parse(newdata);
The FlexDataLayout widget is based on the DataLayout, but the latter cannot be safely used in the responsive mode. You can dive into the Data Layout documentation to study it in detail.
Summing up
Webix is an excellent toolkit for building web dashboards. Apart from various layouts it features powerful data widgets as well as numerous controls that can help to drill down into low-level data. At the same time, Webix is packed with technologies that can adapt your web dashboard to any screen size. So play around and share your feedback with the team – we are always eager to help either with an advice, or even with the new feature in the release 🙂
