Skip to Content
Menu
This question has been flagged
1 Odpoveď
3237 Zobrazenia

Is it possible to include a script in a qweb report which then shows a Radar Chart including values from a module?

Static view for the script is:

const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
type: 'radar',
data: {
labels: [One, Two, Three, Four, Five, Six, Seven],
datasets: [{
label: 'My First Dataset',
data: [65, 59, 90, 81, 56, 55, 40],
fill: true,
backgroundColor: 'rgba(255, 99, 132, 0.2)',
borderColor: 'rgb(255, 99, 132)',
pointBackgroundColor: 'rgb(255, 99, 132)',
pointBorderColor: '#fff',
pointHoverBackgroundColor: '#fff',
pointHoverBorderColor: 'rgb(255, 99, 132)'
}, {
label: 'My Second Dataset',
data: [28, 48, 40, 19, 96, 27, 100],
fill: true,
backgroundColor: 'rgba(54, 162, 235, 0.2)',
borderColor: 'rgb(54, 162, 235)',
pointBackgroundColor: 'rgb(54, 162, 235)',
pointBorderColor: '#fff',
pointHoverBackgroundColor: '#fff',
pointHoverBorderColor: 'rgb(54, 162, 235)'
}]
},
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});


How can I change the labels and the data in variables from the module.

Avatar
Zrušiť
Best Answer

Hi,

If you want to get the data from the backend, you need to do an ajax call and return the data from the controller and create the chart in the .then function of the ajax result.

JavaScript

var ctx = document.querySelector("#_id_of_radar_chart");
ajax.jsonRpc('/controller_name', 'call',{'values to pass to the controller in dictionary format'})
.then(function (result) {
const myChart = new Chart(ctx, {
type: 'radar',
data: {
labels: result['labels'],
datasets: [{
label: 'My First Dataset',
data: result['datas'],
fill: true,
backgroundColor: 'rgba(255, 99, 132, 0.2)',
borderColor: 'rgb(255, 99, 132)',
pointBackgroundColor: 'rgb(255, 99, 132)',
pointBorderColor: '#fff',
pointHoverBackgroundColor: '#fff',
pointHoverBorderColor: 'rgb(255, 99, 132)'
}, {
label: 'My Second Dataset',
data: [28, 48, 40, 19, 96, 27, 100],
fill: true,
backgroundColor: 'rgba(54, 162, 235, 0.2)',
borderColor: 'rgb(54, 162, 235)',
pointBackgroundColor: 'rgb(54, 162, 235)',
pointBorderColor: '#fff',
pointHoverBackgroundColor: '#fff',
pointHoverBorderColor: 'rgb(54, 162, 235)'
}]
},
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});
 
}

Python

@route(['/controller_name'], type='json')
def controller_name(self, **kwargs):
#kwargs will have the values passed from the ajax call.
return {'labels': [label 1, label 2], 'datas': [data 1, data 2]}

Regards

Avatar
Zrušiť
Related Posts Replies Zobrazenia Aktivita
3
aug 17
9779
0
jan 25
1608
0
feb 24
1858
0
aug 23
2997
1
feb 24
13794