How can I add a Bar Chart to my Django based Database?

Question

Dear community members,

I really hope that you will help me to add a Bar Graph to my Django project. 1. I have a Database with around 1000 items. 2. I need to be able visualise a 3 month sales for each item when needed. Not sure what is a correct approach.

here is my models.py:

from django.db import models from math import * from decimal import *

class Itemslist(models.Model):
    item_n = models.CharField(max_length=200)
    sales_this_month = models.DecimalField(blank=True, null=True, max_digits=19, 
    decimal_places=0)
    saleslm = models.DecimalField(blank=True, null=True, max_digits=19, decimal_places=0)
    sales2m = models.DecimalField(blank=True, null=True, max_digits=19, decimal_places=0)
    sales3m = models.DecimalField(blank=True, null=True, max_digits=19, decimal_places=0)


    def __str__(self):
        return self.item_n

here is my views.py file, that as an experiment I have created, using the last solution provided:

def charts(request):
    charts = Itemslist.objects \
        .values('saleslm') \
        .annotate(lm=Count('saleslm')) \
        .annotate(m2=Count('sales2m')) \
        .annotate(3m3=Count('sales3m')) \
        .order_by('saleslm')
    return render(request, 'charts.html', {'charts': charts})

As you can see, this is not a solution I need, I was just trying to come up with at least something , and eaven that has shown me the graph with the same values. here is my hmtl code:

{% extends 'base.html' %}
{% block js %}
{% if user.is_authenticated %}
{% load loads_extra %}
{% load static %}



Logged in user: {{ user.username }}







Django Highcharts Example



{






{% endif %}
{% endblock %}

I have to create a request button for charts and then chart has to be generated with a right parameters.

Have looked at this question: Displaying multiple bar graph in django

Also have searched through this solution https://code.djangoproject.com/wiki/Charts

And looked at this article https://simpleisbetterthancomplex.com/tutorial/2018/04/03/how-to-integrate-highcharts-js-with-django.html

The last article was the clearest one, and you can see, that I have just copy pasted the solution from there, with small changes. here is a script that I have placed in my base.html file:

and that's the chart that I have finally got displayed:

But still can’t find how to deal with it in my situation.

All this solutions, as far as I can see, are showing how to implement charting to one array, or to sum or self generated array. But I want to be able to chose, when to show a graph and for which Item.

the button is placed on this html file:

{% extends 'base.html' %}
{% block js %}
{% if user.is_authenticated %}
{% load loads_extra %}
{% load static %}



Logged in user: {{ user.username }}




    
            
                        {% for records in sorted %}
                
                        {% endfor %}

            
            
            
              SUP:
              Item N.:
              SKU
              Description
              3mBack
              2mBack
              Lmonth
              CMonth
              Nmonth
              N2Month
              N3month
              

            
            
            
                {{ records.sup }}
                {{ records.item_n }}
                {{ records.sku }}
                {{ records.description }}
                {{ records.sales3m }}
                {{ records.sales2m }}
                {{ records.saleslm }}
                {{ records.sales_this_month }}
                {{ records.m1predicted }}
                {{ records.m2predicted }}
                {{ records.m3predicted }}

                
                  Edit
                

                            
        

        
    

{% endif %}

{% endblock js %}

This is my first question in this community, so if something is not clear, please help me to correct it in a right way.

waiting for any helpful answers!!!

Artur · Accepted Answer

Good News community.

I have been offered a very good solution, and now my question is completely sorted.

At least for my needs, this is a perfect solution.

instead of highcharts, I have been offered to use d3js.org, which is absolutely fine for me.

The logic behind a code is that you request data from the values displayed, hopefully it will be clear, when you will go through the code with comments.

as it's a django project, here's the heading of my html file:

{% extends 'base.html' %}
{% block js %}
{% if user.is_authenticated %}
{% load loads_extra %}
{% load static %}



Logged in user: {{ user.username }}

here is a part of my html code that displays table/value:


              {% for records in sorted %}
                
          {% endfor %}

         
            
            
              SUP:
              Item N.:
              SKU
              Description
              6mBack
              5mBack
              4mBack
              3mBack
              2mBack
              Lmonth
              CMonth
              Nmonth
              N2Month
              N3month
              AVGrowth
              
              
              

            
            
            
                {{ records.sup }}
                {{ records.item_n }}
                {{ records.sku }}
                {{ records.description }}
                {{ records.sales6m }}
                {{ records.sales5m }}
                {{ records.sales4m }}
                {{ records.sales3m }}
                {{ records.sales2m }}
                {{ records.saleslm }}
                {{ records.sales_this_month }}
                {{ records.m1predicted }}
                {{ records.m2predicted }}
                {{ records.m3predicted }}
                {{ records.avgrowths }}

                
                  Edit

please read comments to understand what is what.

and here is the rest of html, that is generating a chart on a topup window,by pressing a button in front of an array that has to be visualised:


        
            
            
                
                    
                        
                    
                    
                        
                        
                    
                    
                        
                    
                
            
        
        
        
        
    
{% endif %}
{% endblock js %}

so finally here is how my html looks like live:

and here is a graph, that I get by pressing chart button:

in order to help community, please ask questions, and please add/correct if there is a better way.

Thank you very much for your help and attention!!!

How can I add a Bar Chart to my Django based Database?

Answers (2)

Related Questions