mahatma728
@mahatma728
предприниматель который хочет научиться кодить

Как в django-приложении отображать js график с данными из БД?

Задача: в django-приложении отображать js график с данными из БД.
Как это сделать на примере проекта ниже?


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})


В шаблоне:
<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>



Есть js график:
<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);
    
    }




Можно ли для каждого custom_user, которого мы рендерим, отображать график, на котором будут отображены field_one, field_two, field_three ? Как это сделать? А еще я совсем не понимаю js и надеюсь что решение будет примитивным. Заранее признателен за помощь
  • Вопрос задан
  • 309 просмотров
Пригласить эксперта
Ответы на вопрос 3
@barolina
turn coffee into code
Можно попробовать покопать в строну ajax!
Ответ написан
Комментировать
zelsky
@zelsky
Зачем ajax ? Есть прекрасная вещь D3JS. Сначало сложно чтобы понять но когда вкурите больше ничем другим пользоваться не будете (возможно bokeh и то врятли)
Ответ написан
Комментировать
@IKMOL
К примеру можете нужные вам данные отдавать по какому то урлу 'data/to/charts/' в json. Ну и уже через гугл чартс данные брать с урла (json).
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы