> ## Documentation Index
> Fetch the complete documentation index at: https://clickhouse.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Conectar Chartbrew con ClickHouse

> Conecta Chartbrew con ClickHouse para crear dashboards en tiempo real e informes para clientes.

export const Image = ({img, alt, size = "lg"}) => {
  const normalizedSize = ["sm", "md", "lg"].includes(size) ? size : "lg";
  return <div className={`ch-image-${normalizedSize}`}>
      <Frame>
        <img src={img} alt={alt} />
      </Frame>
    </div>;
};

export const CommunityMaintainedBadge = () => {
  return <div className="CommunityMaintainedBadge">
            <div className="CommunityMaintainedIcon">
            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 256 256">
                <path d="M244.8,150.4a8,8,0,0,1-11.2-1.6A51.6,51.6,0,0,0,192,128a8,8,0,0,1-7.37-4.89,8,8,0,0,1,0-6.22A8,8,0,0,1,192,112a24,24,0,1,0-23.24-30,8,8,0,1,1-15.5-4A40,40,0,1,1,219,117.51a67.94,67.94,0,0,1,27.43,21.68A8,8,0,0,1,244.8,150.4ZM190.92,212a8,8,0,1,1-13.84,8,57,57,0,0,0-98.16,0,8,8,0,1,1-13.84-8,72.06,72.06,0,0,1,33.74-29.92,48,48,0,1,1,58.36,0A72.06,72.06,0,0,1,190.92,212ZM128,176a32,32,0,1,0-32-32A32,32,0,0,0,128,176ZM72,120a8,8,0,0,0-8-8A24,24,0,1,1,87.24,82a8,8,0,1,0,15.5-4A40,40,0,1,0,37,117.51,67.94,67.94,0,0,0,9.6,139.19a8,8,0,1,0,12.8,9.61A51.6,51.6,0,0,1,64,128,8,8,0,0,0,72,120Z"></path>
            </svg>
        </div>
            Mantenimiento de la comunidad
        </div>;
};

<CommunityMaintainedBadge />

