I'm using the "start bootstrap4" template for my Django project. I want to edit my own data in the sample chart. I need to change it in the chart-pie-demo.js file
I already created the list of data that I want t add into the chart. The data is defined in my views.py:
def chart(request):
sheet2022 = client.open('sheet 2022')
instance = sheet2022.get_worksheet(0)
mysheet = instance.get_all_records()
rpending2022 = list(filter(lambda datapending2022:
Mi=len(tuple(d for d in rpending2022 if d['Receiver'] == 'Mike'))
Lu=len(tuple(d for d in rpending2022 if d['Receiver'] == 'Lucy'))
Ja=len(tuple(d for d in rpending2022 if d['Receiver'] == 'Jack'))
mydata = [Mi, Lu, Ja]
context = {'mydata': mydata}
return render(request,'charts.html', context)
My chart-pie-demo.js file:
var ctx = document.getElementById("myPieChart");
var myPieChart = new Chart(ctx, {
type: 'doughnut',
data: {
labels: ["Direct", "Referral", "Social"],
datasets: [{
data: [55, 30, 15],
backgroundColor: ['#4e73df', '#1cc88a', '#36b9cc'],
hoverBackgroundColor: ['#2e59d9', '#17a673', '#2c9faf'],
hoverBorderColor: "rgba(234, 236, 244, 1)",
}],
},
options: {
maintainAspectRatio: false,
tooltips: {
backgroundColor: "rgb(255,255,255)",
bodyFontColor: "#858796",
borderColor: '#dddfeb',
borderWidth: 1,
xPadding: 15,
yPadding: 15,
displayColors: false,
caretPadding: 10,
},
legend: {
display: false
},
cutoutPercentage: 80,
},
});
I want to replace the sample data: [55, 30, 15] with my own mydata. When I change it in my chart-pie-demo.js file, the chart doesn't show up. Do I need to link the data location in the chart-pie-demo.js file?
You already mentioned use of pandas; that's why assume you can aggregate the names already. For the django part: You will need a view looking something like this:
def your_view(request):
data = "[10, 20, 30]" # however your aggreated output will look.
# for simplicity of this example I assume it as a string like that
# you can pass variables to djangos frontend using context
context = {'my_data': data}
return render(request, 'index.html', context)
So basically you can put your data just in an ordinary django context. If your js is that short and you want a quick and easy answer, it would be best to remove the js file and put the code directly into a script tag in your html (I assumed "index.html" for example here).
Then you can just go into your script tag and:
var ctx = document.getElementById("myPieChart");
var myPieChart = new Chart(ctx, {
type: 'doughnut',
data: {
labels: ["Direct", "Referral", "Social"],
datasets: [{
data: {{ data }} ,
...
Overall the basic idea in django is: you create a view. You create an url pointing to the view. The view renders a HTML file (or well, "file" in general; word files and other files work as well). "Renders" basically means performing templating functions and putting whatever values you gave it in context into the according variable names written in double curly brackets.
After that the file is served. Which means whatever you do in template runs before the javascript runs because the server creates the file using template tags and just after that it is sent to the browser which then executes javascript. For your example you could image django context and template tags just as a basic "use whatever I put in this variable to replace it in my html/css/js/whatever file".
That means you could also do:
def your_view(request):
context = {
'data_one': 10
'data_two': 20
'data_three': 30
}
return render(request, 'index.html', context)
and accordingly:
var ctx = document.getElementById("myPieChart");
var myPieChart = new Chart(ctx, {
type: 'doughnut',
data: {
labels: ["Direct", "Referral", "Social"],
datasets: [{
data: [{{ data_one }}, {{ data_two }}, {{ data_three }}],
...