Document toolboxDocument toolbox

Stacked column chart widgets

About stacked column chart widgets

The stacked column chart widget is a version of the column chart widget in which the different series or sets of series are stacked in the same column instead of being represented as separate columns.

These types of charts are useful when you want to compare several groups, putting in contrast total values across categories.

What data do I need for this widget?

If the source query groups events, it must do so using one or more fields to produce groups of series to be stacked along the x-axis. It must also contain at least one aggregated value (such as a count, average, maximum, mean, etc.), which will be used as possible metrics for the y-axis to measure the magnitude of the series.

If the source query does not group events, the metric for the y-axis will be automatically selected using the first of the numeric fields in the query. You will be able to change this in the widget's visual settings.

Widget settings

To edit the widget settings, you must first activate Edit mode.

Click the widget title bar to open its settings. Alternatively, the settings are accessible via the Ellipsis icon → Properties. The widget settings are contained in three tabs, Data, Visual, and Raw.

The settings in the Data and Raw tabs are described in the Create a widget article. These are the Visual settings for the stacked column chart:

Category

Setting

Description

Category

Setting

Description

Fields

X-Axis

This will default to the eventdate field making the x-axis a timeline. You can change this by selecting a different field.

If the query used contains more than one field, you can select them in the same dropdown to represent their sets of unique values together in the same axis.

Multi-axis:

You can also select fields in the dropdown immediately below (Select…) to represent their sets of unique values separately in a separate axis. An extra dropdown will keep appearing below for additional axes as long as there are fields remaining to select (axes can contain several fields but each field can be used only once).

Y-Axis (Number)

The values of this field are used to plot the y-axis and must be metrics.

If the query used contains more than one suitable field for this axis, you can select them in the same dropdown to represent their values as a unified scale in the same axis.

Multi-axis:

You can also select fields in the dropdown immediately below (Select…) to represent their values as a separate scale in a separate axis. An extra dropdown will keep appearing below for additional axes as long as there are suitable fields remaining to select (axes can contain several fields but each field can be used only once).

Series

Choose fields to correlate their values with those of the fields chosen for the axes. This plots multiple columns in the chart to generate data partitioning and show data distribution. When plotting multiple series, use the Max series setting below to specify a maximum number of them (see below for the setting).

Fill gaps

Exclude boundary periods

If your query has a grouping clause, there might be incomplete periods at the beginning or end of the graph depending on the selected time range. To prevent any possible misinterpretation derived from that, you can decide what to do with them:

  • None: neither of the periods will be hidden, allowing you to see the real situation with incomplete periods in your time range.

  • Both periods: both the first and last periods will be hidden, allowing you to focus only on the full periods in your time range.

  • First period: only the first period will be hidden, allowing you to see exactly where your meaningful data starts.

  • Last period: only the last period will be hidden, allowing you to see exactly where your meaningful data ends.

Fill gaps

If your query has a grouping clause, there will be periods of time where no data is received. You can decide how to draw this point:

  • as null - leaves the empty values as null and they do not have nodes representing them on the chart

  • as zero - plots the empty values as zero and they have nodes representing them on the chart

  • connected - represents on the chart only the segment comprised between the first and last nodes with values.

General

Inverted

This toggle invert the x and y axes, switching between a vertical and horizontal layout for the bars.

Max Series

This is the maximum number of columns to plot on the chart. This is done to avoid overcrowding and to maintain readability.

  • Max series: specify a maximum number of series.

  • Ascending/descending: select whether to sort from ascending or descending order.

  • Maximum values: choose between values, number of events, or the sum of events for the max series.

Axis Properties

X-Axis

For each field that contributes to the x-axis, enter a Title and data Type.

The Title is simply a label to display for the axis.

The Type that you select here will be applied to the values used for the x-axis.

  • In a datetime axis, the numbers are given in milliseconds, and tick marks are placed on appropriate values like full hours or days.

  • In a category axis, the point names of the chart's series are used for categories.

  • Linear is useful in situations where there is a direct correlation between variables. With this option, the x-axis displays a scale with a uniform distribution of its values.

  • Logarithmic is useful when there are enormous differences in group values making it difficult to display the data. This changes the scale of the x-axis so that the ticks from left to right represent larger value jumps.

 

