مخخطات في الداشبورد جانغو

وعليكم السلام،

حسب ما فهمته أنت تقصد charts، أي الرسوم البيانية.  توجد مكتبات في Python لإنشاءها، وأشهرها هي Matplotlib. لكن بما أنه يجب إظهارها في الواجهة الأمامية، فالآن لم يعد هذا عمل Python بل صار عمل JavaScript. لذلك، يجب الآن استخدام مكتبات JavaScript تساعد في إنشاء هذه المخططات. من بين هذه المكتبات: Chart.js.

ما يجب أن تقوم به من الواجهة الخلفية هي أن تنشئ واجهة برمجة تطبيقات (API) بسيطة، ثم من الواجهة الأمامية تحضر البيانات وترسم المخططات باستخدام المكتبة التي ذكرتها.

بالمناسبة، إذا كان الهدف من مشروعك هو فقط عرض بيانات في داشبورد، فقد لا تحتاج إلى مشروع Django، بل قد يكون الأنسب لك هو استخدام مكتبة Streamlit، فهي مكتبة Python تساعدك على إنشاء مخططات وعرض بيانات تفاعلية بسرعة حتى لو لم تكن تعرف شيئا في تقنيات الويب!

في حال كنت تسطتيع التعامل مع جافا سكربت يوجد الكثير من المكاتب والحلول المساعدة مثل canvasjs او Chart.js

حيث تقدم هذه المواقع خدمات ومساعدات لانواع مخططات كثيرة ففي canvasjs :

تستطيع التجول واختيار المخطط المناسب لك كالتالي :

وبعد اختيارك للمخطط المطلوب يمكن تنزيله بالصيغة التي  تناسبك ان كان javaScript او react  او غيرها كالتالي

ولديك خيار اخر اذا كنت تعرف مكتبة plotly في بايثون تقدم الكثير والكثير من انواع المخططات وتستخدم بشكل شائع في تحليل البيانات 

حيث ساعطيك مثال لطريقة مكاملتها مع جانغو لانها تعمل معك بشكل منفصل ايضا عن طريق النوت بوك حتى :

ففي التوت بوك يمكن اظهار مخطط ال Line Chart:

import plotly.express as px

df = px.data.gapminder().query("country=='Canada'")
fig = px.line(df, x="year", y="lifeExp", title='Life expectancy in Canada')
fig.show()

عن طريق التابع show يتم عرضها بشكل مباشر  في نوت بوك 

اما  لرسم مخطط Line Chart مع جانغو: 

نحتاج اولا لانشاء مشروع جانغو ومن ثم داخل ملف الviews :

نعرف نفس التابع line الموجود في المكتبة ونمرر له القيم المراد عرضها ولكن على محور الX تكون الزمن وعلى محور y تكون متوسط الاسعار لكل زمن :

كالشكل التالي:

from django.shortcuts import render
import plotly.express as px

from core.forms import DateForm
from core.models import CO2

# Create your views here.
def chart(request):
    start = request.GET.get('start')
    end = request.GET.get('end')

    co2 = CO2.objects.all()
    if start:
        co2 = co2.filter(date__gte=start)
    if end:
        co2 = co2.filter(date__lte=end)

    fig = px.line(
        x=[c.date for c in co2],
        y=[c.average for c in co2],
        title="Line Chart",
        labels={'x': 'Date', 'y': 'Average price'}
    )

    fig.update_layout(
        title={
            'font_size': 24,
            'xanchor': 'center',
            'x': 0.5
    })
    chart = fig.to_html()
    context = {'chart': chart, 'form': DateForm()}
    return render(request, 'core/chart.html', context)

 نلاحط اننا استخدمن التابع to_html وليس show وهنا سوف يتعامل معه على انه HTML ويمكن ارساله بشكل عادي الى صفحة الhtml وهمنا ارسلناهها الى الصفحة chart.html 

استقبال المخطط في صفحة  chart.html كالتالي 

{{ chart|safe }}

داخل الصفحة:
 

{% extends 'core/base.html' %}

{% block content %}
    <form method="GET" action="{% url 'chart' %}">
        {{ form.as_p }}

        <button>Submit</button>
    </form>
    
    {{ chart|safe }}
{% endblock content %}

ونحرص على وضع كلمة safe معها كي يعتبرها المتصفح امنة للظهور  ويمكن التعديل عن طريق ال CSS على شكل ومكان العرض.

