Variwide Chart

A variwide chart is a column chart where each column has a separate width to represent the third dimension.

The variwide chart is available under INTEGRATION > CHARTS. When designing application pages, drag-and-drop GEVariwideChart to a container.

The following list of properties are specific to this widget. For common properties, refer to Page Components (Classic).

Variwide Chart Properties

Field Name Description
Title Configuration Set a title for your variwide chart.
  • Name: Enter a title name.
  • Font Size (px): For the title text, enter the font size in pixels.
  • Font Color: Select a font color for the title.
  • Width (px) - 0 equals dynamic: Enter a width for the variwide chart. If set to 0, the chart occupies 100% of its container, and fills the area in the application.
  • Height (px): Enter the height of the chart in pixels.
Label Configuration Configure the axes labels in your variwide chart.
  • Y-Axis Label: Enter a label name that appears on the chart's y-axis.
  • X-Axis Label: Enter a label name that appears on the chart's x-axis.
  • Font Size (px): For the label text, enter the font size in pixels This value applies to both the x and y axis labels.
Series Configuration Select query output values from a data source to define a data series for your chart.
Only three inputs from the query are considered for mapping in the following order:
  • first output field maps to category (x-axis)
  • second output field maps to value (y-axis)
  • third output field value represents the width of the column chart (z-axis)
Series color configuration - manual Add items to configure colors in your chart. Use this property to override the default chart series color.
  • Label: Enter the label name if you want to apply a specific color for the respective label.
  • Color: Choose a color to apply to a label (if label name is specified), or a column.

If you configure both label and color, the column with the label name always appears in the specified color.

If you configure only color, the color is applied to a column in a sequential order.

Columns with no color configuration adopt the default highcharts configuration.
Hidden Select this check box if you want to hide the plug-in. To show the hidden plug-in in Operations Hub new layout, go to Page Visuals and under Action column, select for the hidden plug-in. See Page Visuals Tab.

Variwide Chart at Runtime

In the illustrated example, pump pressure is represented by the width of each column for the respective category.