> ## Documentation Index
> Fetch the complete documentation index at: https://private-7c7dfe99-sync-clickhouse-operator-docs-7e82242.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Dashboards

> The SQL Console's dashboards feature allows you to collect and share visualizations from saved queries.

export const Image = ({img, alt, size}) => {
  return <Frame>
      <img src={img} alt={alt} />
    </Frame>;
};

export const BetaBadge = () => {
  return <div className="betaBadge">
            <div className="betaIcon">
            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path strokeWidth="1.25" d="M7.35227 6.72731H8.29924C8.96212 6.72731 9.50189 6.86778 9.91856 7.14871C10.3384 7.42965 10.6461 7.78634 10.8419 8.21879C11.0407 8.65124 11.1402 9.09474 11.1402 9.54928C11.1402 10.0985 11.0123 10.5941 10.7566 11.036C10.5009 11.4748 10.149 11.8236 9.70076 12.0824C9.25253 12.3381 8.74116 12.4659 8.16667 12.4659C7.81629 12.4659 7.46907 12.4012 7.125 12.2718C6.78409 12.1392 6.48106 11.8883 6.21591 11.519L6.14015 11.5569V9.7008C6.14015 10.0101 6.21591 10.2958 6.36742 10.5578C6.5221 10.8198 6.7399 11.0297 7.02083 11.1875C7.30492 11.3454 7.64268 11.4243 8.03409 11.4243C8.44444 11.4243 8.79798 11.3375 9.0947 11.1639C9.39141 10.9903 9.62027 10.7614 9.78125 10.4773C9.94224 10.1932 10.0227 9.88388 10.0227 9.54928C10.0227 9.23363 9.95013 8.93533 9.80492 8.6544C9.66288 8.37031 9.46086 8.13988 9.19886 7.96311C8.94003 7.78318 8.63384 7.69322 8.2803 7.69322H7.35227V6.72731ZM7.90152 2.50383C8.3529 2.50383 8.75221 2.57643 9.09943 2.72163C9.44981 2.86683 9.74495 3.06254 9.98485 3.30875C10.2279 3.55181 10.411 3.82485 10.5341 4.12788C10.6604 4.43091 10.7235 4.74183 10.7235 5.06065C10.7235 5.45837 10.6225 5.85452 10.4205 6.24909C10.2184 6.64051 9.90909 6.96721 9.49242 7.22921C9.07576 7.48805 8.54546 7.61746 7.90152 7.61746H7.35227V6.65156H7.88258C8.24874 6.65156 8.56124 6.5758 8.82008 6.42428C9.08207 6.27277 9.28093 6.07548 9.41667 5.83243C9.55556 5.58937 9.625 5.33211 9.625 5.06065C9.625 4.62504 9.4577 4.26361 9.12311 3.97637C8.79167 3.68912 8.38447 3.54549 7.90152 3.54549C7.57955 3.54549 7.28441 3.61178 7.0161 3.74436C6.75095 3.87693 6.53788 4.06159 6.37689 4.29834C6.21907 4.53508 6.14015 4.80812 6.14015 5.11746V15.0606H5.02273V5.11746C5.02273 4.61873 5.14583 4.17207 5.39205 3.7775C5.64141 3.38293 5.98232 3.07201 6.41477 2.84474C6.85038 2.61746 7.34596 2.50383 7.90152 2.50383Z" />
            </svg>
        </div>
            <span>
                Beta feature. 
                <u>
                    <a href="/docs/beta-and-experimental-features#beta-features">
                        Learn more.
                    </a>
                </u>
            </span>
        </div>;
};

The SQL Console's dashboards feature allows you to collect and share visualizations from saved queries. Get started by saving and visualizing queries, adding query visualizations to a dashboard, and making the dashboard interactive using query parameters.

<h2 id="core-concepts">
  Core concepts
</h2>

<h3 id="query-sharing">
  Query sharing
</h3>

To share your dashboard with colleagues, be sure to share the underlying saved query. To view a visualization, you must have, at a minimum, read-only access to the underlying saved query.

