Line Chart

In a line chart, data points are connected by a line to help visualize the changes in data trends over a period a time.

Operations Hub New Layout Refer to Visuals Tab for more information on the layout of widgets in Configuration Hub.
Operations Hub Classic Layout Refer to About Widgets

Line Chart Properties

Field Name Description
Line Type Select from the available list of chart line types. Each chart type provides the best visual representation based on the data and context.
  • Line (Regular): Displays data points connected by straight lines. Ideal for showing trends over time.
  • Line (Spline): A smoother version of the regular line chart, with curved lines instead of straight, providing a more fluid representation of the data.
  • Line (Step): This chart type uses step-like lines that change direction at each data point, making it useful for showing discrete changes or sudden shifts.
  • Bar (Vertical): Displays data as vertical bars, great for comparing quantities across categories.
  • Bar (Horizontal): Similar to the vertical bar chart, but the bars are horizontal. This is useful when category names are long or when you want to focus on the comparison of values rather than the time axis.
  • Area (Regular): A line chart with the area beneath the line filled in, useful for showing volume or quantity trends over time.
  • Area (Spline): Similar to the regular area chart, but with smoother curves for the lines, offering a more visually appealing way to display data.
  • Area (Step): This chart combines area and step chart types, with the area filled in and step-like lines connecting data points, ideal for showing abrupt changes in quantity or volume.
Source > Data Source See Set Up Data Binding for Widgets
Use Raw Format Select the check box to display numbers in raw format.

For example, a numeric value with 5 or more decimal places is shown as it is, and not rounded off.
Number of Decimals This option appears if you do not want to display numbers in raw format.

In that case, enter the decimal places (0-7) to consider after the decimal point to format large numbers. Based on the decimals, the value is rounded off to the nearest whole number.
Title Title name for the chart.
Subtitle Subtitle name for the chart.
Y Axis Title Title name for Y-axis.
Y Axis Limits Select the check box for Enable Limits if you want to define a data range for the Y-axis of a line chart.

By setting the minimum (Min) and maximum (Max) values for the Y-axis, you can ensure that the line chart shows data within that range, which can be useful for highlighting specific trends or patterns within the data. Enter values for the following fields:

  • Min
  • Max
X Axis Title Title name for X-axis.
X Axis Mode Format the X-axis:
  • Standard: Uses the standard format.
  • Stagger: Staggers the labels on the X-axis.
  • Rotate: Rotates the labels on X-axis.
X Axis Rotation If you choose to rotate labels, enter the degree of rotation.
X Axis Data Format Lets you choose how the data on the X-axis is displayed.
Select String:
  • to display raw values.
  • when your data is not a date. For example, if you have data representing weeks/categories (Week 2, Week 4, Week 6, etc.). This ensures the X-axis will display the numbers exactly as 2, 4, 6, 8, 10 instead of treating them as dates.
Select Date:
  • to display formatted date values.
  • when your data represents actual dates or timestamps.
X Axis Date Format This option is irrelevant if your data format is String. You should leave this field empty.

If your data format is Date, enter a valid date format to avoid displaying Epoch time.

Some examples are:
  • To show complete date and time: yyyy-MM-dd HH:mm:ss
  • Only date: yyyy-MM-dd
  • European style: dd-MM-yyyy
  • Date in text format: MM dd, yyyy
Enable Line Limits Select/Clear the check box to show/hide line limits.

If you choose to show line limits at runtime, then enter the HiHi, Hi, Lo, LoLo limit values.
Labels External When checked, the limit labels move outside the chart area.

When unchecked, the labels remain inside the chart area.
HiHi Label Enter a label name for HiHi limit.
HiHi Use the available options to configure the source values. Refer to Set Up Data Binding for Widgets.
HiHi Color Select a HiHi line color.
Hi Label Enter a label name for Hi limit.
Hi Use the available options to configure the source values. Refer to Set Up Data Binding for Widgets.
Hi Color Select a Hi line color.
Lo Label Enter a label name for Lo limit.
Lo Use the available options to configure the source values. Refer to Set Up Data Binding for Widgets.
Lo Color Select a Lo line color.
LoLo Label Enter a label name for LoLo limit.
LoLo Use the available options to configure the source values. Refer to Set Up Data Binding for Widgets.
LoLo Color Select a LoLo line color.
Legend Select the Visible check box if you want to show the chart legend.

You can also use the vertical/horizontal options to position the legend in the chart.
Crosshair Select the check box if you want to show the crosshairs in the chart.
Show Points Select the check box if you want to show data points in the chart.
Point Symbol Select from the available list of symbols to represent the points in the chart.
Stacking
  • Stacked: Lines do not intersect in this chart.
  • Full Stacked: Lines reach a total of 100% of the axis range at each point.
  • None: No stacking.
Truncate X-Axis Select the check box to truncate the X-axis labels.
Palette Provides a list of built-in themes that help apply consistent color schemes across widgets, allowing you to quickly customize their look. Each theme comes with its own set of unique colors, defining the visual appearance of the widget.
  • Selecting a Theme: Choose a theme from the dropdown list to apply a color scheme to your widget.
  • Example: If you are aiming for a light, airy design, you can choose the Pastel palette.
Note:
This feature is currently available only for a select few widgets.
Hidden Select this check box if you want to hide the widget. To show the hidden widget in Operations Hub new layout, go to Page Visuals and under Action column, select for the hidden widget. See Page Visuals Tab.

Configuring Source Values for Line Charts

When configuring a line chart using an extension query, the data retrieved from the data source is automatically arranged in the following manner: first, the Timestamp, followed by the Value, and then the Name.

Similarly, a line chart configured with an SQL query also requires these three essential fields in the exact order specified:
  • Timestamp: This data is used for the X-axis.
  • Value: This data is used for the Y-axis.
  • Name: This data is used for legend labels.
For example, if you create a stored procedure, it should return a result set with these three fields:
  • Timestamp/Week for the X-axis
  • Value for the Y-axis data
  • Name for the legend

Chart Line at Runtime

For timestamps to appear in an ascending order (oldest datetime comes first, latest comes last), the extension query Sort By parameter should contain + for timestamp.

For timestamps to appear in a descending order (latest datetime comes first, oldest comes last), the extension query Sort By parameter should contain - for timestamp.

Chart showing line limits:

Note:
When exporting a chart to JPEG or PDF at runtime, make sure your browser's zoom is set to 100% or above.