Chart in qweb pdf report - odoo 14 - odoo

Question

Is there a way to print a bar chart within a qweb report?
I'm trying to use the t-raw property, but this doesn't seem to run javascript (I'm trying to embed Char.js)
This is what I did, but it just prints it, it doesn't run the javascript before rendering the report:
<div id="prueba">
Este texto no ha sido remplazado
</div>
<t t-set="meses"/>
<t t-raw="datos">
document.getElementById('prueba').innerHTML = '<h1>Remplazado!</h1>';
</t>
How can I achieve this?

Answer 1

Is there a way to print a bar chart within a qweb report?
I guess there are multiple ways.
Unfortunately, I can't understand your code example or why it is related to printing charts in qweb reports. But let me answer that question since most people are going to land here because they want to do exactly that.
Like you, I was trying to realize it by using Chart.js and Odoo's built in chart rendering. While this is probably possible, I gave up early because it might be very complicated to get Odoo to render the chart into an image inside qweb.
The easiest solution is probably to send the chart data to a chart creating API such as quickchart. You find all the information in their doucmentation.
Here an example how to have a chart on the invoice that shows the customer's monthly revenue for the current year split up in months:
Inside the qweb view add an img tag with a t-att-src attribute
<img style="width: 100%;" t-att-src="doc.chart_img()"/>
The t-att-src attribute here calls the chart_img() method on account.move model which returns an url and looks like following:
def chart_img():
partner = self.partner_id.id
orders_this_year = self.env['sale.order'].read_group(
['&', '&',
('partner_id', '=', partner),
('date_order', '>=', datetime(datetime.today().year, 1, 1)),
('date_order', '<=', datetime(datetime.today().year, 12, 31))],
['amount_untaxed'],
['date_order:month']
)
months = [order['date_order:month'] for order in orders_this_year]
rev_values = [order['amount_untaxed'] for order in orders_this_year]
data = {
'type': 'bar',
'data': {
'labels': months,
'datasets': [
{
'label': datetime.today().year,
'data': rev_values
},
]
},
}
return f"https://quickchart.io/chart?c={json.dumps(data)}"
It first gets all orders of the partner in the current year grouped by month by calling read_group() method. Then the data is converted into a query string for quickchart. The retrieved chart shows directly as an image in your qweb report. Note that by setting up the data using python and styling the chart using quickchart features you can likely create any chart that Odoo creates on the frontend using chart.js.