跳至內容
選單
此問題已被標幟
1 回覆
2668 瀏覽次數

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.

頭像
捨棄
最佳答案

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

頭像
捨棄
相關帖文 回覆 瀏覽次數 活動
3
8月 17
8985
0
1月 25
941
0
2月 24
1202
0
8月 23
2320
1
2月 24
12856