How to display a js graph with data from a db in a django application?

Question

JavaScript

Task: in a django application, display a js graph with data from the database. How to do this in the example project below?

models.py

class CustоmUser(models.Model):
  name = models.CharField(max_length=25)
  age = models.CharField(max_length=25)
  position = models.CharField(max_length=25)
  field_one = models.SmallIntegerField(default=0)
  field_two = models.SmallIntegerField(default=0)
  field_three = models.SmallIntegerField(default=0)

view.py

def page(request, user_id):
  user = get_object_or_404(CustоmUser, pk=user_id)
  return render(request, 'user/detail.html', {'user': user})

In template:

<table class="table">
                 
                     <thead>
                 
                     <tr>
                     
                           <th>Name</th>
                     
                           <th>Age</th>
                     
                           <th>Position</th>
                 
                     </tr>
                 
                     </thead>
                 
                     <tbody>
                 
                     {% for custom_user in custom_user_set.all %}
      <tr>
        <td>{{ custom_user.name }}</td>
        
                          <td>{{ custom_user.age }}</td>
        
                          <td>{{ custom_user.position }}</td>


There is a js graph:

<script type="text/javascript">
    
google.charts.load('current', {'packages':['corechart']});
    
google.charts.setOnLoadCallback(drawChart);


    
function drawChart() {

      var data = google.visualization.arrayToDataTable([
        
           ['Year', 'Posts', 'Likes','Reposts','Comments'],
  
           ['2011',  2000,      5000,       989      444],
  
           ['2012',  2000,      5000,      6565,     777],
        
           ['2013',  600,      2000,    876,     2050],
        
           ['2014',  700,      3000,    776,    678],
        
           ['2015',  660,       2500,      676,    888],
        
           ['2016',  2000,      5000,   676,    900]
      
         ]);

      

        var options = {
        
                title: 'Title',
        
                hAxis: {title: 'Year',  titleTextStyle: {color: '#333'}},
        
                vAxis: {title: 'Numbers of posts and likes' ,minValue: 0}
      
       };

      
       var chart = new google.visualization.AreaChart(document.getElementById('chart_div1'));
      
       chart.draw(data, options);
    
    }



Is it possible for each custom_user we render to display a graph that will display field_one, field_two, field_three ? How to do it? And I don’t understand js at all and I hope that the solution will be primitive. Thanks in advance for help

Answer 1

You can try to dig into the ajax line!

Answer 2

Why ajax? There is a wonderful thing D3JS. At first it’s hard to understand, but when you smoke it, you won’t use anything else (maybe bokeh and then it’s unlikely)

Answer 3

For example, you can send the data you need to some url 'data/to/charts/' in json. Well, already through Google charts, take data from the url (json).