|
| 1 | +--- |
| 2 | +title: 'Connecting Chartbrew to ClickHouse' |
| 3 | +sidebar_label: 'Chartbrew' |
| 4 | +sidebar_position: 131 |
| 5 | +slug: /integrations/chartbrew-and-clickhouse |
| 6 | +keywords: ['ClickHouse', 'Chartbrew', 'connect', 'integrate', 'visualization'] |
| 7 | +description: 'Connect Chartbrew to ClickHouse to create real-time dashboards and client reports.' |
| 8 | +--- |
| 9 | + |
| 10 | +import chartbrew_01 from '@site/static/images/integrations/data-visualization/chartbrew_01.png'; |
| 11 | +import chartbrew_02 from '@site/static/images/integrations/data-visualization/chartbrew_02.png'; |
| 12 | +import chartbrew_03 from '@site/static/images/integrations/data-visualization/chartbrew_03.png'; |
| 13 | +import chartbrew_04 from '@site/static/images/integrations/data-visualization/chartbrew_04.png'; |
| 14 | +import chartbrew_05 from '@site/static/images/integrations/data-visualization/chartbrew_05.png'; |
| 15 | +import chartbrew_06 from '@site/static/images/integrations/data-visualization/chartbrew_06.png'; |
| 16 | +import chartbrew_07 from '@site/static/images/integrations/data-visualization/chartbrew_07.png'; |
| 17 | +import chartbrew_08 from '@site/static/images/integrations/data-visualization/chartbrew_08.png'; |
| 18 | +import chartbrew_09 from '@site/static/images/integrations/data-visualization/chartbrew_09.png'; |
| 19 | + |
| 20 | +import ConnectionDetails from '@site/docs/_snippets/_gather_your_details_http.mdx'; |
| 21 | +import CommunityMaintainedBadge from '@theme/badges/CommunityMaintained'; |
| 22 | +import Image from '@theme/IdealImage'; |
| 23 | + |
| 24 | +# Connecting Chartbrew to ClickHouse |
| 25 | + |
| 26 | +<CommunityMaintainedBadge/> |
| 27 | + |
| 28 | +[Chartbrew](https://chartbrew.com) is a data visualization platform that allows users to create dashboards and monitor data in real time. It supports multiple data sources, including ClickHouse, and provides a no-code interface for building charts and reports. |
| 29 | + |
| 30 | +## Goal {#goal} |
| 31 | + |
| 32 | +In this guide, you will connect Chartbrew to ClickHouse, run a SQL query, and create a visualization. By the end, your dashboard may look something like this: |
| 33 | + |
| 34 | +<Image img={chartbrew_01} size="lg" alt="Chartbrew dashboard" /> |
| 35 | + |
| 36 | +:::tip Add some data |
| 37 | +If you do not have a dataset to work with, you can add one of the examples. This guide uses the [UK Price Paid](/getting-started/example-datasets/uk-price-paid.md) dataset. |
| 38 | +::: |
| 39 | + |
| 40 | +## 1. Gather your connection details {#1-gather-your-connection-details} |
| 41 | + |
| 42 | +<ConnectionDetails /> |
| 43 | + |
| 44 | +## 2. Connect Chartbrew to ClickHouse {#2-connect-chartbrew-to-clickhouse} |
| 45 | + |
| 46 | +1. Log in to [Chartbrew](https://chartbrew.com/login) and go to the **Connections** tab. |
| 47 | +2. Click **Create connection** and select **ClickHouse** from the available database options. |
| 48 | + |
| 49 | + <Image img={chartbrew_02} size="lg" alt="Select ClickHouse connection in Chartbrew" /> |
| 50 | + |
| 51 | +3. Enter the connection details for your ClickHouse database: |
| 52 | + |
| 53 | + - **Display Name**: A name to identify the connection in Chartbrew. |
| 54 | + - **Host**: The hostname or IP address of your ClickHouse server. |
| 55 | + - **Port**: Typically `8443` for HTTPS connections. |
| 56 | + - **Database Name**: The database you want to connect to. |
| 57 | + - **Username**: Your ClickHouse username. |
| 58 | + - **Password**: Your ClickHouse password. |
| 59 | + |
| 60 | + <Image img={chartbrew_03} size="lg" alt="ClickHouse connection settings in Chartbrew" /> |
| 61 | + |
| 62 | +4. Click **Test connection** to verify that Chartbrew can connect to ClickHouse. |
| 63 | +5. If the test is successful, click **Save connection**. Chartbrew will automatically retrieve the schema from ClickHouse. |
| 64 | + |
| 65 | + <Image img={chartbrew_04} size="lg" alt="ClickHouse JSON schema in Chartbrew" /> |
| 66 | + |
| 67 | +## 3. Create a dataset and run a SQL query {#3-create-a-dataset-and-run-a-sql-query} |
| 68 | + |
| 69 | + 1. Click on the **Create dataset** button or navigate to the **Datasets** tab to create one. |
| 70 | + 2. Select the ClickHouse connection you created earlier. |
| 71 | + |
| 72 | + <Image img={chartbrew_05} size="lg" alt="Select ClickHouse connection for dataset" /> |
| 73 | + |
| 74 | + Write a SQL query to retrieve the data you want to visualize. For example, this query calculates the average price paid per year from the `uk_price_paid` dataset: |
| 75 | + |
| 76 | + ```sql |
| 77 | + SELECT toYear(date) AS year, avg(price) AS avg_price |
| 78 | + FROM uk_price_paid |
| 79 | + GROUP BY year |
| 80 | + ORDER BY year; |
| 81 | + ``` |
| 82 | + |
| 83 | + <Image img={chartbrew_07} size="lg" alt="ClickHouse SQL query in Chartbrew" /> |
| 84 | + |
| 85 | + Click **Run query** to fetch the data. |
| 86 | + |
| 87 | + If you're unsure how to write the query, you can use **Chartbrew's AI assistant** to generate SQL queries based on your database schema. |
| 88 | + |
| 89 | +<Image img={chartbrew_06} size="lg" alt="ClickHouse AI SQL assistant in Chartbrew" /> |
| 90 | + |
| 91 | +Once the data is retrieved, click **Configure dataset** to set up the visualization parameters. |
| 92 | + |
| 93 | +## 4. Create a visualization {#4-create-a-visualization} |
| 94 | + |
| 95 | + 1. Define a metric (numerical value) and dimension (categorical value) for your visualization. |
| 96 | + 2. Preview the dataset to ensure the query results are structured correctly. |
| 97 | + 3. Choose a chart type (e.g., line chart, bar chart, pie chart) and add it to your dashboard. |
| 98 | + 4. Click **Complete dataset** to finalize the setup. |
| 99 | + |
| 100 | + <Image img={chartbrew_08} size="lg" alt="Chartbrew dashboard with ClickHouse data" /> |
| 101 | + |
| 102 | + You can create as many datasets as you want to visualize different aspects of your data. Using these datasets, you can create multiple dashboards to keep track of different metrics. |
| 103 | + |
| 104 | + <Image img={chartbrew_01} size="lg" alt="Chartbrew dashboard with ClickHouse data" /> |
| 105 | + |
| 106 | +## 5. Automate data updates {#5-automate-data-updates} |
| 107 | + |
| 108 | + To keep your dashboard up-to-date, you can schedule automatic data updates: |
| 109 | + |
| 110 | + 1. Click the Calendar icon next to the dataset refresh button. |
| 111 | + 2. Configure the update interval (e.g., every hour, every day). |
| 112 | + 3. Save the settings to enable automatic refresh. |
| 113 | + |
| 114 | + <Image img={chartbrew_09} size="lg" alt="Chartbrew dataset refresh settings" /> |
| 115 | + |
| 116 | +## Learn more {#learn-more} |
| 117 | + |
| 118 | +For more details, check out the blog post about [Chartbrew and ClickHouse](https://chartbrew.com/blog/visualizing-clickhouse-data-with-chartbrew-a-step-by-step-guide/). |
0 commit comments