JSON経由でDjangoデータベースクエリーセットをHighchartに渡す

Question

初めてのポスター、長時間の読者。私はかなりしばらくこの答えを探しています。それが私に欠けている根本的な何かを考えるようになります。

私はデータベーステーブルに保持されているデータをプルし、Highchartsプロットで表示するために通過しようとしています。私は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'), 

) 

ハイチャートプロットはレンダリングされません。私は、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 %} 

これまでにythingは正しく動作し、正しく表示されます！