Cloudera Docs

Customizing visualization types

Widgets allow you to choose from a variety of visualization types and customize them based on your requirements. Each visualization type has general configurations and its own graph style configuration that can be set when creating the widget.

Configuring widget, fields and legend

The widget, data field, label field and legend are general configurations that can be set for all of the visualization types.

Name and Description

You can provide a custom name and short description about the widget. The name of the widget appears at the right top corner of the widget. The description can be viewed if it is provided by hovering over next to the widget name.

Data fields

You need to select the data fields to show on the axis of the visualization. The fields correspond to the columns of the table. You can select more than one data field to be displayed on the widget. The values of the data field are shown on the Y axis.

Label field

You have the option to select a field to show as labels. The fields correspond to the columns of the table. If the Label field is left empty, the number of records will be displayed as labels on the X axis.

Color picker

You can change the default visualization color of the selected data fields. You can open the color picker using button, and pick a color over the palette, or provide the Hex, RGBA value to a specific color. You can also choose from one of the preset colors. After clicking on Apply, the color of the selected data field is updated.

You can reset the color of the visualization using the button.

Transition duration (ms)

You can set the time for how slow or fast the data should change on the widget. The default is 250 ms. If set to 0 or left empty, the transition is skipped. The higher the time is set, the slower the visualization changes on the widget.

Visibility and position of Legend

You can enable or disable the legend on the visualization, and also choose to position the legend to the bottom or right side of the widget, or place it in the visualization.

Configuring graph style

You can customize the styles of the widgets based on how you want to visualize the data.

Visualization type: Area

You can use the Area visualization type when you want to show how the values changed over a period of time.

The following table and query was used for the Area widget:
CREATE TABLE currency_rates (
  `currency_code` VARCHAR(2147483647),
  `eur_rate` DECIMAL(6, 4),
  `rate_time` TIMESTAMP(3)
) WITH (
  'fields.currency_code.expression' = '#{Currency.code}',
  'fields.rate_time.expression' = '#{date.past ''15'',''SECONDS''}',
  'connector' = 'faker',
  'rows-per-second' = '100',
  'fields.eur_rate.expression' = '#{Number.randomDouble ''4'',''0'',''10''}'
);

SELECT * FROM currency_rates
WHERE currency_code = 'CAD'
The following configurations have been set for the Area widget:
Name CAD/EUR
Data fields eur_rate
Legend poition Inset
Line interpolation Area
Connect null enabled
Show points disabled
You can further customize the graph style of the Area widget with the following Graph style configurations:
Line interpolation
Determines the line interpolation of the visualization. You have the option to select Area-spline and Area-step for line interpolation.
When selecting Area-spline as interpolation, you can also specify the Spline interpolation which includes the following options:
  • Linear, linear-closed
  • Basis, basis-open, basis-closed
  • Cardinal, cardinal-open, cardinal-closed
  • Monotone
  • Step, step-before, step-after
Show points and Point radius
You can enable whether to show each data point in line using the Show points toggle. The size of the points can be changed using the Point radius configuration, which is set to 2.5 by default. The following example shows the enabled Show points with 4.0 Point radius:
Connect null
Using the connect null configuration, you can set if the null data points are connected or not. If enabled, the region of the null data is connected without any data point. When disabled, the data points are not connected as shown in the following example:
Flow
You can set the movement of the data by enabling or disabling the Flow function, which means the new data points flow to the chart from the right side compared to arriving periodically as processed on the widget.

Visualization type: Bar

You can use the Bar visualization type when you want to show how the data is distributed or want to compare the data between different groups.

The following table and query was used for the Bar widget:
CREATE TABLE orders (
  `order_id` INT,
  `amount` INT,
  `order_time` TIMESTAMP(3),
  `shipped` VARCHAR(2147483647),
  `canceled` VARCHAR(2147483647),
  `received` VARCHAR(2147483647),
  WATERMARK FOR `order_time` AS `order_time` - INTERVAL '15' SECOND
) WITH (
  'fields.order_time.expression' = '#{date.past ''15'',''SECONDS''}',
  'fields.amount.expression' = '#{number.numberBetween ''0'',''100''}',
  'fields.order_id.expression' = '#{number.numberBetween ''0'',''99999999''}',
  'connector' = 'faker',
  'fields.shipped.expression' = '#{number.numberBetween ''0'',''1000''}',
  'fields.received.expression' = '#{number.numberBetween ''0'',''800''}',
  'fields.canceled.expression' = '#{number.numberBetween ''0'',''500''}',
  'rows-per-second' = '100'
);

