score:9
Accepted answer
I finally got my plotting working. I found this approach here. Thanks to Harrison for posting his 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})
Quick function for pulling database objects and passing the 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 a mapping script to translate the Highcharts js to Python template variables:
{% extends "base.html" %}
{% block extrahead %}
<!-- Load in jQuery and HighCharts -->
<script src="//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 %}
Everything works and displays correctly now!
Source: stackoverflow.com
Related Query
- Passing Django Database Queryset to Highcharts via JSON
- Passing Django data to Highcharts via JSON
- passing data from database to highcharts in Django
- passing json values to highcharts from .net code behind
- passing formatting JavaScript code to HighCharts with JSON
- Reload chart data via JSON with Highcharts
- PHP JSON Highcharts load database result
- Formatting JSON from a Pandas data frame for Highcharts within a Django template
- How to construct HighCharts data series to match returned Json via ajax call
- Passing JSON in variable to HighCharts
- HighCharts load data via Json
- highcharts via json how to get the xAxis?
- Highcharts with json from django query not rendered
- Highcharts Display values from sql via json
- highcharts and django passing a dictionary
- Data from django models not passing to highcharts chart
- HighCharts Bubble graph JSON as data source
- Highcharts - Passing in Color with JSON
- Adding multiple dynamic series and axes via JSON into Highcharts
- Passing data from PHP array to Highcharts chart with JSON
- Highcharts load ajax via Json
- Highcharts displays series names but missing data points from json source
- Loading Highcharts via shim using RequireJS and maintaining jQuery dependency
- HighCharts load data via ajax
- adding series to highcharts from JSON
- json date format to Highcharts date format
- How to pass json data to highcharts series?
- Send JSON data to highcharts pie from asp.net MVC controller in C#
- Play Framework: PDF'ing a template that uses highcharts JS library via a Job
- Highcharts with JSON data and multiple series
More Query from same tag
- How to disable the date and time mentioned in the navigator part and not on the x axis in highstock?
- Extending Highmaps Side Effect
- Highcharts - cylinder Chart
- highcharts axis format decimal point
- How to append highcharts on same div?
- Highcharts 3.0 beta threshold documentation?
- Highcharts overlapping and stacked column
- Highcharts: redraw chart after changing options
- c# WPF Webbrowser with Highchart, Javascript from external source not working "An error has occurred in the script on this page"
- How to display total number of comments in high chart on each plotted point?
- remove item from my export list highcharts
- Why is the data showing up incorrectly in the chart?
- Append to default highcharts tooltip
- How to use the tooltip formatter and still display chart color (like it does by default)?
- Can I lay two Highcharts series side-by-side?
- highcharts, mobile responsive, chart not fitting inside container
- brackets not included in the obtained json
- Data grouping into weekly,monthly by user
- HighCharts Multi Color
- Highcharts x axis month and year showing twice
- Stacked chart Scrolling Issue
- highchart/highstock tooltip does not adjust after zoom
- highcharts donut chart center text overlaps with tooltip
- colour range in javascript
- Highcharts not working in UpdatePanel of asp.net
- How to reduce the general size of Highchart
- Highcharts DateTime Localization
- pie chart in highchart with dynamic data
- Highcharts pointPlacement ignored in version 2.3.5
- Twitter bootstrap & Highchart: horizontal scroll, responsive