> ## 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.

# توصيل Chartbrew بـ ClickHouse

> صِل Chartbrew بـ ClickHouse لإنشاء لوحات معلومات لحظية وتقارير للعملاء.

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>
            تتم صيانته من قِبل المجتمع
        </div>;
};

<CommunityMaintainedBadge />

[Chartbrew](https://chartbrew.com) هي منصة لتصور البيانات تتيح لك إنشاء لوحات معلومات ومراقبة البيانات في الوقت الفعلي. وهي تدعم مصادر بيانات متعددة، بما في ذلك ClickHouse، وتوفّر واجهة لا تتطلب كتابة شيفرة لإنشاء المخططات والتقارير.

<div id="goal">
  ## الهدف
</div>

في هذا الدليل، ستربط Chartbrew بـ ClickHouse، وتنفّذ استعلام SQL، وتنشئ تصورًا. وفي النهاية، قد تبدو لوحة المعلومات لديك على النحو التالي:

<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="لوحة معلومات Chartbrew" width="2400" height="1289" data-path="images/integrations/data-visualization/chartbrew_01.webp" />

<Tip>
  **أضف بعض البيانات**

  إذا لم تكن لديك مجموعة بيانات للعمل عليها، يمكنك إضافة أحد الأمثلة. يستخدم هذا الدليل مجموعة بيانات [UK Price Paid](/docs/ar/get-started/sample-datasets/uk-price-paid).
</Tip>

<Steps>
  <Step title="اجمع تفاصيل الاتصال الخاصة بك" id="1-gather-your-connection-details">
    للاتصال بـ ClickHouse باستخدام HTTP(S)، تحتاج إلى المعلومات التالية:

    | المعلمات                  | الوصف                                                                                         |
    | ------------------------- | --------------------------------------------------------------------------------------------- |
    | `HOST` and `PORT`         | عادةً ما يكون المنفذ 8443 عند استخدام TLS، أو 8123 عند عدم استخدام TLS.                       |
    | `DATABASE NAME`           | افتراضيًا، توجد قاعدة بيانات باسم `default`. استخدم اسم قاعدة البيانات التي تريد الاتصال بها. |
    | `USERNAME` and `PASSWORD` | افتراضيًا، يكون اسم المستخدم `default`. استخدم اسم المستخدم المناسب لحالة الاستخدام لديك.     |

    تتوفر تفاصيل خدمة ClickHouse Cloud الخاصة بك في ClickHouse Cloud console.
    حدِّد خدمة ثم انقر على **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="زر Connect لخدمة ClickHouse Cloud" width="998" height="932" data-path="images/_snippets/cloud-connect-button.webp" />
      </Frame>
    </div>

    اختر **HTTPS**. ستظهر تفاصيل الاتصال في مثال لأمر `curl`.

    <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="تفاصيل اتصال HTTPS لخدمة ClickHouse Cloud" width="1320" height="1184" data-path="images/_snippets/connection-details-https.webp" />
      </Frame>
    </div>

    إذا كنت تستخدم ClickHouse مُدارًا ذاتيًا، فسيُحدِّد مسؤول ClickHouse لديك تفاصيل الاتصال.
  </Step>

  <Step title="ربط Chartbrew بـ ClickHouse" id="2-connect-chartbrew-to-clickhouse">
    1. سجّل الدخول إلى [Chartbrew](https://chartbrew.com/login) ثم انتقل إلى علامة التبويب **Connections**.

    2. انقر على **Create connection** ثم اختر **ClickHouse** من خيارات قواعد البيانات المتاحة.

           <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="اختيار اتصال ClickHouse في Chartbrew" width="1600" height="1132" data-path="images/integrations/data-visualization/chartbrew_02.webp" />

    3. أدخل تفاصيل الاتصال بقاعدة بيانات ClickHouse:

       * **Display Name**: اسم لتمييز الاتصال في Chartbrew.
       * **Host**: اسم المضيف أو عنوان IP لخادم ClickHouse.
       * **Port**: يكون عادةً `8443` لاتصالات HTTPS.
       * **Database Name**: قاعدة البيانات التي تريد الاتصال بها.
       * **Username**: اسم مستخدم ClickHouse الخاص بك.
       * **Password**: كلمة مرور 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="إعدادات اتصال ClickHouse في Chartbrew" width="1600" height="1141" data-path="images/integrations/data-visualization/chartbrew_03.webp" />

    4. انقر على **Test connection** للتحقق من أن Chartbrew يستطيع الاتصال بـ ClickHouse.

    5. إذا نجح الاختبار، فانقر على **Save connection**. سيجلب Chartbrew المخطط تلقائيًا من 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="مخطط JSON لـ ClickHouse في Chartbrew" width="1600" height="855" data-path="images/integrations/data-visualization/chartbrew_04.webp" />
  </Step>

  <Step title="إنشاء مجموعة بيانات وتشغيل استعلام SQL" id="3-create-a-dataset-and-run-a-sql-query">
    1. انقر على زر **Create dataset** أو انتقل إلى علامة التبويب **Datasets** لإنشاء مجموعة بيانات.
    2. حدّد اتصال ClickHouse الذي أنشأته سابقًا.

    <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="تحديد اتصال ClickHouse لمجموعة البيانات" width="1600" height="725" data-path="images/integrations/data-visualization/chartbrew_05.webp" />

    اكتب استعلام SQL لاسترجاع البيانات التي تريد تصورها. على سبيل المثال، يحسب هذا الاستعلام متوسط السعر المدفوع سنويًا من مجموعة البيانات `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="استعلام ClickHouse SQL في Chartbrew" width="1600" height="928" data-path="images/integrations/data-visualization/chartbrew_07.webp" />

    انقر على **Run query** لجلب البيانات.

    إذا لم تكن متأكدًا من كيفية كتابة الاستعلام، يمكنك استخدام **المساعد المدعوم بالذكاء الاصطناعي في Chartbrew** لإنشاء استعلامات SQL استنادًا إلى مخطط قاعدة بياناتك.

    <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="مساعد ClickHouse AI لـ SQL في Chartbrew" width="2400" height="1184" data-path="images/integrations/data-visualization/chartbrew_06.webp" />

    بعد استرجاع البيانات، انقر على **Configure dataset** لإعداد معلمات التصور.
  </Step>

  <Step title="إنشاء تصور" id="4-create-a-visualization">
    1. حدّد مقياسًا (قيمة رقمية) وبُعدًا (قيمة فئوية) لتصورك.
    2. عاين مجموعة البيانات للتأكد من أن نتائج الاستعلام مهيكلة بشكل صحيح.
    3. اختر نوع المخطط (مثل مخطط خطي أو مخطط أعمدة أو مخطط دائري) وأضفه إلى لوحة المعلومات.
    4. انقر على **Complete dataset** لإنهاء الإعداد.

    <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="لوحة معلومات Chartbrew مع بيانات ClickHouse" width="2400" height="1068" data-path="images/integrations/data-visualization/chartbrew_08.webp" />

    يمكنك إنشاء أي عدد تريده من مجموعات البيانات لتصور جوانب مختلفة من بياناتك. وباستخدام مجموعات البيانات هذه، يمكنك إنشاء عدة لوحات معلومات لمتابعة مقاييس مختلفة.

    <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="لوحة معلومات Chartbrew مع بيانات ClickHouse" width="2400" height="1289" data-path="images/integrations/data-visualization/chartbrew_01.webp" />
  </Step>

  <Step title="أتمتة تحديثات البيانات" id="5-automate-data-updates">
    للحفاظ على تحديث لوحة المعلومات، يمكنك جدولة تحديثات تلقائية للبيانات:

    1. انقر على أيقونة التقويم بجانب زر تحديث مجموعة البيانات.
    2. اضبط الفاصل الزمني للتحديث (مثل كل ساعة أو كل يوم).
    3. احفظ الإعدادات لتمكين التحديث التلقائي.

    <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="إعدادات تحديث مجموعة البيانات في Chartbrew" width="1600" height="899" data-path="images/integrations/data-visualization/chartbrew_09.webp" />
  </Step>
</Steps>

<div id="learn-more">
  ## تعرّف على المزيد
</div>

لمزيد من التفاصيل، اطّلع على تدوينة المدونة حول [Chartbrew وClickHouse](https://chartbrew.com/blog/visualizing-clickhouse-data-with-chartbrew-a-step-by-step-guide/).
