Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
68 changes: 67 additions & 1 deletion data-explorer/dashboard-visuals.md
Original file line number Diff line number Diff line change
Expand Up @@ -13,4 +13,70 @@ To learn how to customize any dashboard visuals, see [Customize Azure Data Explo

For general information on dashboards in Azure Data Explorer, see [Visualize data with Azure Data Explorer dashboards](azure-data-explorer-dashboards.md).

[!INCLUDE [dashboard-visuals](includes/cross-repo/dashboard-visuals.md)]
## Funnel chart

A funnel chart visualizes a linear process that has sequential, connected stages. Each funnel stage represents a percentage of the total. So, in most cases, a funnel chart is shaped like a funnel, with the first stage being the largest, and each subsequent stage smaller than its predecessor.

The following example visualizes the progression of Server requests, showing the total number of sessions, requests, and their completion status. It highlights the drop-off from sessions to requests and the proportion of completed versus incomplete requests.

### Example query

```kusto
let stageOrder = datatable(Stage:string, Order:int)
[
"session_id", 1,
"request_id", 2,
"Completed", 3,
"Incomplete", 4
];

let base = TransformedServerMetrics
| where MetricType == "sqlserver_requests";

// Build the funnel table dynamically
let funnelData =
union
(base | where SQLMetrics == "session_id" | summarize Count = count() | extend Stage = "session_id"),
(base | where SQLMetrics == "request_id" | summarize Count = count() | extend Stage = "request_id"),
(base | where SQLMetrics == "percent_complete"
| summarize Count = countif(Value == 100) | extend Stage = "Completed"),
(base | where SQLMetrics == "percent_complete"
| summarize Count = countif(Value < 100) | extend Stage = "Incomplete");

// Join with stage order and order properly
funnelData
| join kind=inner stageOrder on Stage
| order by Order asc
| project Stage, Count
```

:::image type="content" source="media/adx-dashboards/funnel.png" alt-text="Screenshot of a funnel chart visualizing server requests.":::

## Heatmap

A heatmap shows values for a main variable of interest across two axis variables as a grid of colored squares.

To render a heatmap, the query must generate a table with three columns. The data used for the value field must be numeric. The columns that will be used for x and y values use the following rules:

- If the values in column *x* are in the `string` format, the values in the column *y* must also be in the `string` format.
- If the values in column *x* are in the `datetime` format, the values in the column *y* must be numeric.

> [!NOTE]
> We recommend specifying each data field, instead of letting the tool infer the data source.

The following example shows the distribution of the five most frequent SQL metrics across different metric types. It highlights which metric types are most common for each SQL metric, making it easy to identify activity patterns in the top metrics.

### Example query

```kusto
let topMetrics = TransformedServerMetrics
| summarize TotalCount = count() by SQLMetrics
| top 5 by TotalCount; // pick only the 5 most common metrics

TransformedServerMetrics
| where SQLMetrics in (topMetrics | project SQLMetrics)
| summarize Count = count() by SQLMetrics, MetricType
| project X = MetricType, Y = SQLMetrics, Value = Count
```

:::image type="content" source="media/adx-dashboards/heatmap.png" alt-text="Screenshot of a heatmap visualizing server metrics.":::
Binary file added data-explorer/media/adx-dashboards/edit-tile.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added data-explorer/media/adx-dashboards/funnel.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added data-explorer/media/adx-dashboards/heatmap.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
8 changes: 4 additions & 4 deletions data-explorer/web-ui-samples-dashboards.md
Original file line number Diff line number Diff line change
Expand Up @@ -23,19 +23,19 @@ A Microsoft account or a Microsoft Entra user identity to sign in to the [**help

1. In the **Explore sample dashboards** dialog box, choose a sample dashboard and then select **Explore**. In keeping with the previous example, select the **Metrics sample dashboard**.

:::image type="content" source="media/web-ui-samples-gallery/explore-sample-dashboards-options.png" alt-text="Screenshot of Explore dashboards samples dialog box showing sample dashboard options.":::
:::image type="content" source="media/adx-dashboards/sample-dashboards.png" alt-text="Screenshot of Explore dashboards samples dialog box showing sample dashboard options.":::

1. The dashboard opens in edit mode and presents various pre-configured tile options for customization.

:::image type="content" source="media/web-ui-samples-gallery/web-ui-dashboard-full.png" alt-text="Screenshot showing the samples gallery dashboard from the Metrics data database, with a variety of tiles." lightbox="media/web-ui-samples-gallery/web-ui-dashboard-full.png":::
:::image type="content" source="media/adx-dashboards/sample-dash-homepage.png" alt-text="Screenshot showing the samples gallery dashboard from the Metrics data database, with a variety of tiles." lightbox="media/adx-dashboards/sample-dash-homepage.png":::

1. Select the edit icon on the **CPU Usage** tile to access the underlying KQL query and formatting options. Explore the various tabs that allow you to adjust the visual display and review the results. Take some time to familiarize yourself with the features and options available.

:::image type="content" source="media/web-ui-samples-gallery/cpu-usage-tile.png" alt-text="Screenshot of the CPU usage visualization tile.":::
:::image type="content" source="media/adx-dashboards/edit-tile.png" alt-text="Screenshot of the CPU usage visualization tile.":::

1. Select **Apply changes** or **Discard changes** to save or discard your changes. This will take you back to the main dashboard.

:::image type="content" source="media/web-ui-samples-gallery/apply-or-discard-changes.png" alt-text="Screenshot of CPU usage tile edit window with options to apply or discard changes.":::
:::image type="content" source="media/adx-dashboards/save-changes.png" alt-text="Screenshot of CPU usage tile edit window with options to apply or discard changes.":::

1. Learn how to [view parameters](dashboard-parameters.md#view-parameters-list) and [customize visuals](dashboard-customize-visuals.md#customize-visuals).

Expand Down