A visual representation of the data is shown below using a Pie Chart:
https://i.sstatic.net/yDtYm.png
The data is stored in JSON format, you can access it here.
EDIT
Here's the console output:
https://i.sstatic.net/kAvRx.png
When I experimented with "bar" or "column" chart types, everything functioned properly.
I'm still learning about this, any assistance from fellow users would be greatly appreciated!
Django version: 1.10
Python version: 3.6
chartViewHigh.html
{% block main %}
<h1 align="center">Analysis</h1>
{% block content %}
<div id="container" style="width:50%; height:400px;"></div>
{% endblock %}
{% block extrajs %}
<script>
var endpoint = '/api/chart/data/';
var labels = [];
var defaultData = [];
var labels2 = [];
var defaultData2 = [];
$.ajax({
method: "GET",
url: endpoint,
/**
* @param data
* @param data.labels
* @param data.default
* @param data.default2
*/
success: function (data) {
labels = data.labels;
defaultData = data.default;
labels2 = data.labels2;
defaultData2 = data.default2;
setChart()
},
error: function (error_data) {
console.log("error");
console.log(error_data)
}
});
function setChart() {
$(document).ready(function() {
var chartOptions = {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
};
var title = {
text: 'Total'
};
var tooltip = {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
};
var seriesOptions = {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}%</b>: {point.percentage:.1f} %',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
}
}
};
var seriesData= [{
type: 'pie',
name: 'Group share',
data: [
{ name: 'Board', y: defaultData },
{
name: 'Member',
y: defaultData2,
sliced: true,
selected: true
}
]
}];
var jsonData = {};
jsonData.chart = chartOptions;
jsonData.title = title;
jsonData.tooltip = tooltip;
jsonData.series = seriesData;
jsonData.plotOptions = seriesOptions;
$('#container').highcharts(jsonData);
});
views.py
class ChartData(APIView):
def get(self, request, format=None):
qs_count = Administrator.objects.filter(association=self.request.user.association).count()
qs_count2 = Member.objects.filter(association=self.request.user.association).count()
labels = ["Members"]
default_items = [qs_count2]
labels2 = ["Board"]
default_items2 = [qs_count]
data = {
"labels": labels,
"default": default_items,
"labels2": labels2,
"default2": default_items2
}
return Response(data)