Column chart widgets

[ 1 What data do I need for this widget? ] [ 2 Widget settings ] [ 3 Tips for using a column chart widget ] [ 4 Query example ]

The column chart widget draws columns for categories along the x-axis where the column height is in proportion to its value along the y-axis. The x-axis can include one or more grouping elements—including time—while the y-axis is a single metric, or measured value.

These types of charts are useful when you want to compare individual groups based on a single key metric.

What data do I need for this widget?

If the source query groups events, it must also contain at least one aggregated value for each group (such as a count, average, maximum, mean, etc.). These fields will be used as the possible metrics for the y-axis. Events grouped by more than one element will produce groups of columns within each category along the x-axis.

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 be in 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 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.
	Y-Axis (Number)	This is the field whose values are used to plot the y-axis. It must be a metric.
	Series	Choose a field here that will be used to plot multiple lines in the chart. When plotting multiple series on a line chart, use the Max Series setting to specify a maximum number of series.
Fill gaps	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	Toggle this ON to invert the X- and Y-axes.
General	Max Series	This is the maximum number of lines 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. 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.
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.
	Color	Select the color for the data series.
	Line Width	This is the width of the line in pixels.
	Type	Select display style for the selected series. Choose from Line, Spline, Column, Area, and Area + Spline.
	Dash Style	Choose a dashed line style for the selected data series.
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).

Tips for using a 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:

query(
from demo.ecommerce.data
group every 1h by str(statusCode), method, protocol
select count() as count
)

X-axis	eventdate
Y-axis	count
Series	method