ويتم استدعاء التابع chart بالطريقة التالية داخل ملف ال URL:

from django.urls import path
from . import views

urlpatterns = [
    path('', views.chart, name='chart')
]

لتظهر النتيجة كالشكل التالي :

ويوجد انواع عديدة من المخططات وتوفرها مكتبة  plotly :

1. المخططات المبعثرة (Scatter Plots): هذه المخططات رائعة لإظهار العلاقة بين متغيرين.

2. المخططات الدائرية (Pie Charts): تستخدم لإظهار نسبة أجزاء من أصل الكل.

3. مخططات الصندوق (Box Plots): تقديم ملخص مرئي لمجموعة واحدة أو أكثر من البيانات وفي عملية تحليل البيانات يمكن من خلالها اكتشاف القيم المتطرفة.

4. مخططات الكمان (Violin Plots): تشبه المخططات الصندوقية، ولكنها تظهر أيضاً الكثافة الاحتمالية.

5. مخطط الخرائط الحرارية (Heatmaps): تظهر حجم الظاهرة كاللون في بعدين (x و y). مثال: الميداليات الأولمبية التي فازت بها الدول (كوريا الجنوبية، الصين، كندا)

6. المخططات الفقاعية (Bubble Charts): مجموعة متنوعة من المخططات المبعثرة (Scatter Plots) بحجم الفقاعة الذي يمثل بُعداً إضافياً.

7. مخطط خطي (Line Chart): تمثيل رسومي يعرض المعلومات كسلسلة من نقاط البيانات، تسمى "العلامات (markers)"، متصلة بواسطة مقاطع خط مستقيم. يُستخدم عادةً لإظهار التغيرات بمرور الوقت.

8. المخططات المساحية (Area Charts): تشبه المخططات الخطية (Line Charts)، ولكن المنطقة الموجودة أسفل الخط تكون مليئة بالألوان.

9. مخطط شريطي (Bar Chart): يستخدم أشرطة ذات ارتفاعات أو أطوال مختلفة لمقارنة الكميات عبر الفئات المختلفة. ويمكن توجيهها رأسياً أو أفقياً. وهذا مثال يوضح كمية المدخنين وغير المدخنين من كلا الجنسين ذكور وإناث.

10. الخرائط الهيكلية (Treemaps): عرض البيانات الهرمية كمجموعة من المستطيلات المتداخلة.

11. مخططات جانت (Gantt Charts): غالباً ما تستخدم لإدارة المشاريع لإظهار المهام بمرور الوقت.

 ويوجد انواع اخرى لكن قمت بذكر اهمها

بتاريخ 1 ساعة قال Ali Ibrahim12:

في حال كنت تسطتيع التعامل مع جافا سكربت يوجد الكثير من المكاتب والحلول المساعدة مثل canvasjs او Chart.js

حيث تقدم هذه المواقع خدمات ومساعدات لانواع مخططات كثيرة ففي canvasjs :

تستطيع التجول واختيار المخطط المناسب لك كالتالي :

 

وبعد اختيارك للمخطط المطلوب يمكن تنزيله بالصيغة التي  تناسبك ان كان javaScript او react  او غيرها كالتالي

 

ولديك خيار اخر اذا كنت تعرف مكتبة plotly في بايثون تقدم الكثير والكثير من انواع المخططات وتستخدم بشكل شائع في تحليل البيانات 

حيث ساعطيك مثال لطريقة مكاملتها مع جانغو لانها تعمل معك بشكل منفصل ايضا عن طريق النوت بوك حتى :

ففي التوت بوك يمكن اظهار مخطط ال Line Chart:

import plotly.express as px

df = px.data.gapminder().query("country=='Canada'")
fig = px.line(df, x="year", y="lifeExp", title='Life expectancy in Canada')
fig.show()

عن طريق التابع show يتم عرضها بشكل مباشر  في نوت بوك 

اما  لرسم مخطط Line Chart مع جانغو: 

نحتاج اولا لانشاء مشروع جانغو ومن ثم داخل ملف الviews :

نعرف نفس التابع line الموجود في المكتبة ونمرر له القيم المراد عرضها ولكن على محور الX تكون الزمن وعلى محور y تكون متوسط الاسعار لكل زمن :

كالشكل التالي:

from django.shortcuts import render
import plotly.express as px