SELECT * FROM orders
The following configurations have been set for the Bar widget:
Name Orders
Data fields shipped, canceled
Legend poition Inset
Bar width 0.5
You can further customize the graph style of the Bar widget with the following Graph style configurations:
Bar width
You can specify the width of the bars on the widget by changing the default value.

Visualization type: Donut

You can use the Donut visualization type when you want to show the proportions of data within a category where the size of the pieces represent the proportion of each category.

The following table and query was used for the Donut widget:
CREATE TABLE orders (
  `order_id` INT,
  `amount` INT,
  `order_time` TIMESTAMP(3),
  `shipped` VARCHAR(2147483647),
  `canceled` VARCHAR(2147483647),
  `received` VARCHAR(2147483647),
  WATERMARK FOR `order_time` AS `order_time` - INTERVAL '15' SECOND
) WITH (
  'fields.order_time.expression' = '#{date.past ''15'',''SECONDS''}',
  'fields.amount.expression' = '#{number.numberBetween ''0'',''100''}',
  'fields.order_id.expression' = '#{number.numberBetween ''0'',''99999999''}',
  'connector' = 'faker',
  'fields.shipped.expression' = '#{number.numberBetween ''0'',''1000''}',
  'fields.received.expression' = '#{number.numberBetween ''0'',''800''}',
  'fields.canceled.expression' = '#{number.numberBetween ''0'',''500''}',
  'rows-per-second' = '100'
);

SELECT * FROM orders
The following configurations have been set for the Donut widget:
Name Orders
Data fields shipped, received
Legend poition Bottom
Show label enabled
You can further customize the graph style of the Donut widget with the following Graph style configurations:
Show label
You can enable or disable the labels on the visualization as shown in the following illustration where labels are disabled:

Visualization type: Gauge

You can use the Gauge visualization type when you want to show progress or amount compared to the maximum value.

The following table and query was used for the Gauge widget:
CREATE TABLE orders (
  `order_id` INT,
  `amount` INT,
  `order_time` TIMESTAMP(3),
  `shipped` VARCHAR(2147483647),
  `canceled` VARCHAR(2147483647),
  `received` VARCHAR(2147483647),
  WATERMARK FOR `order_time` AS `order_time` - INTERVAL '15' SECOND
) WITH (
  'fields.order_time.expression' = '#{date.past ''15'',''SECONDS''}',
  'fields.amount.expression' = '#{number.numberBetween ''0'',''100''}',
  'fields.order_id.expression' = '#{number.numberBetween ''0'',''99999999''}',
  'connector' = 'faker',
  'fields.shipped.expression' = '#{number.numberBetween ''0'',''1000''}',
  'fields.received.expression' = '#{number.numberBetween ''0'',''800''}',
  'fields.canceled.expression' = '#{number.numberBetween ''0'',''500''}',
  'rows-per-second' = '100'
);

SELECT * FROM orders
The following configurations have been set for the Gauge widget:
Name Orders
Data fields shipped, received
Legend poition Inset
Reducer Last
Show label enabled
Min 100
Max 300
You can further customize the graph style of the Gauge widget with the following Graph style configurations:
Reducer
A reducer function that will be used to reduce many fields to a single value. You have the following options to choose from:
  • Last
  • First
  • Min
  • Max
  • Total
  • All
Min, Max
You can specify the minimum and maximum value of the gauge chart.
Flip color
You can enable color switching based on the values set for minimum and maximum. When the values are larger than 75% of Max then the color of the widget changes to green. When the values are smaller than 25% of Min then the color of the widget changes to red.
Width
You can increase or decrease the width of the gauges on the widget.
Units
You can specify a unit for the displayed values on the widget.

Visualization type: Data grid

You can use the Data grid visualization type when you want to show data in a table format.

