| Availability |
Odoo Online
Odoo.sh
On Premise
|
| Odoo Apps Dependencies |
•
Employees (hr)
• Discuss (mail) |
| Lines of code | 1346 |
| Technical Name |
highcharts_widget |
| License | OPL-1 |
| Versions | 16.0 13.0 14.0 10.0 |
Highcharts Graph Widget
This module provides integration with Highcharts JS v11.0.1 library. Using it you can add beautiful graphs into your forms views...
How to use it?
Yoy need to provide the widget reference in yor form definition, in which you must specify the name of the method that returns the graph data/definition...
Example...
In your model you need to create a function that return a valid Highchart's graph data, for example:
# -*- coding: utf-8 -*-
from odoo import api, models
class TestGraph(Model):
_name = "highcharts_widget.test_graph"
_description = "Testing graph feature..."
def compute_graph_data(self):
self.ensure_one()
return {
"chart": {
"type": "variablepie"
},
"title": {
"text": "Highcharts JS v11.0.1 Integration
Countries compared by population density and total area, 2022.",
"align": "center"
},
"tooltip": {
"headerFormat": "",
"pointFormat": '\u25CF {point.name}
' +
'Area (square km): {point.y}
' +
'Population density (people per square km): {point.z}
'
},
"series": [{
"minPointSize": 10,
"innerSize": "20%",
"zMin": 0,
"name": "countries",
"borderRadius": 5,
"data": [{
"name": "Spain",
"y": 505992,
"z": 92
}, {
"name": "France",
"y": 551695,
"z": 119
}, {
"name": "Poland",
"y": 312679,
"z": 121
}, {
"name": "Czech Republic",
"y": 78865,
"z": 136
}, {
"name": "Italy",
"y": 301336,
"z": 200
}, {
"name": "Switzerland",
"y": 41284,
"z": 213
}, {
"name": "Germany",
"y": 357114,
"z": 235
}],
"colors": [
"#4caefe",
"#3dc3e8",
"#2dd9db",
"#1feeaf",
"#0ff3a0",
"#00e887",
"#23e274"
]
}]
}
def compute_graph_data_two(self):
self.ensure_one()
return {
"title": {
"text": "Solar Employment Growth by Sector, 2010-2016"
},
"subtitle": {
"text": "Source: thesolarfoundation.com"
},
"yAxis": {
"title": {
"text": "Number of Employees"
}
},
"xAxis": {
"accessibility": {
"rangeDescription": "Range: 2010 to 2017"
}
},
"legend": {
"layout": "vertical",
"align": "right",
"verticalAlign": "middle"
},
"plotOptions": {
"series": {
"label": {
"connectorAllowed": "False"
},
"pointStart": 2010
}
},
"series": [{
"name": "Installation",
"data": [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
}, {
"name": "Manufacturing",
"data": [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
}, {
"name": "Sales & Distribution",
"data": [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
}, {
"name": "Project Development",
"data": [None, None, 7988, 12169, 15112, 22452, 34400, 34227]
}, {
"name": "Other",
"data": [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
}],
"responsive": {
"rules": [{
"condition": {
"maxWidth": 500
},
"chartOptions": {
"legend": {
"layout": "horizontal",
"align": "center",
"verticalAlign": "bottom"
}
}
}]
}
}
In the xml definition you should write something like that:
<?xml version="1.0" encoding="UTF-8"?>
<odoo>
<data>
<record id="highcharts_widget_test_form_view" model="ir.ui.view">
<field name="name">highcharts_widget_test_form_view</field>
<field name="model">highcharts_widget.test_graph</field>
<field name="arch" type="xml">
<form>
<sheet>
<div>
<widget name="graph_widget"
method="compute_graph_data"
/>
</div>
<div>
<widget name="graph_widget"
method="compute_graph_data_two"
/>
</div>
</sheet>
</form>
</field>
</record>
<record id="highcharts_widget_test_action" model="ir.actions.act_window">
<field name="name">Graph Test</field>
<field name="res_model">highcharts_widget.test_graph</field>
<field name="view_mode">form</field>
</record>
<menuitem name="Graph Test"
id="highcharts_widget_test_menu_item"
action="highcharts_widget_test_action"
sequence="1"
/>
<record id="view_employee_form_inherit" model="ir.ui.view">
<field name="name">view_employee_form_inherit</field>
<field name="model">hr.employee</field>
<field name="inherit_id" ref="hr.view_employee_form" />
<field name="arch" type="xml">
<xpath expr="//div[@id='o_work_employee_container']" position="after">
<widget name="graph_widget"
method="compute_graph_data"
/>
</xpath>
</field>
</record>
</data>
</odoo>
Another example...
class HrEmployeePrivate(Model):
_inherit = "hr.employee"
def compute_graph_data(self):
self.ensure_one()
return {
"chart": {
"type": "spline",
"inverted": True
},
"title": {
"text": "Atmosphere Temperature by Altitude",
"align": "left"
},
"subtitle": {
"text": "According to the Standard Atmosphere Model",
"align": "left"
},
"xAxis": {
"reversed": False,
"title": {
"enabled": True,
"text": "Altitude"
},
"labels": {
"format": "{value} km"
},
"accessibility": {
"rangeDescription": "Range: 0 to 80 km."
},
"maxPadding": 0.05,
"showLastLabel": True
},
"yAxis": {
"title": {
"text": "Temperature"
},
"labels": {
"format": "{value}°"
},
"accessibility": {
"rangeDescription": "Range: -90°C to 20°C."
},
"lineWidth": 2
},
"legend": {
"enabled": False
},
"tooltip": {
"headerFormat": "{series.name}
",
"pointFormat": "{point.x} km: {point.y}°C"
},
"plotOptions": {
"spline": {
"marker": {
"enable": False
}
}
},
"series": [{
"name": "Temperature",
"data": [
[0, 15], [10, -50], [20, -56.5], [30, -46.5], [40, -22.1],
[50, -2.5], [60, -27.7], [70, -55.7], [80, -76.5]
]
}]
}
<record id="view_employee_form_inherit" model="ir.ui.view">
<field name="name">view_employee_form_inherit</field>
<field name="model">hr.employee</field>
<field name="inherit_id" ref="hr.view_employee_form" />
<field name="arch" type="xml">
<xpath expr="//div[@id='o_work_employee_container']" position="after">
<widget name="graph_widget"
method="compute_graph_data"
/>
</xpath>
</field>
</record>
Alejandro Cora Gonzalez
alek.cora.glez@gmail.com
Odoo Proprietary License v1.0 This software and associated files (the "Software") may only be used (executed, modified, executed after modifications) if you have purchased a valid license from the authors, typically via Odoo Apps, or if you have received a written agreement from the authors of the Software (see the COPYRIGHT file). You may develop Odoo modules that use the Software as a library (typically by depending on it, importing it and using its resources), but without copying any source code or material from the Software. You may distribute those modules under the license of your choice, provided that this license is compatible with the terms of the Odoo Proprietary License (For example: LGPL, MIT, or proprietary licenses similar to this one). It is forbidden to publish, distribute, sublicense, or sell copies of the Software or modified copies of the Software. The above copyright notice and this permission notice must be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
Please log in to comment on this module