diff --git a/data-explorer/dashboard-visuals.md b/data-explorer/dashboard-visuals.md index f65c17a8b0..24d4a47df2 100644 --- a/data-explorer/dashboard-visuals.md +++ b/data-explorer/dashboard-visuals.md @@ -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)] \ No newline at end of file +## 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."::: diff --git a/data-explorer/media/adx-dashboards/edit-tile.png b/data-explorer/media/adx-dashboards/edit-tile.png new file mode 100644 index 0000000000..cf506630f4 Binary files /dev/null and b/data-explorer/media/adx-dashboards/edit-tile.png differ diff --git a/data-explorer/media/adx-dashboards/funnel.png b/data-explorer/media/adx-dashboards/funnel.png new file mode 100644 index 0000000000..dff90ca312 Binary files /dev/null and b/data-explorer/media/adx-dashboards/funnel.png differ diff --git a/data-explorer/media/adx-dashboards/heatmap.png b/data-explorer/media/adx-dashboards/heatmap.png new file mode 100644 index 0000000000..81987db141 Binary files /dev/null and b/data-explorer/media/adx-dashboards/heatmap.png differ diff --git a/data-explorer/media/adx-dashboards/sample-dash-homepage.png b/data-explorer/media/adx-dashboards/sample-dash-homepage.png new file mode 100644 index 0000000000..01b8f324da Binary files /dev/null and b/data-explorer/media/adx-dashboards/sample-dash-homepage.png differ diff --git a/data-explorer/media/adx-dashboards/sample-dashboards.png b/data-explorer/media/adx-dashboards/sample-dashboards.png new file mode 100644 index 0000000000..90c2945e7d Binary files /dev/null and b/data-explorer/media/adx-dashboards/sample-dashboards.png differ diff --git a/data-explorer/media/adx-dashboards/save-changes.png b/data-explorer/media/adx-dashboards/save-changes.png new file mode 100644 index 0000000000..6445ec4249 Binary files /dev/null and b/data-explorer/media/adx-dashboards/save-changes.png differ diff --git a/data-explorer/web-ui-samples-dashboards.md b/data-explorer/web-ui-samples-dashboards.md index fb12ce9ee8..f4c43b78d0 100644 --- a/data-explorer/web-ui-samples-dashboards.md +++ b/data-explorer/web-ui-samples-dashboards.md @@ -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).