Dashboard visualization types

This article outlines the types of visualizations available to use in dashboards, and shows you how to create an example of each visualization type. For instructions on building a dashboard, see Tutorial: Create a dashboard.

Note

To optimize performance, charts can only render 10k elements on the canvas. Otherwise, visualizations may be truncated.

Area visualization

Area visualizations combine the line and bar visualizations to show how one or more groups’ numeric values change over the progression of a second variable, typically that of time. They are often used to show sales funnel changes through time.

Configuration values: For this area visualization example, the following values were set:

• Title: Total price and order year by order priority and clerk

• X-axis:

  • Field: o_orderdate

  • Scale Type: Temporal

  • Transform: Yearly

  • Axis title: Order year

• Y-axis:

  • Field: o_totalprice

  • Axis title: Total price

  • Scale Type: Quantitative

  • Transform: Sum

• Group by:

  • Field: o_orderpriority

  • Legend title: Order priority

• Filter

  • Field: TPCH orders.o_clerk

SQL query: For this area visualization, the following SQL query was used to generate the data set named TPCH orders.

SELECT * FROM samples.tpch.orders

Bar chart

Bar charts represent the change in metrics over time or across categories and show proportionality, similar to a pie visualization.

Configuration values: For this bar visualization example, the following values were set:

• Title: Total price and order month by order priority and clerk

• X-axis:

  • Field: o_orderdate

  • Transform: Monthly

  • Scale Type: Temporal

  • Axis title: Order month

• Y-axis:

  • Field: o_totalprice

  • Scale Type: Quantitative

  • Transform: Sum

  • Axis title: Total price

• Group by:

  • Field: o_orderpriority

  • Legend title: Order priority

• Filter

  • Field: TPCH orders.o_clerk

SQL query: For this bar visualization, the following SQL query was used to generate the data set named TPCH orders.

SELECT * FROM samples.tpch.orders

Combo chart

Combo charts combine line and bar charts to present the changes over time with proportionality.

Note

Combo charts support backend aggregations, providing support for queries returning more than 64K rows of data without truncation of the result set.

Configuration values: For this combo chart visualization, the following values were set:

• X-axis: ps_partkey

  • Scale Type: Quantitative

• Y-axis:

  • Bar: ps_availqty

  • Aggregation type: SUM

  • Line: ps_supplycost

  • Aggregation type: AVG

• Color by Y-Series:

  • Sum of ps_availqty

  • Average ps_supplycost

SQL query: For this combo chart visualization, the following SQL query was used to generate the data set.

SELECT * FROM samples.tpch.partsupp

Dual-axis combo chart

You can use combo charts to show two different y-axes. With your combo chart widget selected, click the kebab menu on the Y axis settings in the chart configuration panel. Turn on the Enable dual axis option.

Configuration values: For this combo chart, the Enable dual axis option is on. The other configurations are set as follows:

• X-axis: tpep_pickup_datetime

  • Scale Type: Temporal

  • Transform: Weekly

• Y-axis:

  • Left Y-axis (Bar): trip_distance

    • Transform: AVG

  • Right Y-axis (Line): fare_amount

    • Transform: AVG

Color by Y-series:

• Average trip_distance

  • Average fare_amount

SQL query: The following SQL query was used to generate the data set:

SELECT * FROM samples.nyctaxi.trips

Counter visualization

Counters display a single value prominently, with an option to compare them against a target value. To use counters, specify which row of data to display on the counter visualization for the Value Column and Target Column.

Configuration values: For this counter visualization example, the following values were set:

• Title: Orders: Target amount vs. actual amount by date

• Value:

  • Field: avg(o_totalprice)

  • Value row number: 1

• Target:

  • Field: avg(o_totalprice)

  • Value row number: 2

• Filter

  • Field: TPCH orders.o_orderdate

SQL query: For this counter visualization, the following SQL query was used to generate the data set named TPCH orders_target.

SELECT o_orderdate, avg(o_totalprice)
FROM samples.tpch.orders
GROUP BY 1
ORDER BY 1

Line visualization

Line visualizations present the change in one or more metrics over time.

Configuration values: For this line visualization example, the following values were set:

• Title: Average price and order year by order priority and clerk

• X-axis:

  • Field: o_orderdate

  • Transform: Yearly

  • Scale Type: Temporal

  • Axis title: Order year

• Y-axis:

  • Field: o_totalprice

  • Transform: Average

  • Scale Type: Quantitative

  • Axis title: Average price

• Group by:

  • Field: o_orderpriority

  • Legend title: Order priority

• Filter

  • Field: TPCH orders.o_clerk

SQL query: For this bar visualization visualization, the following SQL query was used to generate the data set named TPCH orders.