from core.forms import DateForm
from core.models import CO2

# Create your views here.
def chart(request):
    start = request.GET.get('start')
    end = request.GET.get('end')

    co2 = CO2.objects.all()
    if start:
        co2 = co2.filter(date__gte=start)
    if end:
        co2 = co2.filter(date__lte=end)

    fig = px.line(
        x=[c.date for c in co2],
        y=[c.average for c in co2],
        title="Line Chart",
        labels={'x': 'Date', 'y': 'Average price'}
    )

    fig.update_layout(
        title={
            'font_size': 24,
            'xanchor': 'center',
            'x': 0.5
    })
    chart = fig.to_html()
    context = {'chart': chart, 'form': DateForm()}
    return render(request, 'core/chart.html', context)

 نلاحط اننا استخدمن التابع to_html وليس show وهنا سوف يتعامل معه على انه HTML ويمكن ارساله بشكل عادي الى صفحة الhtml وهمنا ارسلناهها الى الصفحة chart.html 

استقبال المخطط في صفحة  chart.html كالتالي 

{{ chart|safe }}

داخل الصفحة:
 

{% extends 'core/base.html' %}

{% block content %}
    <form method="GET" action="{% url 'chart' %}">
        {{ form.as_p }}

        <button>Submit</button>
    </form>
    
    {{ chart|safe }}
{% endblock content %}

ونحرص على وضع كلمة safe معها كي يعتبرها المتصفح امنة للظهور  ويمكن التعديل عن طريق ال CSS على شكل ومكان العرض.

 

ويتم استدعاء التابع chart بالطريقة التالية داخل ملف ال URL:

from django.urls import path
from . import views

urlpatterns = [
    path('', views.chart, name='chart')
]

 

لتظهر النتيجة كالشكل التالي :

ويوجد انواع عديدة من المخططات وتوفرها مكتبة  plotly :

1. المخططات المبعثرة (Scatter Plots): هذه المخططات رائعة لإظهار العلاقة بين متغيرين.

2. المخططات الدائرية (Pie Charts): تستخدم لإظهار نسبة أجزاء من أصل الكل.

 

3. مخططات الصندوق (Box Plots): تقديم ملخص مرئي لمجموعة واحدة أو أكثر من البيانات وفي عملية تحليل البيانات يمكن من خلالها اكتشاف القيم المتطرفة.

4. مخططات الكمان (Violin Plots): تشبه المخططات الصندوقية، ولكنها تظهر أيضاً الكثافة الاحتمالية.

5. مخطط الخرائط الحرارية (Heatmaps): تظهر حجم الظاهرة كاللون في بعدين (x و y). مثال: الميداليات الأولمبية التي فازت بها الدول (كوريا الجنوبية، الصين، كندا)

6. المخططات الفقاعية (Bubble Charts): مجموعة متنوعة من المخططات المبعثرة (Scatter Plots) بحجم الفقاعة الذي يمثل بُعداً إضافياً.

 

7. مخطط خطي (Line Chart): تمثيل رسومي يعرض المعلومات كسلسلة من نقاط البيانات، تسمى "العلامات (markers)"، متصلة بواسطة مقاطع خط مستقيم. يُستخدم عادةً لإظهار التغيرات بمرور الوقت.

8. المخططات المساحية (Area Charts): تشبه المخططات الخطية (Line Charts)، ولكن المنطقة الموجودة أسفل الخط تكون مليئة بالألوان.

9. مخطط شريطي (Bar Chart): يستخدم أشرطة ذات ارتفاعات أو أطوال مختلفة لمقارنة الكميات عبر الفئات المختلفة. ويمكن توجيهها رأسياً أو أفقياً. وهذا مثال يوضح كمية المدخنين وغير المدخنين من كلا الجنسين ذكور وإناث.

10. الخرائط الهيكلية (Treemaps): عرض البيانات الهرمية كمجموعة من المستطيلات المتداخلة.

11. مخططات جانت (Gantt Charts): غالباً ما تستخدم لإدارة المشاريع لإظهار المهام بمرور الوقت.

 

 ويوجد انواع اخرى لكن قمت بذكر اهمها

شكرا لك استاذ علي وشكرا كل مرة تكون اجابتك مميزة هل يمكنني مراسلتك على الرسائل ؟؟

في حال واجهت مشكلة في انشاء الداش بورد وشكرا لك