I am currently working on a data visualization web app using Django, Highcharts, and JQuery. I have recently transitioned from JQuery to Vue JS and I am struggling with fetching JSON data from a specific URL. Below is the code snippet:
Template
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Django Highcharts Example</title>
</head>
<body>
<div id="container" data-url="{% url 'async_chart_data' %}"></div>
<script src="https://code.highcharts.com/highcharts.src.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$.ajax({
url: $("#container").attr("data-url"),
dataType: 'json',
success: function (data) {
Highcharts.chart("container", data);
}
});
</script>
</body>
</html>Views.py
def chart_view(request):
return render(request,'chart.html')
def chart_data(request):
dataset = Passenger.objects.values('embarked')\
.exclude(embarked='')\
.annotate(total=Count('embarked'))\
.order_by('embarked')
port_name = dict()
for choices_tuple in Passenger.PORT_CHOICES:
port_name[choices_tuple[0]] = choices_tuple[1]
#Highcharts visualization config
pie_chart = {
'chart' : {'type':'pie'},
'title' : {'text' : 'PORTS'},
'series': [{
'name' : 'Departure Ports',
'data' : list(map(lambda row: {'name' : port_name[row['embarked']],
'y' : row['total']},dataset))
}]
}
return JsonResponse(pie_chart)
Models.py
from django.db import models
class Passenger(models.Model):
MALE = 'M'
FEMALE = 'F'
SEX_CHOICES = (
(MALE, 'male'),
(FEMALE, 'female')
)
CHERBOURG = 'C'
QUEENSTOWN = 'Q'
SOUTHAMPTON = 'S'
PORT_CHOICES = (
(CHERBOURG, 'Cherbourg'),
(QUEENSTOWN, 'Queenstown'),
(SOUTHAMPTON, 'Southampton'),
)
name = models.CharField(max_length=100, blank=True)
sex = models.CharField(max_length=1, choices=SEX_CHOICES)
survived = models.BooleanField()
age = models.FloatField(null=True)
ticket_class = models.PositiveSmallIntegerField()
embarked = models.CharField(max_length=1, choices=PORT_CHOICES)
def __str__(self):
return self.name
I want to switch from using JQuery to fetch JSON data to using Vue JS. Can someone guide me on how to do that?
EDIT: I have resolved this issue and encountered another problem mentioned Here