What is controller?
Actually controller is a class that can be used when we want to render some data into website. By using odoo controller we can show any data/records on web pages or website in any template.Problem Statement
Now I will show you what we are going to achieve here by using odoo controller. Actually I want to show some graph on web page. The idea is that on a button click i will call an odoo controller and return a template (render) with some dictionary of data. So first of all I will create a controller and than its template (You must create a website page or template in order to handle data sent by controller method on the page.) to show graph. To draw a graph I will use "chart.js" library, you can use any of your favourite library. So lets start...1- Create a controller.
controllers.py
# -*- coding: utf-8 -*-
from openerp import http
from openerp.http import Controller, route, request
class graph_controller(http.Controller):
@http.route('/graph/<self_id>', auth='user', website=True)
def graph(self,self_id):
return http.request.render('test_workflow.graph_template', {
'x_axis':[1500,1600,1700,1750,1800,1850,1900,1950,1999,2050],
'y_axis':[86,114,106,106,107,111,133,221,783,2478],
})
2- Create template, to create template create a new file and named it "graph_template.xml". Don't forget to register that newly created xml file into __openerp.py__.
grapy_template.xml
<openerp>
<data>
<template id="graph_template">
<t t-call="website.layout">
<head>
<title>Graph Web Controller Example</title>
</head>
<body>
<div class="container">
<div class="page">
<div class="row">
<canvas id="line-chart" width="200" height="50"></canvas>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<script>
var x_axis = <t t-esc="x_axis"/>;
var y_axis = <t t-esc="y_axis"/>;
new Chart(document.getElementById("line-chart"), {
type: 'line',
data: {
labels: x_axis,
datasets: [{
data: y_axis,
label: "Actual Curve",
borderColor: "#3e95cd",
fill: false
}
]
},
options: {
title: {
display: false,
text: 'World population per region (in millions)'
}
}
});
</script>
</body>
</t>
</template>
</data>
</openerp>
Now its time to test our custom controller, go to browser and open "http://localhost:8069/graph/1", remember here "/graph/1" is the route of our custom controller.