Передача Django Database Queryset в Highcharts через JSON

Question

Первоначальный плакат, долго читатель. Я потратил довольно много времени на то, чтобы найти ответ на этот вопрос, из-за чего я думаю, что что-то фундаментальное мне не хватает.

Я пытаюсь извлечь данные, хранящиеся в таблице базы данных, и передать их для отображения в сюжете Highcharts. Я не получаю никаких ошибок от Django или клиента при проверке источника.

Использование: Django 1.7 и Python 3.4

views.py:

#unit/views.py 
from django.http import JsonResponse 
from django.shortcuts import render 
from unit.analysis_funcs import ChartData 

def chart_data_json(request): 
    data = {} 
    data['chart_data'] = ChartData.get_data() 
    return JsonResponse(data, safe = True) 

def plot(request):  
    return render(request, 'unit/data_plot.html', {}) 

Функция get_data():

#unit/analysis_funcs.py 
from unit.models import CheckValve 

class ChartData(object):  
    def get_data(): 
     data = {'serial_numbers': [], 'mass': []} 

     valves = CheckValve.objects.all() 

     for unit in valves: 
      data['serial_numbers'].append(unit.serial_number) 
      data['mass'].append(unit.mass) 

     return data 

Шаблон:

<!-- templates/unit/data_plot.html --> 
{% extends "base.html" %} 

{% block extrahead %} 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 
    <script src="http://code.highcharts.com/highcharts.js"></script> 
{% endblock %} 

{% block rootcontainer %} 
    <div id="container" style="width:100%; height:400px;"></div>  
{% endblock %} 

{% block overwrite %} 
<!-- Overwrite the base.html jQuery load and put in head for Highcharts to work --> 
{% endblock %} 

{% block extrajs %} 
<script> 
$(document).ready(function() { 

    var options = { 
     chart: { 
      renderTo: 'container', 
      type: 'line' 
     }, 
     series: [{}] 
    }; 
    var ChartDataURL = "{% url 'chart_data_json' %}"; 
    $.getJSON('ChartDataURL', function(data) { 
     options.xAxis.categories = data['chart_data']['serial_numbers']; 
     options.series[0].name = 'Serial Numbers'; 
     options.series[0].data = data['chart_data']['mass']; 
     var chart = new Highcharts.Chart(options); 
    }); 

}); 
</script> 
{% endblock %} 

Наконец, URL:

from unit import views, graphs 

urlpatterns = patterns('', 

    url(r'^chart_data_json/', views.chart_data_json, name = 'chart_data_json'), 

    url(r'^plot/', views.plot, name = 'plot'), 

) 

Все кажется запущенным, но сюжет Highchart не отображает. Я думаю, что это в том, как я перемещаю данные JSON с view.py в template.html, но после столь долгого взгляда на него я скрестил глаза.

Любая помощь была бы замечательной!

Answer 1

Я, наконец, получил свой заговор. Я нашел такой подход here. Спасибо Harrison за отправку его метода!

Мой новый views.py на основе вышеуказанного подхода:

def plot(request, chartID = 'chart_ID', chart_type = 'line', chart_height = 500): 
    data = ChartData.check_valve_data() 

    chart = {"renderTo": chartID, "type": chart_type, "height": chart_height,} 
    title = {"text": 'Check Valve Data'} 
    xAxis = {"title": {"text": 'Serial Number'}, "categories": data['serial numbers']} 
    yAxis = {"title": {"text": 'Data'}} 
    series = [ 
     {"name": 'Mass (kg)', "data": data['mass']}, 
     {"name": 'Pressure Drop (psid)', "data": data['pressure drop']}, 
     {"name": 'Cracking Pressure (psid)', "data": data['cracking pressure']} 
     ] 

    return render(request, 'unit/data_plot.html', {'chartID': chartID, 'chart': chart, 
                'series': series, 'title': title, 
                'xAxis': xAxis, 'yAxis': yAxis}) 

Функция быстрой для перетягивания объектов базы данных и передачи данных:

class ChartData(object):  
    def check_valve_data(): 
     data = {'serial numbers': [], 'mass': [], 
       'pressure drop': [], 'cracking pressure': [], 'reseat pressure': []} 

     valves = CheckValve.objects.all() 

     for unit in valves: 
      data['serial numbers'].append(unit.serial_number) 
      data['mass'].append(unit.mass) 
      data['cracking pressure'].append(unit.cracking_pressure) 
      data['pressure drop'].append(unit.pressure_drop) 
      data['reseat pressure'].append(unit.reseat_pressure) 

     return data 

Ключ к методу Харрисона является отображение скрипта перевести Highcharts js в переменные шаблона Python:

{% extends "base.html" %} 

{% block extrahead %} 
    <!-- Load in jQuery and HighCharts --> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 
    <script src="http://code.highcharts.com/highcharts.js"></script> 
{% endblock %} 

{% block heading %} 
    <h1 align="center">Analysis</h1> 
{% endblock %} 

{% block content %} 
    <div id={{ chartID|safe }} class="chart" style="height:100px; width:100%"></div> 
{% endblock %} 

{% block overwrite %} 
<!-- Overwrite the base.html jQuery load and put in head for Highcharts to work --> 
{% endblock %} 

{% block extrajs %} 
<!-- Maps the Python template context variables from views.py to the Highchart js variables --> 
<script> 
    var chart_id = {{ chartID|safe }} 
    var chart = {{ chart|safe }} 
    var title = {{ title|safe }} 
    var xAxis = {{ xAxis|safe }} 
    var yAxis = {{ yAxis|safe }} 
    var series = {{ series|safe }} 
</script> 

<!-- Highchart js. Variable map shown above --> 
<script> 
$(document).ready(function() { 
    $(chart_id).highcharts({ 
     chart: chart, 
     title: title, 
     xAxis: xAxis, 
     yAxis: yAxis, 
     series: series 
    }); 
}); 
</script> 
{% endblock %} 

Ever Сейчас работает и отображается правильно!