The following table and query was used for the Data grid widget:
CREATE TABLE airport_weather (
  `airport` VARCHAR(2147483647) NOT NULL,
  `temperature` VARCHAR(2147483647) NOT NULL,
  `visibility` VARCHAR(2147483647) NOT NULL,
  `eventTimestamp` TIMESTAMP(3),
  WATERMARK FOR `eventTimestamp` AS `eventTimestamp` - INTERVAL '30' SECOND,
  CONSTRAINT `PK_-991666966` PRIMARY KEY (`airport`) NOT ENFORCED
) WITH (
  'fields.eventTimestamp.expression' = '#{date.past ''30'',''SECONDS''}',
  'connector' = 'faker',
  'fields.temperature.expression' = '#{Weather.temperatureCelsius}',
  'fields.airport.expression' = '#{Aviation.airport}',
  'rows-per-second' = '100',
  'fields.visibility.expression' = '#{numerify ''###m''}'
);

SELECT * FROM airport_weather
The following configurations have been set for the Data grid widget:
Name Airport weather
Pagination enabled
Page size 10
Row height 30
Header height 36
Sortable disabled
You can further customize the graph style of the Data grid and Column configurations:
Pagination and pagination page size
You can enable and disable the pagination of the data on the visualization where the page size provides the number of rows displayed.
Floating filter and floating filter height:
You can add floating filter to the data grid which enables text, number or date based filtering of the columns. For example, you can set the floating filter to text and filter the data to start with M:
Sortable
You can enable or disable sortable columns for the data grid. You can sort the data in the filtered column by clicking on the column name so the values are in increasing or decreasing order.

Visualization type: Line

You can use the Line visualization type when you want to show how the values changed over a period of time

The following table and query was used for the Line widget:
CREATE TABLE currency_rates (
  `currency_code` VARCHAR(2147483647),
  `eur_rate` DECIMAL(6, 4),
  `rate_time` TIMESTAMP(3)
) WITH (
  'fields.currency_code.expression' = '#{Currency.code}',
  'fields.rate_time.expression' = '#{date.past ''15'',''SECONDS''}',
  'connector' = 'faker',
  'rows-per-second' = '100',
  'fields.eur_rate.expression' = '#{Number.randomDouble ''4'',''0'',''10''}'
);

SELECT * FROM currency_rates
WHERE currency_code = 'CAD'
The following configurations have been set for the Line widget:
Name CAD/EUR
Data fields eur_rate
Legend poition Bottom
Line interpolation Line
Point radius 2.5
You can further customize the graph style of the Line widget with the following Graph style configurations:
Line interpolation
Determines the line interpolation of the visualization. You have the option to select Step as well as the interpolation as shown in the following example:
Point radius
You can enable whether to show each data point in line using the Show points toggle. The size of the points can be changed using the Point radius configuration, which is set to 2.5 by default. The following example shows the enabled Show points with 4.0 Point radius:
Connect null
Using the connect null configuration, you can set if the null data points are connected or not. If enabled, the region of the null data is connected without any data point. When disabled, the data points are not connected as shown in the following example:
Flow
You can set the movement of the data by enabling or disabling the Flow function, which means the new data points flow to the chart from the right side compared to arriving periodically as processed on the widget.

Visualization type: Pie

You can use the Pie visualization type when you want to show data as a percentage compared to the whole dataset where each slice of the pie represents a category of data.

The following table and query was used for the Pie widget:
CREATE TABLE orders (
  `order_id` INT,
  `amount` INT,
  `order_time` TIMESTAMP(3),
  `shipped` VARCHAR(2147483647),
  `canceled` VARCHAR(2147483647),
  `received` VARCHAR(2147483647),
  WATERMARK FOR `order_time` AS `order_time` - INTERVAL '15' SECOND
) WITH (
  'fields.order_time.expression' = '#{date.past ''15'',''SECONDS''}',
  'fields.amount.expression' = '#{number.numberBetween ''0'',''100''}',
  'fields.order_id.expression' = '#{number.numberBetween ''0'',''99999999''}',
  'connector' = 'faker',
  'fields.shipped.expression' = '#{number.numberBetween ''0'',''1000''}',
  'fields.received.expression' = '#{number.numberBetween ''0'',''800''}',
  'fields.canceled.expression' = '#{number.numberBetween ''0'',''500''}',
  'rows-per-second' = '100'
);

