Webix 11.2 Released Read More Dynamic array methods in Spreadsheet, touch resize for Grid columns, Gantt auto-scroll to date, etc.

WEBIX BLOG

Webix FAQ: Pivot

Hey guys!  The new FAQ article is ready. Last time we were talking about Webix licenses. The new topic is Webix Pivot.

pivot webix

 

To begin with, Pivot is a cool JavaScript widget that is perfect for making interactive table reports and pivot charts. You can easily embed it into your web page or new app. Pivot is based on Webix Tree Table JS, consequently your data will have a tree-like structure. Why Webix Pivot? Because it allows automatically organizing, summarizing and comparing complex data from database files. To get the whole idea, you may check out our online samples.

Webix 3.3 release

Hey guys!

Someone is waiting for May Day celebration, and someone is ready for our new Webix 3.3 release. So what have changed and what has been added since our last update? Webix 3.3, here we go!

Webix 3.3 release

Full support for drag-and-drop functionality on touch devices

We have added drag-n-drop support for scrollable widgets on touch screens – one of the top requested and long anticipated features. Now drag-n-drop starts on long-touch for touch screens.

Life is not on Instagram, let us choose Organogram

I remember my school years and those long evenings spent by painting a family tree. It was the first time in life when I faced the inevitable consequences of a poorly planned work – the sheet of paper unexpectedly came to an end and I had to redraw the scheme from the very beginning. That was a fail!

Organogram

 

Time has passed and new technologies stepped into our lives offering a number of tools for that trivial task. I also saw that the big world is built around the same hierarchical schemes used everywhere: from simple IT org charts to multi-department companies’ hierarchy.

And although there’s a number of tools for manual drawing of organograms, drawing itself is no longer needed. Now I can simply pass the data into a cute Webix organogram widget and feast my eyes upon the ready-made chart in the browser!

No magic, just code (and Webix Pro):

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

Webix FAQ: Licenses

Hey everyone!

New week, new beginning. The number of our subscribers and customers is growing, and we are certainly pleased with that. 🙂 But the more customers appear, the more questions are asked. As a result, the idea of creating a series of articles considering answers on questions related to a particular topic was born. Today we’ll speak about Webix License.

Webix license

 

There are a couple of ways of how you can get our product:

  1. you can download free Trial version, to start and to try our Pro Edition, which has advanced functionality, goes under Webix Developer license and can be distributed in commercial projects. You can use Webix trial version for 1 month only.;
  2. you can download Standard Edition, which has standard functionality, goes under Open source (GNU GPLv3) and can’t be distributed in not open source projects;
  3. and finally, you can purchase any of our existing licenses, receive an email with the link, download the package and start developing.

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.

Release Webix 3.2: SpreadSheet Widget, Rangechart and New Widgets Features

Hey everyone!

Now, while the last days of winter are going by, we are happy to present the first release of the year – Webix 3.2.

Webix 3.2 released

 

And definitely we would like to start with the most important part of our release – the new widget.

Spreadsheet widget

The truly outstanding hallmark of the February release is a feature-rich Spreadsheet widget that allows editing data in Excel-like manner. Being fully client-side it can load data either from plain JSON or database or even Excel document.

Spreadsheet allows you not only to format text values within cells but also define custom dimensions for cells, merge them into spans, copypaste the cells as well as calculate their values using Excel mathematical functions.  During data editing you can revert all the changes you’ve made and apply them back, if needed.

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:

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

Release Webix 3.1

Let’s say “Good bye” to the rainy weather and “Good day” to our new release of Webix 3.1! Less than 2 month passed since our last big update of Webix 3.0, and we are already ready to present the new one.

Webix-release-3-1

 

Our library is updated with new widgets – SideMenu and TreeMap. We also created a new component – Sidebar, which is not included in the package, but you can download it right now.

What we have in the programme today:

  1. TreeMap;
  2. Sidebar;
  3. Sidemenu;
  4. AutoWidth for Menus and Buttons.

1 16 17 18 19 20 26