Bar Chart Widget

The Bar Chart widget displays multiple aggregate results in a single chart.

See in Figure 134, “Bar Chart” an example of how this widget may look like.

Bar Chart

Figure 134. Bar Chart


Input Format

You can use the Bar Chart widget to visualize results of the groupBy() and top() functions. Unlike a Pie Chart , a bar chart can be used to show multiple aggregates results. If you provide several aggregate functions to the function argument of groupBy() it will display one result per function.

Below is an example of how to display several series per category. Assume we have a service producing logs like the ones below:

ini
2018-10-10T01:10:11.322Z host=web01 reponseTime=10.2ms
2018-10-10T01:10:12.172Z host=web01 reponseTime=2.6ms
2018-10-10T01:10:14.122Z host=web02 reponseTime=11.5ms
2018-10-10T01:10:15.312Z host=web01 reponseTime=14.7ms
2018-10-10T01:10:16.912Z host=web03 reponseTime=10.8ms

We would like to make a bar chart showing the maximum response time and the average response time per host.

logscale
groupBy(host, function=[max(responseTime), avg(responseTime)])

If you select the Bar Chart widget type from the Widget Type dropdown, this query will produce one bar chart with three categories (one per host) and two series, one per aggregate result (_max, and _avg).

Wide or Long Input Format

Among others, the Bar Chart offers the Input Data Format property, whose Auto mode looks at the query result and automatically chooses the best interpretation of the data between long or wide data format.

  • Long data format is selected if there is more than one group field (made with groupBy([a,b])). Otherwise, Wide data input format is selected.

In Long data format mode, the first grouped field contains the categories. Subsequent grouped fields are concatenated to form the series. The first non-grouped field contains the y-value. Example:

logscale
groupBy([status, internal])
Bar Chart Selecting Long Format

Figure 135. Bar Chart Selecting Long Format


The data depicted in the below table view show what fields are visualized on the chart.

Long Format Table View

Figure 136. Long Format Table View


  • Wide: All grouped fields are concatenated and form the category (x-axis). Each non grouped field becomes a series. Example:

logscale
groupBy(status, function=[avg(contentLength, as=content), avg(time, as="time")])
Bar Chart Selecting Wide Format

Figure 137. Bar Chart Selecting Wide Format


Note

A group field is the field used as the first argument to the groupBy() function.

Attention

Charts in existing dashboards (prior to the introduction of the Auto mode) with groupBy([a,b]) queries and former default mode still set to Wide will look different as they are automatically switched to Long data input format.

Widget Properties

Click the widget's Styling option to configure the following properties.

General widget properties:

  • Title

    The title of the widget as displayed in the dashboard. As in the example Figure 134, “Bar Chart”, it could be HTTP Methods.

  • Description

    The description of the bar chart. This is free form text supporting markdown syntax. For example, This chart shows all HTTP methods, except PUT and HEAD.

    This same description will appear in the dashboard as a tool-tip by hovering over the question mark on top of the widget.

Default time properties. The default widget time only works when Shared time is toggled off by default. Save the dashboard to set the current time selection as the default.

  • Time

  • Start

  • End

Styling properties:

  • Layout

    • Type

      • Grouped — places series next to each other on a group for each category

      • Stacked — places series on top of each other for each category

  • Category-Axis

    • Show Title checkbox

      When ticked, shows the chosen title for the category (vertical) axis.

    • Title

      Gives a title to the vertical axis.

    • Text Anchor

      Controls where the labels are positioned under each bar. Valid options are:

    • Left will bring labels closer to the bars.

    • Center

    • Right

    • Angle

      Modifies the angle of the label displayed under each bar.

    • Max Length

      Sets the distance between the labels and the bottom of the widget. The distance is expressed in pixels, according to Cascading Style Sheets conventions. The more you increase the padding bottom, the more the size of the graph is reduced.

  • Value-Axis

    • Show Title checkbox

      When ticked, shows the chosen title for the value (horizontal) axis.

    • Title

      Gives a title to the horizontal axis.

    • Type

      • Linear — quantitative scales that preserve proportional differences.

      • Logarithmic — quantitative scales particularly useful for plotting data that varies over multiple orders of magnitude.

  • Legend toggle, allows to show or hide the legend in the chart. If ticked, it prompts the following properties.

    • Labels

      Options for displaying labels are:

      • Truncate — shortens the length of the series for a better visualization within the chart. It is used in case of long labels that would exceed the maximum space allowed in the chart. It is the default option. Hover the mouse over a label, then press and hold ALT to momentarily see the full series.

      • Show full — shows the full name of the series, that is, the entire value is displayed in the label or tool-tip. In case of very long labels, it might affect their visibility within the chart. Hover the mouse over a label, then press and hold ALT to momentarily see the truncated series.

    • Position

      Sets the position of the legend in the chart. Valid options are:

      • Right

      • Bottom

    • Show Title checkbox

      Allows to show or hide the legend's title.

    • Title

      Text field to enter the desired title for the legend when Show Title is ticked.

  • Bars

    • Show value on bars

      Tick the box to show the given value for each bar.

    • Category Padding

      Use this setting to control the distance between categories in the chart.

    • Series Padding

      Use this setting to control the distance between bars within a category.

    • Max Series Count

      Limits the number of series shown in a category. Series with the lowest cumulative sum across categories will be grouped into one series called "Other".

    • Input Data Format

      How to interpret the result query data. Valid options are:

      • Auto is selected by default and enables automatic detection of long or wide format — for details, see Wide or Long Input Format

      • Wide — data stored in wide format has a column for each series (variable) with the series name as the header and the values as rows. For example, this format is useful when data is grouped by a single field and multiple aggregate functions are used.

      • Long — data stored in long format has a single column for each named series (variable) and a single column with the values. For example, this format is useful when data is grouped by two fields.

  • Sorting

    The default sorting is by X axis labels.

    • Order by Series

      Specifies the name of the field to order the series by.

    • Order orders the series names alphabetically.

      Valid options are:

      • Ascending

      • Descending

  • Series

    Change the color of the bar series and assign them the title you want to see displayed in the chart.