SELECT * FROM orders
The following configurations have been set for the Pie widget:
Name Orders
Data fields shipped, received
Legend poition Right
Show label enabled
You can further customize the graph style of the Pie widget with the following Graph style configurations:
Show label
You can enable or disable the labels on the visualization as shown in the following illustration where labels are disabled:

Visualization type: Scatter

You can use the Scatter visualization type when you want to show the correlation between different datasets.

The following table and query was used for the Scatter widget:
CREATE TABLE airport_weather (
  `airport` VARCHAR(2147483647) NOT NULL,
  `temperature` VARCHAR(2147483647) NOT NULL,
  `visibility` VARCHAR(2147483647) NOT NULL,
  `eventTimestamp` TIMESTAMP(3),
  WATERMARK FOR `eventTimestamp` AS `eventTimestamp` - INTERVAL '30' SECOND,
  CONSTRAINT `PK_-991666966` PRIMARY KEY (`airport`) NOT ENFORCED
) WITH (
  'fields.eventTimestamp.expression' = '#{date.past ''30'',''SECONDS''}',
  'connector' = 'faker',
  'fields.temperature.expression' = '#{Weather.temperatureCelsius}',
  'fields.airport.expression' = '#{Aviation.airport}',
  'rows-per-second' = '100',
  'fields.visibility.expression' = '#{numerify ''###m''}'
);

SELECT * FROM airport_weather
The following configurations have been set for the Scatter widget:
Name Airport weather
Data fields temperature, visibility
Legend poition Bottom
Point radius 2.5
You can further customize the graph style of the Scatter widget with the following Graph style configurations:
Point radius
You can enable whether to show each data point in line using the Show points toggle. The size of the points can be changed using the Point radius configuration, which is set to 2.5 by default. The following example shows the enabled Show points with 4.0 Point radius:
Flow
You can set the movement of the data by enabling or disabling the Flow function, which means the new data points flow to the chart from the right side compared to arriving periodically as processed on the widget.

Visualization type: Spline

You can use the Spline visualization type when you want to show how the data changed over a period of time where the trends of change are emphasized.

The following table and query was used for the Spline widget:
CREATE TABLE airport_weather (
  `airport` VARCHAR(2147483647) NOT NULL,
  `temperature` VARCHAR(2147483647) NOT NULL,
  `visibility` VARCHAR(2147483647) NOT NULL,
  `eventTimestamp` TIMESTAMP(3),
  WATERMARK FOR `eventTimestamp` AS `eventTimestamp` - INTERVAL '30' SECOND,
  CONSTRAINT `PK_-991666966` PRIMARY KEY (`airport`) NOT ENFORCED
) WITH (
  'fields.eventTimestamp.expression' = '#{date.past ''30'',''SECONDS''}',
  'connector' = 'faker',
  'fields.temperature.expression' = '#{Weather.temperatureCelsius}',
  'fields.airport.expression' = '#{Aviation.airport}',
  'rows-per-second' = '100',
  'fields.visibility.expression' = '#{numerify ''###m''}'
);

SELECT * FROM airport_weather
WHERE airport = 'BIPA'
The following configurations have been set for the Spline widget:
Name Airport weather
Data fields temperature
Legend poition Right
Spline interpolation cardinal
Point radius 0
You can further customize the graph style of the Spline widget with the following Graph style configurations:
Line interpolation
You can specify the Spline interpolation which includes the following list of options:
  • Linear, linear-closed
  • Basis, basis-open, basis-closed
  • Cardinal, cardinal-open, cardinal-closed
  • Monotone
  • Step, step-before, step-after
Point radius
You can enable whether to show each data point in line using the Show points toggle. The size of the points can be changed using the Point radius configuration, which is set to 2.5 by default. The following example shows the enabled Show points with 4.0 Point radius:
Flow
You can set the movement of the data by enabling or disabling the Flow function, which means the new data points flow to the chart from the right side compared to arriving periodically as processed on the widget.