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.

Table 1. Variwide Chart Properties
Property 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.

Variwide Chart at Runtime

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