<h3 id="interactivity">
  Interactivity
</h3>

Use [query parameters](/core/reference/syntax#defining-and-using-query-parameters) to make your dashboard interactive. For instance, you can add a query parameter to a `WHERE` clause to function as a filter.

You can toggle the query parameter input via the **Global** filters side pane by selecting a “filter” type in the visualization settings. You can also toggle the query parameter input by linking to another object (like a table) on the dashboard. Please see the “[configure a filter](/products/cloud/features/sql-console-features/dashboards#configure-a-filter)” section of the quick start guide below.

<h2 id="quick-start">
  Quick start
</h2>

Let's create a dashboard to monitor our ClickHouse service using the [query\_log](/core/reference/system-tables/query_log) system table.

<h2 id="quick-start-1">
  Quick start
</h2>

<h3 id="create-a-saved-query">
  Create a saved query
</h3>

If you already have saved queries to visualize, you can skip this step.

Open a new query tab. Let's write a query to count query volume by day on a service using ClickHouse system tables:

<Image img="https://mintcdn.com/private-7c7dfe99-sync-clickhouse-operator-docs-7e82242/lfzet-GCA_k-QIv-/images/cloud/dashboards/2_dashboards.png?fit=max&auto=format&n=lfzet-GCA_k-QIv-&q=85&s=59f85736c582e9554509ea72cde43749" size="md" alt="Create a saved query" border width="1600" height="1372" data-path="images/cloud/dashboards/2_dashboards.png" />

We can view the results of the query in table format or start building visualizations from the chart view. For the next step, we'll go ahead and save the query as `queries over time`:

<Image img="https://mintcdn.com/private-7c7dfe99-sync-clickhouse-operator-docs-7e82242/lfzet-GCA_k-QIv-/images/cloud/dashboards/3_dashboards.png?fit=max&auto=format&n=lfzet-GCA_k-QIv-&q=85&s=1146ddcbfac81d2e2082f4038fb1e984" size="md" alt="Save query" border width="1274" height="484" data-path="images/cloud/dashboards/3_dashboards.png" />

More documentation around saved queries can be found in the [Saving a Query section](/products/cloud/features/sql-console-features/sql-console#saving-a-query).

We can create and save another query, `query count by query kind`, to count the number of queries by query kind. Here's a bar chart visualization of the data in the SQL console.

<Image img="https://mintcdn.com/private-7c7dfe99-sync-clickhouse-operator-docs-7e82242/lfzet-GCA_k-QIv-/images/cloud/dashboards/4_dashboards.png?fit=max&auto=format&n=lfzet-GCA_k-QIv-&q=85&s=e42911321b7098e486ec27b98f5262d1" size="md" alt="A bar chart visualization of a query's results" border width="1438" height="1600" data-path="images/cloud/dashboards/4_dashboards.png" />

Now that there's two queries, let's create a dashboard to visualize and collect these queries.

<h3 id="create-a-dashboard">
  Create a dashboard
</h3>

Navigate to the Dashboards panel, and hit “New Dashboard”. After you assign a name, you'll have successfully created your first dashboard!

<Image img="https://mintcdn.com/private-7c7dfe99-sync-clickhouse-operator-docs-7e82242/lfzet-GCA_k-QIv-/images/cloud/dashboards/5_dashboards.png?fit=max&auto=format&n=lfzet-GCA_k-QIv-&q=85&s=4d69857a690de1100f71128cc3c4fc8c" size="md" alt="Create a new dashboard" border width="1466" height="778" data-path="images/cloud/dashboards/5_dashboards.png" />

<h3 id="add-a-visualization">
  Add a visualization
</h3>

There's two saved queries, `queries over time` and `query count by query kind`. Let's visualize the first as a line chart. Give your visualization a title and subtitle, and select the query to visualize. Next, select the “Line” chart type, and assign an x and y axis.

<Image img="https://mintcdn.com/private-7c7dfe99-sync-clickhouse-operator-docs-7e82242/lfzet-GCA_k-QIv-/images/cloud/dashboards/6_dashboards.png?fit=max&auto=format&n=lfzet-GCA_k-QIv-&q=85&s=e71581eb1fe6b961986fbd169a446b60" size="md" alt="Add a visualization" border width="1600" height="1097" data-path="images/cloud/dashboards/6_dashboards.png" />

Here, additional stylistic changes can also be made - like number formatting, legend layout, and axis labels.

Next, let's visualize the second query as a table, and position it below the line chart.

<Image img="https://mintcdn.com/private-7c7dfe99-sync-clickhouse-operator-docs-7e82242/lfzet-GCA_k-QIv-/images/cloud/dashboards/7_dashboards.png?fit=max&auto=format&n=lfzet-GCA_k-QIv-&q=85&s=c0c373fc0e4077cc5820341ebe5e7e51" size="md" alt="Visualize query results as a table" border width="1600" height="1048" data-path="images/cloud/dashboards/7_dashboards.png" />

You've created your first dashboard by visualizing two saved queries!

<h3 id="configure-a-filter">
  Configure a filter
</h3>

Let's make this dashboard interactive by adding a filter on query kind so you can display just the trends related to Insert queries. We'll accomplish this task using [query parameters](/core/reference/syntax#defining-and-using-query-parameters).

Click on the three dots next to the line chart, and click on the pencil button next to the query to open the in-line query editor. Here, we can edit the underlying saved query directly from the dashboard.

<Image img="https://mintcdn.com/private-7c7dfe99-sync-clickhouse-operator-docs-7e82242/lfzet-GCA_k-QIv-/images/cloud/dashboards/8_dashboards.png?fit=max&auto=format&n=lfzet-GCA_k-QIv-&q=85&s=dba21bb6afebcd7e721ec7f0a70a3454" size="md" alt="Edit the underlying query" border width="1115" height="1600" data-path="images/cloud/dashboards/8_dashboards.png" />

Now, when the yellow run query button is pressed, you'll see the same query from earlier filtered on just insert queries. Click on the save button to update the query. When you return to the chart settings, you'll be able to filter the line chart.

Now, using Global Filters on the top ribbon, you can toggle the filter by changing the input.

<Image img="https://mintcdn.com/private-7c7dfe99-sync-clickhouse-operator-docs-7e82242/lfzet-GCA_k-QIv-/images/cloud/dashboards/9_dashboards.png?fit=max&auto=format&n=lfzet-GCA_k-QIv-&q=85&s=4eb3b10943b3fda6382cb75693b6272a" size="md" alt="Adjust global filters" border width="1600" height="1045" data-path="images/cloud/dashboards/9_dashboards.png" />

Suppose you want to link the line chart's filter to the table. You can do this by going back to the visualization settings, and changing the query\_kind query parameter' value source to a table, and selecting the query\_kind column as the field to link.

<Image img="https://mintcdn.com/private-7c7dfe99-sync-clickhouse-operator-docs-7e82242/lfzet-GCA_k-QIv-/images/cloud/dashboards/10_dashboards.png?fit=max&auto=format&n=lfzet-GCA_k-QIv-&q=85&s=6e6498a51b4d6440b690c6bc98d0402f" size="md" alt="Changing query parameter" border width="1600" height="1045" data-path="images/cloud/dashboards/10_dashboards.png" />

Now, you can control the filter on the line chart directly from the queries by kind table to make your dashboard interactive.

<Image img="https://mintcdn.com/private-7c7dfe99-sync-clickhouse-operator-docs-7e82242/lfzet-GCA_k-QIv-/images/cloud/dashboards/11_dashboards.png?fit=max&auto=format&n=lfzet-GCA_k-QIv-&q=85&s=7c8e08d2eca57d146860d3ea721b1cc1" size="md" alt="Control the filter on the line chart" border width="1600" height="1012" data-path="images/cloud/dashboards/11_dashboards.png" />
