Passing Django Database Queryset to Highcharts via JSON

Question

The first poster, a long time reader. I spent quite a bit of time finding an answer to this question, which is why I think that something fundamental is missing.

I am trying to extract the data stored in a database table and transfer it for display in the Highcharts chart. I do not get any errors from Django or the client when checking the source.

Usage: Django 1.7 and Python 3.4

View.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 () function:

 #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 

Template:

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

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

Everything seems to work, but the Highchart plot does not display. I think that in the way I move JSON data from view.py to template.html, but after looking at it for so long, I crossbreed.

Any help would be awesome!

Answer 1

I finally got my plot. I found this approach here . Thanks Harrison for publishing my method!

My new views.py based on the above approach:

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

A quick function for pulling database objects and transferring data:

 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 

The key to Harrison's method is to display a script to translate Highcharts js variables into 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 %} 

Now everything works and displays correctly!