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…


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>
{% 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.

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(

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

        elif order_ref:
            return Order.objects.filter(
            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

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>


    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/';
        method: 'GET',
        url: endpoint,
        headers: {
            "Authorization": `Token {{request.session.UserToken}}`
        success: function(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;
                } else {
                    processed_data[processed_data.length-1] = num;
            mainLabel = data.mainLabel;
        error: function(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);

{% endblock content %}

  1. make an ajax call to the endpoint ( API URL ) that we defined later in
  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

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:

168 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?

  3. Hey I know this is off topic but I was wondering if you knew
    of any widgets I could add to my blog that automatically tweet my newest twitter updates.
    I’ve been looking for a plug-in like this for quite some time and was hoping maybe you would have some experience with
    something like this. Please let me know if you run into anything.
    I truly enjoy reading your blog and I look forward to your new updates.

  4. Howdy very cool web site!! Guy .. Beautiful ..
    Wonderful .. I will bookmark your site and take the feeds additionally?
    I am satisfied to search out a lot of useful information here within the post, we need develop more
    strategies on this regard, thanks for sharing.
    . . . . .

  5. [url=]best price for real viagra[/url] [url=]stromectol over the counter[/url] [url=]where to get cialis in canada[/url] [url=]best online pharmacy usa[/url] [url=]cheap tadalafil canada[/url] [url=]buy generic viagra with paypal[/url] [url=]cialis generic in india[/url] [url=]ivermectin uk[/url] [url=]buy cialis with visa[/url] [url=]cialis brand name buy online[/url]

  6. It’s a pity you don’t have a donate button! I’d definitely donate to this outstanding
    I guess for now I’ll settle for bookmarking and adding your
    RSS feed to my Google account.
    I look forward to fresh updates and will share this blog with
    my Facebook group. Chat soon!

  7. Spot on with this write-up, I truly believe that this amazing site needs far more attention.
    I’ll probably be back again to read
    through more, thanks for the information!

Leave a Reply

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