Document toolboxDocument toolbox

Line chart widgets

The line chart widget draws a standard line chart where the x-axis is always time. Use this to plot one or several series of data points over the same time period to create a line or lines. These are useful when you want to analyze how a single entity has changed over time, or to compare the evolution of similar groups over time.

This is the source query used to generate the above widget.

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

Watch the following video to see the creation process of a line chart through an example, as well as the customization of its visual settings to get the required data.

What data do I need for this widget?

If the source query groups events, it must also contain an aggregated value for each group (a count, average, maximum, mean, etc.).

If the source query does not group events, you will have to choose the metric to use for the y-axis. This is done in the widget's visual settings.

Events grouped by time and a second or third grouping element will be capable of plotting multiple lines over the selected time range.

Widget settings

The widget settings are contained in two tabs, Data and Visual. The settings in the Data tab are described in the Create a widget article.

These are the visual settings for the line chart:

CategorySettingDescription
Fields

X-AxisThis 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.
SeriesChoose 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.
GeneralDefault Type

This is the style of line chart to apply. The list of options includes Line, Spline, Column, Area, and Area + Spline. All of these chart types are plotted using an X and Y axis and this setting lets you switch between different styles to apply the one the best suits your data.

Spline is selected by default when you create this type of widget.

Max SeriesThis is the maximum number of lines to plot on the chart. This is done to avoid overcrowding and to maintain readability.
Axis PropertiesX-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.

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 enable you to customize their individual characteristics.
IDUnique, internal identifier for this data series.
NameThe label for the series. This will appear in the tooltip and in the chart legend.
ColorSelect the color for the data series.
Line WidthThis is the width of the line in pixels.
TypeSelect display style for the selected series. Choose from Line, Spline, Column, Area, and Area + Spline.
Dash StyleChoose a dashed line style for the selected data series.
LegendLegend horizontal alignmentSelect the horizontal alignment of the legend that indicates the different series. Choose center, right or left.
Legend vertical alignmentSelect the vertical alignment of the legend. Choose bottom, top or middle.
Legend layoutSelect the layout alignment of the legend. Choose horizontal or vertical.

Tips for using a line chart

Here are a few tips to get the most out of your line 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.
  • Click a data series in the chart legend to hide or show the series in the chart. 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.