Documentation

Mosaic visualization

The Mosaic visualization displays state changes in your time series data. This visualization type is useful when you want to show changes in string-based states over time.

Mosaic data visualization

Select the Mosaic option from the visualization dropdown in the upper left.

Mosaic behavior

The mosaic visualization displays colored tiles based on string values in a specified column. Each unique string value is represented by a different color.

Mosaic controls

To view Mosaic controls, click Customize next to the visualization dropdown.

Data
  • Fill Column: Select a column to fill in the mosaic tiles.
  • X Column: Select a column to display on the x-axis.
  • Y Column: Select one or more columns to display on the y-axis.
  • Time Format: Select the time format. Options include:
    • YYYY-MM-DD HH:mm:ss ZZ
    • YYYY-MM-DD hh:mm:ss a ZZ
    • DD/MM/YYYY HH:mm:ss.sss
    • DD/MM/YYYY hh:mm:ss.sss a
    • MM/DD/YYYY HH:mm:ss.sss
    • MM/DD/YYYY hh:mm:ss.sss a
    • YYYY/MM/DD HH:mm:ss
    • YYYY/MM/DD hh:mm:ss a
    • HH:mm
    • hh:mm a
    • HH:mm:ss
    • hh:mm:ss a
    • HH:mm:ss ZZ
    • hh:mm:ss a ZZ
    • HH:mm:ss.sss
    • hh:mm:ss.sss a
    • MMMM D, YYYY HH:mm:ss
    • MMMM D, YYYY hh:mm:ss a
    • dddd, MMMM D, YYYY HH:mm:ss
    • dddd, MMMM D, YYYY hh:mm:ss a
Options
  • Color Scheme: Select a color scheme to use for your graph.
X Axis
  • X Axis Label: Enter a label for the x-axis.
  • Generate X-Axis Tick Marks: Select the method to generate x-axis tick marks:
    • Auto: Select to automatically generate tick marks.
    • Custom: To customize the number of x-axis tick marks, select this option, and then enter the following:
      • Total Tick Marks: Enter the total number of timestamp ticks to display.
      • Start Tick Marks At: Enter the time, in RFC3339 format, to start displaying ticks. Use the Date Picker field to automatically generate an RFC3339 formatted timestamp for this field.
      • Tick Mark Interval: Enter the number of milliseconds in between each timestamp tick.
Y Axis
  • Y Axis Label: Enter a label for the y-axis.
  • Y Label Separator: If there’s more than one column on the y-axis, enter a delimiter to separate the label, such as a comma or space. If there’s no separator specified, the labels are a continuous string of all y columns.
  • Generate Y-Axis Tick Marks: Select the method to generate y-axis tick marks:
    • Auto: Select to automatically generate tick marks.
    • Custom: To customize the number of y-axis tick marks, select this option, and then enter the following:
      • Total Tick Marks: Enter the total number of ticks to display.
      • Start Tick Marks At: Enter the value to start ticks at.
      • Tick Mark Interval: Enter the interval in between each tick.
Hover Legend
  • Orientation: Select the orientation of the legend that appears upon hover:
    • Horizontal: Select to display the legend horizontally.
    • Vertical: Select to display the legend vertically.
  • Opacity: Adjust the legend opacity using the slider.
  • Colorize Rows: Select to display legend rows in colors.

Example query

The following query uses the NOAA water sample data to display changes in water levels over time. Use level description as the Fill Column in the visualization controls.

from(bucket: "noaa")
    |> range(start: v.timeRangeStart, stop: v.timeRangeStop)
    |> filter(fn: (r) => r._measurement == "h2o_feet")
    |> filter(fn: (r) => r._field == "level description")
    |> aggregateWindow(every: v.windowPeriod, fn: last, createEmpty: false)

Was this page helpful?

Thank you for your feedback!


The future of Flux

Flux is going into maintenance mode. You can continue using it as you currently are without any changes to your code.

Flux is going into maintenance mode and will not be supported in InfluxDB 3.0. This was a decision based on the broad demand for SQL and the continued growth and adoption of InfluxQL. We are continuing to support Flux for users in 1.x and 2.x so you can continue using it with no changes to your code. If you are interested in transitioning to InfluxDB 3.0 and want to future-proof your code, we suggest using InfluxQL.

For information about the future of Flux, see the following:

InfluxDB Cloud powered by TSM