Skip to Content
This question has been flagged
1 Reply
1504 Views
Avatar
Nahid Jawad Angon

I have faced a problem please help me. here I want to show a bar chart in odoo website and fetch data in bar chart from controller here is my code.
class OpAttendanceController(http.Controller):
@http.route('/dashboard', website=True, auth='public')
def TotalItems(self, **kw):
total_paid = 0.0
total_due = 0.0
payslips = request.env['student.payslip'].search([])
for payslip in payslips:
total_paid += payslip.paid_amount
total_due += payslip.due_amount
return http.request.render('daffodil_smartedu_dashboard.dashboard', {
'total_paid': total_paid,
'total_due': total_due,
}
and here is my javascript

var ctx = document.getElementById('myChart').getContext('2d');
var total_paid = parseFloat(total_paid)
var total_due = parseFloat(total_due)
fetch('/dashboard')
.then(response => response.text())
.then(data => {
var total_paid = data.total_paid;
var total_due = data.total_due;

var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Total Paid', 'Total Due'],
datasets: [{
label: 'Amount',
data: [total_paid, total_due],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)'
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
});



the bar chart is not showing I think javascript can not get the data of total_paid and total_due and total_due

Avatar
Discard
Avatar
Jainesh Shah(Aktiv Software)
Best Answer

Hello, @Nahid Jawad Angon


Hope you are doing well,

- Bar chart doesn't depend on only data values. It will only be shown if required params 
value available.
- The js code is okay for get dict value total_paid and total_due from controller.
- If the dataset is not found, the blank bar chart appears.
- you can take bar chart reference from base web module --> journal_dashbord_graph
- you need to register external library in js file for bar chart
like,

Please find code in comment.

I hope this will help you.

Thanks & Regards,
Email: odoo@aktivsoftware.com
Skype: kalpeshmaheshwari

Avatar
Discard
Jainesh Shah(Aktiv Software)

xml file : <canvas id="BarChart" style="width:100%;max-width:700px"></canvas>
js file :
onWillStart(() => loadJS("/web/static/lib/Chart/Chart.js")); or
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>

var values = []
new Chart("BarChart", {
type: "bar",
data: {
datasets: [{
data: values
}]
},
options: {
legend: {display: false},
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});

Nahid Jawad Angon
Author

Here I am doing like that
<script>
var values = []
new Chart("BarChart", {
type: "bar",
data: {
datasets: [{
data: [total_paid, total_due],
}]
},
options: {
legend: {display: false},
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
<script/>
but after adding this the chart is not showing its showing blank