OpenERP HighCharts Widget Example

highcharts_action.xml

<?xml version="1.0" ?>
<openerp>
	<data>
	    <record model="ir.actions.client" id="action_highcharts_qweb">
	        <field name="name">QWeb Widget With HighCharts</field>
	        <field name="tag">my_module.my_action</field>
	    </record>
        <menuitem id="random_id" name ="HighCharts View" action="action_highcharts_qweb" />  
    </data>
</openerp>

highcharts_widget.js

openerp.my_module = function(instance){
	var _t = instance.web._t,
	_lt = instance.web._lt;
	var QWeb = instance.web.qweb;
	
	instance.my_module = {};	
	instance.my_module.myHighChartsWidget = instance.web.Widget.extend({
		init : function (parent, name) {
			this._super(parent);
			//my "global" widget variables here
		},
		start: function(){
			//you should render QWeb Templates on this block, but we are not want to use anyone
			var self = this; //remember to store "this" variable in order to have access to widget functions inside asynchronous blocks.

			//create div containers here
			var my_div = $("<div>", {id: "my_div_id"});

			//start requesting data for your chart here asynchronously
			var deferred_data1 = new $.Deferred();
			var deferred_data2 = new $.Deferred(); //maybe you have one or more data sources

			//when you get all datas (data1 and data2), call function to fill graph
			$.when(deferred_data1, deferred_data2).done(function(data1, data2){
				self.fill_graph(data1, data2);
			});

			//requesting data 1
			new instance.web.Model("my_model1").query(["name", "price"]).then(function(res_query1){
				deferred_data1.resolve(res_query1);
			});
			//requesting data 2
			new instance.web.Model("my_model2").query(["name", "price"]).then(function(res_query2){
				deferred_data2.resolve(res_query2);
			});

			//append to Widget Parent your div container
			this.$el.append(my_div);
		},
		function fill_graph(data1, data2){
			$(function () {
				$('#my_div_id').highcharts({
		                chart: {
		                    type: 'pie'
		                },
		                title: {
		                    text: 'Title'
		                },
		                subtitle: {
		                    text: 'Subtitle'
		                },
		                plotOptions: {
		                    series: {
		                        dataLabels: {
		                            enabled: true,
		                            format: '{point.name} '
		                        }
		                    }
		                },
		                tooltip: {
		                    headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
		                    pointFormat: '<span style="color:{point.color}">{point.name}</span> <br/><b>{point.y:.0f}</b> datasss.<br/>'
		                }, 

		                series: [{
		                    name: 'Series',
		                    colorByPoint: true,
		                    data: data1 //data 1 for series
		                }],
		                drilldown: {
		                    series: data2 //data 2 for drilldown
		                }
		        });
		    });
		}
	};
	//remember always to register your action in order to call him with an external id
	instance.web.client_actions.add('my_module.my_action','instance.my_module.myHighChartsWidget');
};

ℹ️ Files located in:

• my_module/static/src/js/highcharts_widget.js
• my_module/actions/highcharts_action.xml