Przekazywanie bazy danych Django do Highscharts przez JSON

Question

Pierwszy plakat, długoletni czytelnik. Spędziłem dość czasu szukając odpowiedzi na to, co sprawia, że ​​myślę, że jest to coś fundamentalnego, czego mi brakuje.

Próbuję pobrać dane przechowywane w tabeli bazy danych i przekazać je do wyświetlania w wykresie Highcharts. Nie dostaję żadnych błędów od Django lub przez klienta podczas sprawdzania źródła.

Stosując Django 1.7 i 3.4 Pyton

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() Zastosowanie:

#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 

Wzór:

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

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

) 

Wszystko wydaje się działać, ale wykres Highchart nie renderuje. Myślę, że to w jaki sposób przenoszę dane JSON z view.py do template.html, ale po tak długim wpatrywaniu się w to, idę z zeza.

Każda pomoc będzie świetna!

Answer 1

W końcu udało mi się zadziałać. Znalazłem to podejście here. Dzięki Harrison za opublikowanie swojej metody!

Mój nowy views.py na podstawie powyższego podejścia:

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

Szybka funkcja pociągając obiekty bazy danych i przekazywanie danych:

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 

Kluczem do sposobu Harrisona jest skrypt do mapowania translate the Highcharts js na Python template variables:

{% 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 ything działa poprawnie i wyświetla się teraz!