diff --git a/content/influxdb/cloud/visualize-data/visualization-types/mosaic.md b/content/influxdb/cloud/visualize-data/visualization-types/mosaic.md index 52e281b05..27463e4c9 100644 --- a/content/influxdb/cloud/visualize-data/visualization-types/mosaic.md +++ b/content/influxdb/cloud/visualize-data/visualization-types/mosaic.md @@ -3,7 +3,8 @@ title: Mosaic visualization list_title: Mosaic list_image: /img/influxdb/2-0-visualizations-mosaic-example.png description: > - The Mosaic visualization displays data from two or more qualitative variables. + 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. weight: 206 menu: influxdb_cloud: @@ -11,15 +12,16 @@ menu: parent: Visualization types --- -The **Mosaic** visualization displays data from two or more qualitative variables. +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. {{< img-hd src="/img/influxdb/2-0-visualizations-mosaic-example.png" alt="Mosaic data visualization" />}} Select the **Mosaic** option from the visualization dropdown in the upper left. ## Mosaic behavior -The mosaic visualization displays string values in a graph. - +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 **{{< icon "gear" >}} Customize** next to the visualization dropdown. @@ -69,3 +71,23 @@ To view **Mosaic** controls, click **{{< icon "gear" >}} Customize** next to the - **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 [Website Monitoring demo data](/influxdb/cloud/reference/sample-data/#influxdb-cloud-demo-data) +to display changes in response times for monitored URLs. +The query assigns a `responseTimeSummary` string value based on the response time range. +Use `responseTimeSummary` as the **Fill Column** in the [visualization controls](#data). + +```js +from(bucket: "Website Monitoring Bucket") + |> range(start: v.timeRangeStart, stop: v.timeRangeStop) + |> filter(fn: (r) => r._measurement == "http_response") + |> filter(fn: (r) => r._field == "response_time") + |> aggregateWindow(every: v.windowPeriod, fn: max, createEmpty: false) + |> map(fn: (r) => ({ + r with responseTimeSummary: + if r._value > 0.6 then "high" + else if r._value > 0.4 then "medium" + else "ok" + })) +``` diff --git a/content/influxdb/v2.0/visualize-data/visualization-types/mosaic.md b/content/influxdb/v2.0/visualize-data/visualization-types/mosaic.md index 5243584ae..110e11ef0 100644 --- a/content/influxdb/v2.0/visualize-data/visualization-types/mosaic.md +++ b/content/influxdb/v2.0/visualize-data/visualization-types/mosaic.md @@ -3,7 +3,8 @@ title: Mosaic visualization list_title: Mosaic list_image: /img/influxdb/2-0-visualizations-mosaic-example.png description: > - The Mosaic visualization displays data from two or more qualitative variables. + 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. weight: 206 menu: influxdb_2_0: @@ -12,15 +13,16 @@ menu: draft: true --- -The **Mosaic** visualization displays data from two or more qualitative variables. +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. {{< img-hd src="/img/influxdb/2-0-visualizations-mosaic-example.png" alt="Mosaic data visualization" />}} Select the **Mosaic** option from the visualization dropdown in the upper left. ## Mosaic behavior -The mosaic visualization displays string values in a graph. - +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 **{{< icon "gear" >}} Customize** next to the visualization dropdown. @@ -70,3 +72,16 @@ To view **Mosaic** controls, click **{{< icon "gear" >}} Customize** next to the - **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](/influxdb/v2.0/reference/sample-data/#noaa-water-sample-data) +to display changes in water levels over time. +Use `level description` as the **Fill Column** in the [visualization controls](#data). + +```js +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) +``` diff --git a/static/img/influxdb/2-0-visualizations-mosaic-example.png b/static/img/influxdb/2-0-visualizations-mosaic-example.png index 8fdee5bf0..e08b70da1 100644 Binary files a/static/img/influxdb/2-0-visualizations-mosaic-example.png and b/static/img/influxdb/2-0-visualizations-mosaic-example.png differ