Y-Axis

For each field that contributes to the y-axis, enter a Title and data Type.

The Title is simply a label to display for the axis.

The Type that you select here will be applied to the values used for the y-axis.

  • In a datetime axis, the numbers are given in milliseconds, and tick marks are placed on appropriate values like full hours or days.

  • In a category axis, the point names of the chart's series are used for categories.

  • Linear is useful in situations where there is a direct correlation between variables. With this option, the x-axis displays a scale with a uniform distribution of its values.

  • Logarithmic is useful when there are enormous differences in group values making it difficult to display the data. This changes the scale of the y-axis so that the ticks from bottom to top represent larger value jumps.

You can decide the maximum and minimum values to be displayed in the y-axis in the Max displayed and Min displayed fields. If you don't enter any value, the limits will be automatically calculated.

Stacking settings

Default stacking

The series that will be stacked by default when constructing the chart, which are all the series of the fields used.

Custom stacking

You can add new groups by clicking the + sign, which will be represented in the chart as a new column next to the each of the default stacked columns.

You must specify the name and the series to be stacked for each group.

  • Group name: insert a meaningful name that helps you identify it.

  • Stacked series: click the drop-down and choose the series you want to stack. Those you add to the group are represented in the newly created column of the chart while those you don’t remain in the default stacked column.
    Series cannot be in two groups at the same time so they will be removed from the default stacking as you add them to a group. If all of them are added to the group, the default stacking will disappear. Similarly, when you create several groups, series will not be available to select if they are already added to another group, so you need to remove them first.

Series

 

 

 

 

For each data series, this group of settings enables you to customize their individual characteristics.

ID

Unique, internal identifier for this data series.

Name

The label for the series. This will appear in the tooltip and in the chart legend.

Marker

Enabled: when the toggle is activated, the data points on the line will become visible, enabling you to observe their exact positions.

Radius: write the size of the data points in pixels, or use the arrows to increase or decrease it.

Color

Select the color for the data series.

Line Width

This is the width of the line in pixels.

Dash Style

Choose a dashed line style for the selected data series.

Type

Select display style for the selected series. Choose from Line, Spline, Column, Area, and Area + Spline.

Stack Group

In the case of stacked charts, this is the equivalent to the Custom settings explained above but in a decentralized fashion. That is, applying the setting to each series in their own section instead of a single section where you can apply the setting to all the series.

You can either select an existing group or create a new one. A group is available to select as long as it is used for at least one series. To create a new one, simply click inside the field, write the desired name, and press the Enter key or click the Create ”Name” field that appears right below.

Legend

Horizontal alignment

Select the horizontal alignment of the legend that indicates the different series. Choose center, right or left.

Vertical alignment

Select the vertical alignment of the legend. Choose bottom, top or middle.

Legend layout

Select the layout alignment of the legend. Choose horizontal or vertical.

Size

The range of values ​​(from 16px to 320px).

Plot options

Series

The Stacking menu allows you to show series as an absolute value (Normal) or as a Percentage. When percentages are used, the stacked columns cover the entire y-axis to represent the complete range of values. Columns are then adjusted in size along the y-axis in proportion to the percentage they represent of the total.

Tips for using a stacked column chart widget

Here are a few tips to get the most out of your chart.

  • Move your mouse over the chart to display a tooltip that contains detailed information about the series plotted in the chart.

  • Click and drag across a section of the chart to zoom to the time period in the chart. Click Reset zoom to go back to the default view.

  • Hover over a data series in the chart legend to dim the rest of them down in the chart or click it to hide it or show it. You can also click the Hide all Series / Show all series button at the top right corner to hide / show all the series in the chart.

Query example

This is the source query used and the fields mapped to generate the widget shown above, which shows a comparison of the total connections per method and city:

query(from siem.logtrust.web.activity where isnotnull(city) where not isempty(city) group every - by city, country, method select count() as count)

X-axis

method

Y-axis

count

Series

city

This is the source query used and the fields mapped for another example, which shows a comparison of the connections per city over time:

query(from siem.logtrust.web.activity where isnotnull(city) where not isempty(city) group every 1h by city, country, method select count() as count)

X-axis

eventdate

Y-axis

count

Series

city