|
| 1 | +--- |
| 2 | +slug: /use-cases/observability/clickstack/dashboards |
| 3 | +title: 'Visualizations and Dashboards with ClickStack' |
| 4 | +sidebar_label: 'Dashboards' |
| 5 | +pagination_prev: null |
| 6 | +pagination_next: null |
| 7 | +description: 'Visualizations and Dashboards with ClickStack' |
| 8 | +--- |
| 9 | + |
| 10 | +import Image from '@theme/IdealImage'; |
| 11 | +import visualization_1 from '@site/static/images/use-cases/observability/hyperdx-visualization-1.png'; |
| 12 | +import visualization_2 from '@site/static/images/use-cases/observability/hyperdx-visualization-2.png'; |
| 13 | +import visualization_3 from '@site/static/images/use-cases/observability/hyperdx-visualization-3.png'; |
| 14 | +import dashboard_1 from '@site/static/images/use-cases/observability/hyperdx-dashboard-1.png'; |
| 15 | +import dashboard_2 from '@site/static/images/use-cases/observability/hyperdx-dashboard-2.png'; |
| 16 | +import dashboard_3 from '@site/static/images/use-cases/observability/hyperdx-dashboard-3.png'; |
| 17 | +import dashboard_4 from '@site/static/images/use-cases/observability/hyperdx-dashboard-4.png'; |
| 18 | +import dashboard_5 from '@site/static/images/use-cases/observability/hyperdx-dashboard-5.png'; |
| 19 | +import dashboard_filter from '@site/static/images/use-cases/observability/hyperdx-dashboard-filter.png'; |
| 20 | +import dashboard_save from '@site/static/images/use-cases/observability/hyperdx-dashboard-save.png'; |
| 21 | +import dashboard_search from '@site/static/images/use-cases/observability/hyperdx-dashboard-search.png'; |
| 22 | +import dashboard_edit from '@site/static/images/use-cases/observability/hyperdx-dashboard-edit.png'; |
| 23 | +import dashboard_clickhouse from '@site/static/images/use-cases/observability/hyperdx-dashboard-clickhouse.png'; |
| 24 | +import dashboard_services from '@site/static/images/use-cases/observability/hyperdx-dashboard-services.png'; |
| 25 | +import dashboard_kubernetes from '@site/static/images/use-cases/observability/hyperdx-dashboard-kubernetes.png'; |
| 26 | + |
| 27 | +ClickStack supports visualizing events, with built-in support for charting in HyperDX. These charts can be added to dashboards for sharing with other users. |
| 28 | + |
| 29 | +Visualizations can be created from traces, metrics, logs, or any user-defined wide event schemas. |
| 30 | + |
| 31 | +## Creating visualizations {#creating-visualizations} |
| 32 | + |
| 33 | +The **Chart Explorer** interface in HyperDX allows users to visualize metrics, traces, and logs over time, making it easy to create quick visualizations for data analysis. This interface is also reused when creating dashboards. The following section walks through the process of creating a visualization using Chart Explorer. |
| 34 | + |
| 35 | +Each visualization begins by selecting a **data source**, followed by a **metric**, with optional **filter expressions** and **group by** fields. Conceptually, visualizations in HyperDX map to a SQL `GROUP BY` query under the hood — users define metrics to aggregate across selected dimensions. |
| 36 | + |
| 37 | +For example, you might chart the number of errors (`count()`) grouped by service name. |
| 38 | + |
| 39 | +For the examples below, we use the remote dataset available at [sql.clickhouse.com](https://sql.clickhouse.com), described in the guide ["Remote Demo Dataset"](/use-cases/observability/clickstack/getting-started/remote-demo-data). **Users can also reproduce these examples by visiting [play-clickstack.clickhouse.com](https://play-clickstack.clickhouse.com).** |
| 40 | + |
| 41 | +<VerticalStepper headerLevel="h3"> |
| 42 | + |
| 43 | +### Navigate to Chart Explorer {#navigate-chart-explorer} |
| 44 | + |
| 45 | +Select `Chart Explorer` from the left menu. |
| 46 | + |
| 47 | +<Image img={visualization_1} alt="Chart Explorer" size="lg"/> |
| 48 | + |
| 49 | +### Create visualization {#create-visualization} |
| 50 | + |
| 51 | +In the example below, we chart the average request duration over time per service name. This requires the user to specify a metric, a column (which can be a SQL expression), and an aggregation field. |
| 52 | + |
| 53 | +Select the `Line/Bar` visualization type from the top menu, followed by the `Traces` (or `Demo Traces` if using [play-clickstack.clickhouse.com](https://play-clickstack.clickhouse.com)) dataset. Complete the following values: |
| 54 | + |
| 55 | +- Metric: `Average` |
| 56 | +- Column: `Duration/1000` |
| 57 | +- Where: `<empty>` |
| 58 | +- Group By: `ServiceName` |
| 59 | +- Alias: `Average Time` |
| 60 | + |
| 61 | +<Image img={visualization_2} alt="Simple visualization" size="lg"/> |
| 62 | + |
| 63 | +Note that users can filter events using either a SQL `WHERE` clause or Lucene syntax and set the time frame over which events should be visualized. Multiple series are also supported. |
| 64 | + |
| 65 | +For example, filter by the service `frontend` by adding the filter `ServiceName:"frontend"`. Add a second series for the count of events over time with the alias `Count` by clicking `Add Series`. |
| 66 | + |
| 67 | +<Image img={visualization_3} alt="Simple visualization 2" size="lg"/> |
| 68 | + |
| 69 | +:::note |
| 70 | +Visualizations can be created from any data source — metrics, traces, or logs. ClickStack treats all of these as wide events. Any **numeric column** can be charted over time, and **string**, **date**, or **numeric** columns can be used for groupings. |
| 71 | + |
| 72 | +This unified approach allows users to build dashboards across telemetry types using a consistent, flexible model. |
| 73 | +::: |
| 74 | + |
| 75 | +</VerticalStepper> |
| 76 | + |
| 77 | +## Creating dashboards {#creating-dashboards} |
| 78 | + |
| 79 | +Dashboards provide a way to group related visualizations, enabling users to compare metrics and explore patterns side by side to identify potential root causes in their systems. These dashboards can be used for ad-hoc investigations or saved for ongoing monitoring. |
| 80 | + |
| 81 | +Global filters can be applied at the dashboard level, automatically propagating to all visualizations within that dashboard. This allows for consistent drill-down across charts and simplifies correlation of events across services and telemetry types. |
| 82 | + |
| 83 | +We create a dashboard with two visualizations below using the log and trace data sources. These steps can be reproduced on [play-clickstack.clickhouse.com](https://play-clickstack.clickhouse.com) or locally by connecting to the dataset hosted on [sql.clickhouse.com](https://sql.clickhouse.com), as described in the guide ["Remote Demo Dataset"](/use-cases/observability/clickstack/getting-started/remote-demo-data). |
| 84 | + |
| 85 | +<VerticalStepper headerLevel="h3"> |
| 86 | + |
| 87 | +### Navigate to Dashboards {#navigate-dashboards} |
| 88 | + |
| 89 | +Select `Dashboards` from the left menu. |
| 90 | + |
| 91 | +<Image img={dashboard_1} alt="Create Dashboard" size="lg"/> |
| 92 | + |
| 93 | +By default, dashboards are temporary to support ad-hoc investigations. |
| 94 | + |
| 95 | +If using your own HyperDX instance you can ensure this dashboard can later be saved, by clicking `Create New Saved Dashboard`. This option will not be available if using the read-only environment [play-clickstack.clickhouse.com](https://play-clickstack.clickhouse.com). |
| 96 | + |
| 97 | +### Create a visualization – average request time by service {#create-a-tile} |
| 98 | + |
| 99 | +Select `Add New Tile` to open the visualization creation panel. |
| 100 | + |
| 101 | +Select the `Line/Bar` visualization type from the top menu, followed by the `Traces` (or `Demo Traces` if using [play-clickstack.clickhouse.com](https://play-clickstack.clickhouse.com)) dataset. Complete the following values to create a chart showing the average request duration over time per service name: |
| 102 | + |
| 103 | +- Chart Name: `Average duration by service` |
| 104 | +- Metric: `Average` |
| 105 | +- Column: `Duration/1000` |
| 106 | +- Where: `<empty>` |
| 107 | +- Group By: `ServiceName` |
| 108 | +- Alias: `Average Time` |
| 109 | + |
| 110 | +Click the **play** button before clicking `Save`. |
| 111 | + |
| 112 | +<Image img={dashboard_2} alt="Create Dashboard Visualization" size="lg"/> |
| 113 | + |
| 114 | +Resize the visualization to occupy the full width of the dashboard. |
| 115 | + |
| 116 | +<Image img={dashboard_3} alt="Dashboard with visuals" size="lg"/> |
| 117 | + |
| 118 | +### Create a visualization – events over time by service {#create-a-tile-2} |
| 119 | + |
| 120 | +Select `Add New Tile` to open the visualization creation panel. |
| 121 | + |
| 122 | +Select the `Line/Bar` visualization type from the top menu, followed by the `Logs` (or `Demo Logs` if using [play-clickstack.clickhouse.com](https://play-clickstack.clickhouse.com)) dataset. Complete the following values to create a chart showing the count of events over time per service name: |
| 123 | + |
| 124 | +- Chart Name: `Event count by service` |
| 125 | +- Metric: `Count of Events` |
| 126 | +- Where: `<empty>` |
| 127 | +- Group By: `ServiceName` |
| 128 | +- Alias: `Count of events` |
| 129 | + |
| 130 | +Click the **play** button before clicking `Save`. |
| 131 | + |
| 132 | +<Image img={dashboard_4} alt="Dashboard Visualization 2" size="lg"/> |
| 133 | + |
| 134 | +Resize the visualization to occupy the full width of the dashboard. |
| 135 | + |
| 136 | +<Image img={dashboard_5} alt="Dashboard with visuals 2" size="lg"/> |
| 137 | + |
| 138 | +### Filter dashboard {#filter-dashboards} |
| 139 | + |
| 140 | +Lucene or SQL filters, along with the time range, can be applied at the dashboard level and will automatically propagate to all visualizations. |
| 141 | + |
| 142 | +<Image img={dashboard_filter} alt="Dashboard with filtering" size="lg"/> |
| 143 | + |
| 144 | +To demonstrate, apply the Lucene filter `ServiceName:"frontend"` to the dashboard and modify the time window to cover the Last 3 hours. Note how the visualizations now reflect data only from the `frontend` service. |
| 145 | + |
| 146 | +The dashboard will be auto-saved. To set the dashboard name, select the title and modify it before clicking `Save Name`. |
| 147 | + |
| 148 | +<Image img={dashboard_save} alt="Dashboard save" size="lg"/> |
| 149 | + |
| 150 | +</VerticalStepper> |
| 151 | + |
| 152 | +## Dashboards - editing visualizations {#dashboards-editing-visualizations} |
| 153 | + |
| 154 | +To remove, edit, or duplicate a visualization, hover over it and use the corresponding action buttons. |
| 155 | + |
| 156 | +<Image img={dashboard_edit} alt="Dashboard edit" size="lg"/> |
| 157 | + |
| 158 | +## Dashboard listing and search {#dashboard-listing-search} |
| 159 | + |
| 160 | +Dashboards are accessible from the left-hand menu, with built-in search to quickly locate specific dashboards. |
| 161 | + |
| 162 | +<Image img={dashboard_search} alt="Dashboard search" size="sm"/> |
| 163 | + |
| 164 | +## Presets {#presets} |
| 165 | + |
| 166 | +HyperDX is deployed with out-of-the-box dashboards. |
| 167 | + |
| 168 | +### ClickHouse dashboard {#clickhouse-dashboard} |
| 169 | + |
| 170 | +This dashboard provides visualizations for monitoring ClickHouse. To navigate to this dashboard, select it from the left menu. |
| 171 | + |
| 172 | +<Image img={dashboard_clickhouse} alt="ClickHouse dashboard" size="lg"/> |
| 173 | + |
| 174 | +This dashboard uses tabs to separate monitoring of **Selects**, **Inserts**, and **ClickHouse Infrastructure**. |
| 175 | + |
| 176 | +:::note Required system table access |
| 177 | +This dashboard queries the ClickHouse [system tables](/operations/system-tables) to expose key metrics. The following grants are required: |
| 178 | + |
| 179 | +`GRANT SHOW COLUMNS, SELECT(CurrentMetric_MemoryTracking, CurrentMetric_S3Requests, ProfileEvent_OSCPUVirtualTimeMicroseconds, ProfileEvent_OSReadChars, ProfileEvent_OSWriteChars, ProfileEvent_S3GetObject, ProfileEvent_S3ListObjects, ProfileEvent_S3PutObject, ProfileEvent_S3UploadPart, event_time) ON system.metric_log` |
| 180 | + |
| 181 | +`GRANT SHOW COLUMNS, SELECT(active, database, partition, rows, table) ON system.parts` |
| 182 | + |
| 183 | +`GRANT SHOW COLUMNS, SELECT(event_date, event_time, memory_usage, normalized_query_hash, query, query_duration_ms, query_kind, read_rows, tables, type, written_bytes, written_rows) ON system.query_log` |
| 184 | + |
| 185 | +`GRANT SHOW COLUMNS, SELECT(event_date, event_time, hostname, metric, value) ON system.transposed_metric_log` |
| 186 | +::: |
| 187 | + |
| 188 | +### Services dashboard {#services-dashboard} |
| 189 | + |
| 190 | +The Services dashboard displays currently active services based on trace data. This requires users to have collected traces and configured a valid Traces data source. |
| 191 | + |
| 192 | +Service names are auto-detected from the trace data, with a series of prebuilt visualizations organized across three tabs: HTTP Services, Database, and Errors. |
| 193 | + |
| 194 | +Visualizations can be filtered using Lucene or SQL syntax, and the time window can be adjusted for focused analysis. |
| 195 | + |
| 196 | +<Image img={dashboard_services} alt="ClickHouse services" size="lg"/> |
| 197 | + |
| 198 | +### Kubernetes dashboard {#kubernetes-dashboard} |
| 199 | + |
| 200 | +This dashboard allows users to explore Kubernetes events collected via OpenTelemetry. It includes advanced filtering options, enabling users to filter by Kubernetes Pod, Deployment, Node name, Namespace, and Cluster, as well as perform free-text searches. |
| 201 | + |
| 202 | +Kubernetes data is organized across three tabs for easy navigation: Pods, Nodes, and Namespaces. |
| 203 | + |
| 204 | +<Image img={dashboard_kubernetes} alt="ClickHouse kubernetes" size="lg"/> |
0 commit comments