Django python web development framework: How to add charts to Django admin

Django admin full customization

Hello, today we have a Django python tutorial. sure you had searched a lot for customizing the Django python web development admin dashboard but most results are about adding search, filter, list display and …etc. Most of the Topics are not talking clearly about how to add custom HTML and js codes to Django admin. Hopefully, you came to the right place I had searched a lot like you and tested a lot until I found it. Let’s! Begin…

Requirements

Django python web development framework: Customizing Admin Dashboard

Extend change_list template

### custom_changelist.html
{% extends "admin/change_list.html" %}

{% block content %}

{% block content_title %}
{% endblock %}

<canvas id="categoryChart" style="max-height:300px;max-width:600px;"></canvas>
{{block.super}}
{% endblock content %}
  1. Extend Django admin change_list template
  2. Add block Content
  3. Before “endblock” tag insert {{ block.super }}, to construct the default template without replacing it.
  4. Add canvas for showing the chart

Django python web development framework tutorial – API: I will use Django Rest Framework.

### views.py
class OrderAPI(ListAPIView):
    authentication_classes = (TokenAuthentication,)
    permission_classes = (IsAdminUser|IsAuthenticated,)
    serializer_class = OrderSerializer

    def get_queryset(self):

        order_ref = self.request.GET.get('order_ref')

        if not self.request.user.is_staff:
            if order_ref:
                return Order.objects.filter(
                    order_ref=order_ref,
                    user=self.request.user,
                )

            else:
                return Order.objects.filter(ordered=True,user=self.request.user,).order_by('-ordered_date')

        elif order_ref:
            return Order.objects.filter(
                order_ref=order_ref
            )
        else:
            return Order.objects.filter(ordered='True').exclude(order_state='C').order_by('-ordered_date')

Note: This my API snippet it may be advanced for a tutorial because it is from a real project but you should learn advanced tutorials because this what you will face in your career.

Django python web development framework tutorial – Add the endpoint to urls.py

### urls.py
from .views import OrderAPI
urlpatterns = [
    ...
    path('order-list/',OrderAPI.as_view() ,name="orderListAPI"),
]
  1. i
  1. import your API view
  2. Add the path to the API

Django python tutorial – Make AJAX call

### custom_changelist.html
{% extends "admin/change_list.html" %}

{% block content %}

{% block content_title %}
{% endblock %}

<canvas id="categoryChart" style="max-height:300px;max-width:600px;"></canvas>

<script>

    function GetMonthName(monthNumber) {
        const months = ['December', 'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
        return months[++monthNumber];
    }

    var today = new Date();
    var mm = today.getMonth();

    const endpoint = '/api/order-list/';
    $.ajax({
        method: 'GET',
        url: endpoint,
        headers: {
            "Authorization": `Token {{request.session.UserToken}}`
        },
        success: function(data){
            console.log(data);

            let c=1;
            let labels = new Array();
            let processed_data = new Array();

            let num = 0;
            for(n in data){
                order = data[n];
                ordered_date = new Date(order.ordered_date);
                order_date = ordered_date.toUTCString();
                order_month = order_date.toString().substr(8,3);
                if(labels.indexOf(order_month) === -1){
                    num = 1;
                    processed_data.unshift(num);
                    labels.unshift(order_month);
                } else {
                    num+=1;
                    processed_data[processed_data.length-1] = num;
                    console.log(order_month);
                }
                
            };
            console.log(processed_data)
            console.log(labels)
            mainLabel = data.mainLabel;
            handleChart(labels,processed_data,mainLabel);
        },
        error: function(error){
            console.log('error');
            console.log(error);
        }
    });
    
    function handleChart(labels,processed_data,mainLabel){
        var config = {
            type: 'line',
            data: {
                datasets: [{
                    data: processed_data,
                    backgroundColor: 'rgba(227, 42, 42, 0.13)',
                    borderColor: 'red',
                    label: mainLabel,
                }],
                labels: labels
            },
            options: {
                responsive: true
            }
        };
        var ctx = document.getElementById('categoryChart').getContext('2d');
        chart = new Chart(ctx, config);
    }

</script>
{{block.super}}
{% endblock content %}

  1. make an ajax call to the endpoint ( API URL ) that we defined later in urls.py
  2. In the AJAX success method process the data as you wish then pass it to a function to handle it separately.
  3. you can change the type of chart, for example to “pie”, from var config > type. “ you can read more in chart docs to know more options “.

Last Step

### admin.py
class OrderAdmin(admin.ModelAdmin):
    change_list_template = 'Product/admin/orders_change_list.html'
    class Media:
        js = ('site_static/js/Chart.min.js','site_static/js/jquery-3.4.1.min.js')
    ...

In the last step, add the “change_list_template” variable to the model admin and assign the path of the custom “change_list” template to it that we had just made.

Note: you Add the class media to include jQuery, ChartJS files or insert <script> tag in the template.

Thanks for reading this Django python tutorial and I hope you appreciate it. if you have any questions don’t hesitate to ask me.

Suggestion: I advise you to use React js as a frontend with Django. Topic about React js framework:

3 thoughts on “Django python web development framework: How to add charts to Django admin”

  1. اولا احب اشكرك على المجهود الرائع ده و بالتوفيق دائما يا رب ،، انا عندى سؤال هل الريأكت ولا الفيو و لا الانجيولار احسن مع الديجانجو ،
    و ليه الجى كويرى لا يكفى ، يارب تلاقى عندك إجابة ،،
    ثانيا ممكن اعرف رأيك فى الشغل اللى انا عامله على الويب سايت اللى انا كاتبه تحت ،، بخلاف أنه محتاج شاشة لل
    Login , logout
    و كمان محتاج داش بورد محترمة
    و شكرا جزيلا ليك و بالتوفيق دايما

    1. 1- تقدر تستخدم الجي كويري عادي جدا بس الفرق بينها و بين الريأكت او فيو او انجيولار انهم اسهل من الجي كويري و مش كل حاجه هتعملها هارد كود غير كمان ان ريأكت و فيو و انجيولار تقدر تستخدم جزء من الكود في تطبيق الموبايل و طبعا في فروق اكبر من كدا تقدر تعمل سيرش و تعرف اكتر
      2- فين اللينك؟

  2. Pingback: Top 7 Reasons to Use React JS | Why You Should learn React js?

Leave a Reply

Your email address will not be published. Required fields are marked *