WEBIX BLOG

Webix TreeMap – Power of Visualization

Webix offers a number of possibilities to nicely visualize linear data – bar, pie, area, scatter and radar charts – to match any use case. But what can be done if hierarchy matters?  You may think of a Webix Tree as the first and foremost widget as it perfectly shows parent-to-child relation. But that’s almost all about its visualization abilities.

For more powerful tools we should look into the PRO package that includes Organogram (a tree-like diagram ) and TreeMap. We will pay a closer attention to the Webix TreeMap as it is the only Webix widget that can display hierarchical data on a proportional  basis.

The simplest initialization code is brief:

webix.ui({
     view:"treemap", value:”#value#”,  
     template: function(item){  return item.label||""; },
     data:data
});

And you get the following output:

TreeMap_Basic

Dynamic Loading. Fetching Unlimited Number of Records from Server Side

Hi everybody. Today we will be speaking about Webix ways to optimize server-client communication in case of huge data. Those of you who are happy to fetch long datasets at once, please raise your hands!

Webix dynamic loading

 

Just as I’ve expected, nobody’s here.  Everybody has gone to dynamic loading which is implemented very easily with Webix data components.

webix.ui({
  view:"datatable", url:"mydata.php", datafetch:100
});

Initially, a limited number of records (e.g. 100) is loaded, while further requests are triggered by scrolling or paging automatically. Guys, isn’t it nice?

Still, such a pattern requires quite a specific format of a server response –  {data:[ /*array of records*/], pos:0, total_count:100  } – and you may ask yourself: “So what should I do, if I cannot tune the response or I don’t know the total length of server-side data?” Indeed, there are lots of web services that do not provide such information.

The article below shows the solution that relies totally on Webix public API and can be built by any of you.

The Webix way of positioning: how to put everything in its right place

Day by day Webix evolves and dozens of new features appear with every release. But while the framework is constantly improved, something always stays the same.

Let’s talk about the very basic and the most important Webix feature – component positioning and sizing.

1_form_initial

Live demo

Layout. Basics.

The main Webix way of the element positioning is dividing the page into rows and columns.

The basic layout can  be created with the help of the same-name Layout widget. And you can place any of the numerous Webix widgets into any Layout cell:

Oscar for DiCaprio – Visual Designer for you!

Hey guys!

It is the last month of the winter and only 25 days are left before Oscar, the main American awards ceremony.

We could not pass by such an event. And if you hope and believe, the same as we do, that Leonardo DiCaprio, not the bear, will get the Oscar, click “Like” and “Share”.

Visual designer

 

At the end of the month, in case this talented actor wins, all participants will get an annual access to the PRO edition of our Visual Designer, which is scheduled for release exactly at the end of February.

Navigate your way. Sidebar and Sidemenu

Hey guys, let us check today what Webix offers to make our lives easier during app navigation. I bet that there’s something worth a closer look.

Since the launch of the library its users had a standard Menu at their disposal with the possibility of  placing items horizontally or vertically (too simple). But not very long time ago the developers went further and ended up with two handsome widgets created with user-friendly navigation in mind – Sidemenu and Sidebar.

So, let’s explore the widgets’ functionality to find out the use cases that are more suitable for each of them.

Basically, Sidebar can be initialized on the page with the following code:

webix.ui({
      view: "sidebar",
      data: [
           {id: "dashboard", icon: "dashboard", value: "Dashboards",  data:[
               { id: "dashboard1", value: "Dashboard 1"},
               { id: "dashboard2", value: "Dashboard 2"}
        ]},
         ...
        ]
});

And you get: 

sidebar

Live demo

Recurring Events Helper for Webix Sсheduler

Hi everybody!

While working on our main toolkit, we don’t forget about the standalone widgets.

Most recently, we have released a tool that simplifies server side integration of Webix Scheduler. It allows extracting information about normal and recurring events, providing collections of event objects for any specific period of time. It is a very useful feature, when you are working with recurring events.

Scheduler

 

You can install the tool through NPM. Just run the next command line:

npm install scheduler-helper

Complex Content in DataTable

JavaScript Table is the most popular widget of Webix UI framework. It is fast, flexible and can be used in many different scenarios. By default, it shows only a text content in its cells. Nevertheless, you can use cell templating to show a more complex content in the cells of DataTable. Icons, buttons, and even other widgets can be used as cell templates.

Let’s look how it can be done.

Checkbox and Radio buttons

The most common use-case is the adding of a checkbox into a cell of a DataTable. It is so common, that we have added a ready-to-use shortcut. Just write the cell template as follows:

template:"{common.checkbox()}"

and you will get a fully-functional checkbox input.

DataTable

Working with nested data in Webix UI

We all like to use simple apps where an interface is easy and straight. Creating such apps is a breeze, just put some HTML tags, add a UI framework of your choice, something like Bootstrap, for example, and the app is ready.

In real every-day development, things are bit different. It is common for a business app to work with complex data, that requires some advanced UI to represent it. A nested data is one of such use-cases. There is no a ready to use solution to show such kind of data in raw HTML or in Bootstrap. For such kind of task, you need a more powerful tool. Something like Webix UI.

Webix has also developed an in-house solution for managing large volumes of aggregated data in business web apps: the JavaScript Pivot Table. This tool analyzes and displays data in a tabular format.

Tree

The simplest widget that can be used to show nested data is a Tree. It is common UI element for desktop apps, but still rare in web apps. Webix Tree has all common functionality of tree widget; it allows to represent the hierarchical data as a tree, where branches can be expanded or collapsed. Additionally, Webix Tree is really fast. It renders thousands of items in less than 1 second. And if that is not enough, you can utilize a dynamic loading feature to load data on demand.

webix.ui({
view: "tree", data: nested_data
});

 

Webix Tree

How to Build a Mega Menu with Webix

Unlike the regular menus that you can create using the Menu Component, Mega Menus are big and wide enough to allow you place other components and widgets within them. Such a type of menus is widely used on the online shopping websites since it’s pretty easy to use them for navigation purposes.

Here’s an example of how this menu works:

Mega menu built with webix

The demo of the final mega menu with its source code is here.

In this article, we’ll create our own mega menu with Webix in a few easy steps.

Tuning Webix for Odata

As we know, web app development is a complex process that, on the one hand, consists of laborious work at the backend and, on the other hand, includes plenty of efforts while creating a nice-looking and responsive UI.

If you want to optimize the construction of your web applications, you need to find the best option for organizing your work with data as well as a fast and powerful js library for drawing app interface.

This variant can be implemented by using OData, an open data protocol for building RESTful API’s, and by adapting Webix UI library to its rules of requesting and modifying data.

Odata protocol

OData’s goal is to enable a broad access to data regardless of the way it is stored. It allows requesting and updating resources via HTTP commands and provides an entire query language directly in the URL.

Well, if you are reading this post, you probably know a lot about Webix. If suddenly no, you can find more info here.

1 5 6 7 8 9 11