Trying to create a pie chart in Django with data from my "Results" model. The model has two fields:
+--------+------------+
| result | date |
+--------+------------+
| passed | 2017-03-30 |
| passed | 2017-02-30 |
| passed | 2017-03-30 |
| failed | 2017-03-30 |
| failed | 2017-03-29 |
| passed | 2017-03-29 |
| passed | 2017-03-30 |
-----------------------
The goal is to count the number of passed and failed values for a specific date, and represent this information in a pie chart.
For example, on 2017-03-30 there were 4 passes and 1 fail. https://i.sstatic.net/3sLxv.png
chart_test.html:
{% extends "base.html" %}
{% load staticfiles %}
{% block content %}
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
</head>
<body>
<script type="text/javascript">
$(function () {
$('#chart_container').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: 'hello'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} %',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
}
}
},
series: [{
name: 'Brands',
colorByPoint: true,
data: [
{% for cat in responses_pie %}
[
{{ cat.count }}
],
{% endfor %}
]
}]
});
});
</script>
<div id="chart_container" style="height: 300px"></div>
</body>
{% endblock %}
views.py:
def chart_test(request):
responses_pie = Results.objects.filter(date=date.today()).annotate(count=Count('result'))
return render(request,'mbr/chart_test.html',{'responses_pie': responses_pie})