How to Integrate the D3 charts in Odoo Framework?

Question

I'm Newbie to the Stack,I have facing the issue in odoo,I need to integrate the d3 charts for my model in odoo form view. Thanks in advance.

Answer 1

Try this, We need configure the widget in form view Fields in our view.xml file.

view.xml

<form string="Graph">
                    <field name="name"  widget="test"/>    
</form>

Need to create one js file then we need extend the class-openerp.web.form.FieldChar.extend like this,

D3_chart.js

openerp.transform_organization_chart = function(openerp) {


    openerp.web.form.widgets.add('test','openerp.web.form.test');

    openerp.web.form.test = openerp.web.form.FieldChar.extend(
            {   
                template: 'test-button',

                init: function () {
                    this._super.apply(this, arguments);
                    this._start = null;
                },

                start: function() {
                    console.log('START');
                    this.Myfunction();
                },



                Myfunction: function()

                {   


                }



            });
}

Create the template.xml file for our chart,Here we need to write html template.Both template id and Extended Field Character name should be same.

template.xml

<template id="test-button">
<script type="text/javascript" src="/transform_organization_chart/static/src/js/d3.js"></script>
            <div t-name="test-button">
                <div id="orgChartContainer">
                    <div id="orgChart"></div>
                    </div>
                <div id="consoleOutput"></div>
            </div>
</template>