Yep, diversity makes lives brighter while the choice becomes more difficult. You have to select the right chart for your application as carefully as you choose a Christmas gift for your best friend. The article below can guide you to the ultimate tool.

Bird eye view

Let’s look into the package and admire the available options:

Pie charts: Pie, 3 Pie, Donut

Line charts: Line and Spline

Column charts: Bar and BarH (H for horizontal)

Area charts: Area, SplinaArea

Stacked charts: StackeArea, StackedBar, StackedBarH

Radar chart

Scatter chart

Variations for line charts:

Dynamic chart with a moving graph

Rangechart with a movable frame for selecting a data range (PRO version only)

Chart-like widgets:

Treemap (PRO version only), a hierarchical heatmap

Gage (PRO version only), a simple sensor for one parameter

Down-to-Earth research

Since the correct chart is a precious investment into any business, you should first analyze your data as well as your objectives and ask yourself a vital question:

What do I want to showcase with my graph: comparison, trends over time, distribution, composition or relationship? Let’s try to figure out what is the best chart to use for each conception.

Charts for comparing data

This is the most popular chart type ever and Webix repeats the overall tendency. You can find a lot of comparison chart examples in the library.

For instance, if the data is comprised of items that are independent of each other and your goal is to reveal the biggest value among them, then Bar charts, both vertical and horizontal, are exactly what you need.

For instance, you want to show how many people work in various departments of your company. These are your possible solutions:

Spline chart is almost identical with the Line one but stands out by its smooth and curvy design.

Area and SplineArea charts look very similar to the above mentioned group, but the area below the line is colored to show the magnitude of the value it represents. This connotation becomes extremely handy when you need to compare changing values for several categories within one scale. In Webix such independent categories are called series.

All three areas are transparent, so you can clearly see the graph for each parameter and the way it’s related to its neighbours. At the same time, you can click items on the chart legend to show and hide the corresponding graphs.

Radar chart

This is a circular chart with a scale going from the minimum value in the center to the biggest one on the periphery. The chart is great for revealing the biggest value from rather a small data set. For instance, you can paint a speaking sales rose (as well as a wind rose) per year.

For monitoring live performance of one parameter and visualize only its current value with respect to minimum and maximum values, use the Gage widget (PRO version only).Live Demo >>

Chart for detailed data analysis

But what if you deal with really huge data that can’t be successfully analysed as a whole? In this case, you can narrow the output by the related RangeChart, which allows for a deeper insight apart from mere comparison.

RangeChart can be built upon all types of line charts but exists as a separate Webix UI widget and is available in the PRO edition only.

Types of charts that reveal composition

The main goal of composition charts is to show how smaller categories relate to each other within a larger notion.

Pie charts, for instance, can clearly demonstrate the percentage taken by this or that category. Only you should note that the whole amount should be equal to 100%. There are three pie chart types in Webix: Pie, 3DPie and Donut.

If categories are comprised of sub categories, you can have a glance at the Treemap. This is a hierarchical heat map that uses proportional squares rather than slices, which can in turn consist of dependant areas.

But Pie chart types and Treemap are not enough if you need to analyze part-to-whole relationship within several notions that are compared.

For example, you may need to compare the sales rates of a company over the period of ten years and you want to see which products compose the overall value each year. Then stacked charts will come to help you. Webix offers three types of charts for these needs: StackedBar, StackedBarH and StackedArea chart:

What’s in Webix charts?

You can compare multiple categories of data thanks to support for a series chart;

You can combine several types of charts with the same scale into one view;

You can group data in the charts and export them to PNG.

And if your mind is not satisfied and you strive for other visualization tools (but still love Webix), you can check for available integrations with third party libraries that offer such types of charts as:

Summing up

In this article we have covered almost all the visualization tools of the Webix framework except for the Organogram, which is used to build hierarchical schemes.

As you can see, Webix offers different types of charts. There are a lot of solutions to create a comparison chart and a lot of possibilities to show data composition. Distribution and relation charts can also be built with Webix. In addition, you can monitor data in dynamics. Isn’t it cool?

But things become real when you touch them and work with them. So while charts are as beautiful as toys on the Christmas tree, they can be admired the whole year round. So, browse the samples, check the docs about data chart and you will be able to create your perfect chart till Easter!

I’m joking guys, much earlier, but still — Happy Holidays and best wishes from the whole Webix team!