[Chartbrew](https://chartbrew.com) es una plataforma de visualización de datos que te permite crear dashboards y supervisar los datos en tiempo real. Admite múltiples fuentes de datos, entre ellas ClickHouse, y ofrece una interfaz sin código para crear gráficos e informes.

<div id="goal">
  ## Objetivo
</div>

En esta guía, conectarás Chartbrew a ClickHouse, ejecutarás una consulta SQL y crearás una visualización. Al final, tu dashboard podría verse así:

<Image img="https://mintcdn.com/private-7c7dfe99/PWQnWTwcu17exYX2/images/integrations/data-visualization/chartbrew_01.webp?fit=max&auto=format&n=PWQnWTwcu17exYX2&q=85&s=7976a96696512f77018ba05775788b7b" size="lg" alt="Dashboard de Chartbrew" width="2400" height="1289" data-path="images/integrations/data-visualization/chartbrew_01.webp" />

<Tip>
  **Agrega algunos datos**

  Si no tienes un conjunto de datos con el que trabajar, puedes agregar uno de los conjuntos de datos de ejemplo. Esta guía utiliza el conjunto de datos [UK Price Paid](/docs/es/get-started/sample-datasets/uk-price-paid).
</Tip>

<Steps>
  <Step title="Reúne los datos de tu conexión" id="1-gather-your-connection-details">
    Para conectarse a ClickHouse con HTTP(S), necesita esta información:

    | Parámetro(s)              | Descripción                                                                                                                       |
    | ------------------------- | --------------------------------------------------------------------------------------------------------------------------------- |
    | `HOST` and `PORT`         | Normalmente, el puerto es 8443 cuando se usa TLS o 8123 cuando no se usa TLS.                                                     |
    | `DATABASE NAME`           | De forma predeterminada, existe una base de datos llamada `default`; use el nombre de la base de datos a la que desea conectarse. |
    | `USERNAME` and `PASSWORD` | De forma predeterminada, el nombre de usuario es `default`. Use el nombre de usuario adecuado para su caso de uso.                |

    Los detalles de su servicio de ClickHouse Cloud están disponibles en la consola de ClickHouse Cloud.
    Seleccione un servicio y haga clic en **Connect**:

    <div className="ch-image-md">
      <Frame>
        <img src="https://mintcdn.com/private-7c7dfe99/CFFsa2agBPbviR4r/images/_snippets/cloud-connect-button.webp?fit=max&auto=format&n=CFFsa2agBPbviR4r&q=85&s=ec0a298a33ca841e947fa5e8bae47362" alt="Botón Connect del servicio de ClickHouse Cloud" width="998" height="932" data-path="images/_snippets/cloud-connect-button.webp" />
      </Frame>
    </div>

    Elija **HTTPS**. Los detalles de conexión se muestran en un comando `curl` de ejemplo.

    <div className="ch-image-md">
      <Frame>
        <img src="https://mintcdn.com/private-7c7dfe99/CFFsa2agBPbviR4r/images/_snippets/connection-details-https.webp?fit=max&auto=format&n=CFFsa2agBPbviR4r&q=85&s=cb0fbd98aa2b5b7ca484c9f53395ee07" alt="Detalles de conexión HTTPS de ClickHouse Cloud" width="1320" height="1184" data-path="images/_snippets/connection-details-https.webp" />
      </Frame>
    </div>

    Si usa ClickHouse autogestionado, los detalles de conexión los establece su administrador de ClickHouse.
  </Step>

  <Step title="Conecta Chartbrew a ClickHouse" id="2-connect-chartbrew-to-clickhouse">
    1. Inicia sesión en [Chartbrew](https://chartbrew.com/login) y ve a la pestaña **Connections**.

    2. Haz clic en **Create connection** y selecciona **ClickHouse** entre las opciones de bases de datos disponibles.

           <Image img="https://mintcdn.com/private-7c7dfe99/PWQnWTwcu17exYX2/images/integrations/data-visualization/chartbrew_02.webp?fit=max&auto=format&n=PWQnWTwcu17exYX2&q=85&s=4131cc42b6327105fb22d11dfcd32929" size="lg" alt="Selecciona la conexión de ClickHouse en Chartbrew" width="1600" height="1132" data-path="images/integrations/data-visualization/chartbrew_02.webp" />

    3. Introduce los datos de conexión de tu base de datos de ClickHouse:

       * **Display Name**: Un nombre para identificar la conexión en Chartbrew.
       * **Host**: El hostname o la dirección IP de tu servidor de ClickHouse.
       * **Port**: Normalmente, `8443` para conexiones HTTPS.
       * **Database Name**: La base de datos a la que quieres conectarte.
       * **Username**: Tu nombre de usuario de ClickHouse.
       * **Password**: Tu contraseña de ClickHouse.

           <Image img="https://mintcdn.com/private-7c7dfe99/PWQnWTwcu17exYX2/images/integrations/data-visualization/chartbrew_03.webp?fit=max&auto=format&n=PWQnWTwcu17exYX2&q=85&s=69925fe1dfdb2ef8377a2c46c7ca3a18" size="lg" alt="Configuración de la conexión de ClickHouse en Chartbrew" width="1600" height="1141" data-path="images/integrations/data-visualization/chartbrew_03.webp" />

    4. Haz clic en **Test connection** para comprobar que Chartbrew puede conectarse a ClickHouse.

    5. Si la prueba se realiza correctamente, haz clic en **Save connection**. Chartbrew recuperará automáticamente el esquema desde ClickHouse.

           <Image img="https://mintcdn.com/private-7c7dfe99/PWQnWTwcu17exYX2/images/integrations/data-visualization/chartbrew_04.webp?fit=max&auto=format&n=PWQnWTwcu17exYX2&q=85&s=8f67660c923c5227096da4c7e038db9c" size="lg" alt="Esquema JSON de ClickHouse en Chartbrew" width="1600" height="855" data-path="images/integrations/data-visualization/chartbrew_04.webp" />
  </Step>

  <Step title="Crea un conjunto de datos y ejecuta una consulta SQL" id="3-create-a-dataset-and-run-a-sql-query">
    1. Haz clic en el botón **Create dataset** o ve a la pestaña **Datasets** para crear uno.
    2. Selecciona la conexión de ClickHouse que creaste antes.

    <Image img="https://mintcdn.com/private-7c7dfe99/PWQnWTwcu17exYX2/images/integrations/data-visualization/chartbrew_05.webp?fit=max&auto=format&n=PWQnWTwcu17exYX2&q=85&s=d064adfea3e39be056cdb16f7adf8e30" size="lg" alt="Selecciona la conexión de ClickHouse para el conjunto de datos" width="1600" height="725" data-path="images/integrations/data-visualization/chartbrew_05.webp" />

    Escribe una consulta SQL para recuperar los datos que quieres visualizar. Por ejemplo, esta consulta calcula el precio medio pagado por año a partir del conjunto de datos `uk_price_paid`:

    ```sql theme={null}
    SELECT toYear(date) AS year, avg(price) AS avg_price
    FROM uk_price_paid
    GROUP BY year
    ORDER BY year;
    ```

    <Image img="https://mintcdn.com/private-7c7dfe99/PWQnWTwcu17exYX2/images/integrations/data-visualization/chartbrew_07.webp?fit=max&auto=format&n=PWQnWTwcu17exYX2&q=85&s=5ddd5f1ffb71a65354cb00953bfccd01" size="lg" alt="Consulta SQL de ClickHouse en Chartbrew" width="1600" height="928" data-path="images/integrations/data-visualization/chartbrew_07.webp" />

    Haz clic en **Run query** para recuperar los datos.

    Si no sabes bien cómo escribir la consulta, puedes usar el asistente de IA de Chartbrew para generar consultas SQL basadas en el esquema de tu base de datos.

    <Image img="https://mintcdn.com/private-7c7dfe99/PWQnWTwcu17exYX2/images/integrations/data-visualization/chartbrew_06.webp?fit=max&auto=format&n=PWQnWTwcu17exYX2&q=85&s=bff62660b2e116aa5c642d312e3d487f" size="lg" alt="Asistente de IA SQL de ClickHouse en Chartbrew" width="2400" height="1184" data-path="images/integrations/data-visualization/chartbrew_06.webp" />

    Una vez recuperados los datos, haz clic en **Configure dataset** para configurar los parámetros de visualización.
  </Step>

  <Step title="Crea una visualización" id="4-create-a-visualization">
    1. Define una métrica (valor numérico) y una dimensión (valor categórico) para la visualización.
    2. Previsualiza el conjunto de datos para asegurarte de que los resultados de la consulta tienen la estructura correcta.
    3. Elige un tipo de gráfico (por ejemplo, gráfico de líneas, gráfico de barras o gráfico circular) y añádelo a tu dashboard.
    4. Haz clic en **Complete dataset** para finalizar la configuración.

    <Image img="https://mintcdn.com/private-7c7dfe99/PWQnWTwcu17exYX2/images/integrations/data-visualization/chartbrew_08.webp?fit=max&auto=format&n=PWQnWTwcu17exYX2&q=85&s=ea7e3735656b4138e4687a38f32b2521" size="lg" alt="Dashboard de Chartbrew con datos de ClickHouse" width="2400" height="1068" data-path="images/integrations/data-visualization/chartbrew_08.webp" />

    Puedes crear tantos conjuntos de datos como quieras para visualizar distintos aspectos de tus datos. Con estos conjuntos de datos, puedes crear varios dashboards para hacer seguimiento de distintas métricas.

    <Image img="https://mintcdn.com/private-7c7dfe99/PWQnWTwcu17exYX2/images/integrations/data-visualization/chartbrew_01.webp?fit=max&auto=format&n=PWQnWTwcu17exYX2&q=85&s=7976a96696512f77018ba05775788b7b" size="lg" alt="Dashboard de Chartbrew con datos de ClickHouse" width="2400" height="1289" data-path="images/integrations/data-visualization/chartbrew_01.webp" />
  </Step>

  <Step title="Automatiza las actualizaciones de datos" id="5-automate-data-updates">
    Para mantener tu dashboard actualizado, puedes programar actualizaciones automáticas de datos:

    1. Haz clic en el icono del calendario junto al botón de actualización del conjunto de datos.
    2. Configura el intervalo de actualización (por ejemplo, cada hora o cada día).
    3. Guarda la configuración para habilitar la actualización automática.

    <Image img="https://mintcdn.com/private-7c7dfe99/PWQnWTwcu17exYX2/images/integrations/data-visualization/chartbrew_09.webp?fit=max&auto=format&n=PWQnWTwcu17exYX2&q=85&s=ffe9e46d7d16433d8e2f1c7f71266c62" size="lg" alt="Configuración de actualización del conjunto de datos en Chartbrew" width="1600" height="899" data-path="images/integrations/data-visualization/chartbrew_09.webp" />
  </Step>
</Steps>

<div id="learn-more">
  ## Más información
</div>

Para obtener más información, consulta la entrada del blog sobre [Chartbrew y ClickHouse](https://chartbrew.com/blog/visualizing-clickhouse-data-with-chartbrew-a-step-by-step-guide/).
