How to Create Custom Graphs Using D3.js in Odoo 18: Complete Guide

{
    'name': 'Odoo 18 D3 Dashboard',
    'version': '1.0',
    'category': 'Reporting',
    'summary': 'Advanced Data Visualization using D3.js',
    'depends': ['base', 'web', 'sale'],
    'data': [
        'views/d3_action.xml',
    ],
    'assets': {
        'web.assets_backend': [
            'odoo_d3_demo/static/src/xml/d3_dashboard.xml',
            'odoo_d3_demo/static/src/js/d3_dashboard.js',
        ],
    },
    'installable': True,
}

<?xml version="1.0" encoding="utf-8"?>
<odoo>
    <record id="action_d3_sales_dashboard" model="ir.actions.client">
        <field name="name">Sales D3 Dashboard</field>
        <field name="tag">odoo_d3_demo.sales_dashboard</field>
        <field name="target">current</field>
    </record>
    
    <menuitem id="menu_d3_dashboard"
              name="D3 Sales Dashboard"
              action="action_d3_sales_dashboard"
              parent="sale.sale_menu_root"
              sequence="100"/>
</odoo>

<?xml version="1.0" encoding="UTF-8"?>
<templates xml:space="preserve">
    <t t-name="odoo_d3_demo.SalesDashboard">
        <div class="o_d3_dashboard p-3 h-100 overflow-auto">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <h2 class="text-primary">Top Sales Analysis</h2>
                <button class="btn btn-secondary" t-on-click="loadData">
                    <i class="fa fa-refresh"/> Refresh Data
                </button>
            </div>
            
            <div class="chart-container bg-white shadow-sm p-4 rounded"
                 t-ref="d3Container"
                 style="height: 500px; width: 100%;">
            </div>
        </div>
    </t>
</templates>

/** @odoo-module **/
import { registry } from "@web/core/registry";
import { loadJS } from "@web/core/assets";
import { useService } from "@web/core/utils/hooks";
import { Component, onWillStart, onMounted, useRef } from "@odoo/owl";

export class SalesD3Dashboard extends Component {
    setup() {
        this.orm = useService("orm");
        this.containerRef = useRef("d3Container");
        
        onWillStart(async () => {
            await loadJS("https://d3js.org/d3.v7.min.js");
        });
        
        onMounted(() => {
            this.loadData();
        });
    }
    
    async loadData() {
        const domain = [['state', 'in', ['sale', 'done']]];
        const fields = ['name', 'amount_total', 'date_order', 'partner_id'];
        
        const data = await this.orm.searchRead("sale.order", domain, fields, {
            limit: 10,
            order: 'amount_total desc',
        });
        this.renderChart(data);
    }
    
    renderChart(data) {
        const container = this.containerRef.el;
        d3.select(container).selectAll("*").remove();
        
        if (!data.length) {
            container.innerHTML = "<p>No data found</p>";
            return;
        }
        
        const margin = {top: 20, right: 30, bottom: 40, left: 90};
        const width = container.clientWidth - margin.left - margin.right;
        const height = container.clientHeight - margin.top - margin.bottom;
        
        const svg = d3.select(container)
            .append("svg")
            .attr("width", width + margin.left + margin.right)
            .attr("height", height + margin.top + margin.bottom)
            .append("g")
            .attr("transform", `translate(${margin.left},${margin.top})`);
        
        const x = d3.scaleLinear()
            .domain([0, d3.max(data, d => d.amount_total)])
            .range([0, width]);
        
        const y = d3.scaleBand()
            .range([0, height])
            .domain(data.map(d => d.name))
            .padding(0.1);
        
        svg.append("g")
            .attr("transform", `translate(0, ${height})`)
            .call(d3.axisBottom(x));
        
        svg.append("g").call(d3.axisLeft(y));
        
        svg.selectAll("myRect")
            .data(data)
            .join("rect")
            .attr("x", x(0))
            .attr("y", d => y(d.name))
            .attr("width", d => x(d.amount_total))
            .attr("height", y.bandwidth())
            .attr("fill", "#71639e")
            .on("mouseover", function() { d3.select(this).attr("fill", "#00A09D"); })
            .on("mouseout", function() { d3.select(this).attr("fill", "#71639e"); });
    }
}

SalesD3Dashboard.template = "odoo_d3_demo.SalesDashboard";
registry.category("actions").add("odoo_d3_demo.sales_dashboard", SalesD3Dashboard);