Django Database Queryset über JSON an Highcharts übergeben

Question

Erstplakat, Langzeitleser. Ich habe ziemlich lange nach einer Antwort darauf gesucht, was mich dazu bringt, etwas Grundlegendes zu denken, das mir fehlt.

Ich versuche, in einer Datenbanktabelle enthaltene Daten zu ziehen und für die Anzeige in einem Highcharts-Diagramm zu übergeben. Ich bekomme keine Fehler von Django oder vom Kunden, wenn ich die Quelle überprüfe.

Verwendung: Django 1.7 und Python 3.4

Die 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', {}) 

Die get_data() Funktion:

#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 

Die Vorlage:

<!-- 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 %} 

Endlich die URLs:

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'), 

) 

Alles scheint zu laufen, aber der Highchart-Plot wird nicht gerendert. Ich denke daran, wie ich die JSON-Daten von view.py in die template.html verschiebe, aber nachdem ich so lange darauf gestarrt habe, gehe ich schief.

Jede Hilfe wäre toll!

Answer 1

Ich habe endlich mein Plotten funktioniert. Ich fand diesen Ansatz . Danke an Harrison für die Veröffentlichung seiner Methode!

Mein neues views.py basierend auf dem obigen Ansatz:

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

Quick-Funktion für Datenbankobjekte ziehen und Weitergabe der Daten:

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 

Der Schlüssel zum Harrison Methode ist ein Mapping-Skript Überset- zen Sie die Highcharts js in Python-Vorlagenvariablen:

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

Überhaupt Alles funktioniert und wird jetzt korrekt angezeigt!