SELECT * FROM samples.tpch.orders

Heatmap chart

Heatmap charts blend features of bar charts, stacking, and bubble charts allowing you to visualize numerical data using colors. A common color palette for a heatmap shows the highest values using warmer colors, like orange or red, and the lowest values using cooler colors, like blue or purple.

For example, the following heatmap visualizes the most frequently occurring distances of taxi rides on each day and groups the results by the day of the week, distance, and total fare.

Note

Heatmap charts support backend aggregations, providing support for queries returning more than 64K rows of data without truncation of the result set.

Configuration values: For this heatmap chart visualization, the following values were set:

• X column (dataset column): o_orderpriority

• Y columns (dataset column): o_orderstatus

• Color column:

  • Dataset column: o_totalprice

  • Aggregation type: Average

• X-axis name (override default value): Order priority

• Y-axis name(override default value): Order status

• Color scheme (override default value): YIGnBu

SQL query: For this heatmap chart visualization, the following SQL query was used to generate the data set.

SELECT * FROM samples.tpch.orders

Histogram chart

A histogram plots the frequency that a given value occurs in a dataset. A histogram helps you to understand whether a dataset has values that are clustered around a small number of ranges or are more spread out. A histogram is displayed as a bar chart in which you control the number of distinct bars (also called bins).

Note

Histogram charts support backend aggregations, providing support for queries returning more than 64K rows of data without truncation of the result set.

Configuration values: For this histogram chart visualization, the following values were set:

• X column (dataset column): o_totalprice

• Number of bins: 20

• X-axis name (override default value): Total price

Configuration options: For histogram chart configuration options, see histogram chart configuration options.

SQL query: For this histogram chart visualization, the following SQL query was used to generate the data set.

select * from samples.tpch.orders

Pie visualization

Pie visualizations show proportionality between metrics. They are not meant for conveying time series data.

Configuration values: For this pie visualization example, the following values were set:

• Title: Total price by order priority and clerk

• Angle:

  • Field: o_totalprice

  • Transform: Sum

  • Axis title: Total price

• Group by:

  • Field: o_orderpriority

  • Legend title: Order priority

• Filter

  • Field: TPCH orders.o_clerk

SQL query: For this pie visualization, the following SQL query was used to generate the data set named TPCH orders.

SELECT * FROM samples.tpch.orders

Pivot visualization

A pivot visualization aggregates records from a query result into a tabular display. It’s similar to PIVOT or GROUP BY statements in SQL. You configure the pivot visualization with drag-and-drop fields.

Note

For performance reasons, pivot tables only support rendering 100 columns x 100 rows.

Configuration values: For this pivot visualization example, the following values were set:

• Title: Line item quantity by return flag and ship mode by supplier

• Rows:

  • Field: l_returnflag

• Columns:

  • Field: l_shipmode

• Cell

  • Dataset:

  • Field: l_quantity

  • Transform: Sum

• Filter

  • Field: TPCH lineitem.l_supplierkey

SQL query: For this pivot visualization, the following SQL query was used to generate the data set named TPCH lineitem.

SELECT * FROM samples.tpch.lineitem

Scatter visualization

Scatter visualizations are commonly used to show the relationship between two numerical variables. You can encode the third dimension with color to show how the numerical variables differ across groups.

Configuration values: For this scatter visualization example, the following values were set:

• Title: Total price and quantity by ship mode and supplier

• X-axis:

  • Field: l_quantity

  • Axis title: Quantity

  • Scale type: Quantitative

  • Transform: None

• Y-axis:

  • Field: l_extendedprice

  • Scale type: Quantitative

  • Transform: None

  • Axis title: Price

• Group by:

  • Field: l_shipmode

  • Legend title: Ship mode

• Filter

  • Field: TPCH lineitem.l_supplierkey

SQL query: For this scatter visualization, the following SQL query was used to generate the data set named TPCH lineitem.

SELECT * FROM samples.tpch.lineitem

Table visualization

The table visualization shows data in a standard table but allows you to manually reorder, hide, and format the data.

Configuration values: For this table visualization example, the following values were set:

• Title: Line item summary by supplier

• Columns:

  • Display row number: Enabled

  • Field: l_orderkey

  • Field: l_extendedprice

    • Display as: Number

    • Number format: $0.00

  • Field: l_discount

    • Display as: Number

    • Number format: %0.00

  • Field: l_tax

    • Display as: Number

    • Number format: %0.00

  • Field: l_shipdate

  • Field: l_shipmode

• Filter

  • Field: TPCH lineitem.l_supplierkey

SQL query: For this table visualization, the following SQL query was used to generate the data set named TPCH lineitem.

SELECT * FROM samples.tpch.lineitem