Creating Interactive Charts and Graphs in Odoo: Custom Visualizations

<!-- views/sale_order_views.xml -->
<record id="view_sale_pivot" model="ir.ui.view">
    <field name="name">Sales Analysis - Pivot</field>
    <field name="model">sale.order</field>
    <field name="arch" type="xml">
        <!-- PIVOT VIEW -->
        <pivot string="Sales Analysis">
            <field name="partner_id.country_id" type="row"/>
            <field name="state" type="col"/>
            <field name="amount_total" type="measure" aggregate="sum"/>
            <field name="id" type="measure" aggregate="count" string="Orders"/>
        </pivot>
    </field>
</record>

<record id="view_sale_graph" model="ir.ui.view">
    <field name="name">Sales Analysis - Graph</field>
    <field name="model">sale.order</field>
    <field name="arch" type="xml">
        <!-- BAR CHART -->
        <graph string="Sales by Region" type="bar" stacked="False">
            <field name="partner_id.country_id" type="row"/>
            <field name="amount_total" type="measure" aggregate="sum"/>
        </graph>
    </field>
</record>

<record id="view_sale_line_chart" model="ir.ui.view">
    <field name="name">Daily Sales Trend</field>
    <field name="model">sale.order</field>
    <field name="arch" type="xml">
        <!-- LINE CHART -->
        <graph string="Revenue Trend" type="line">
            <field name="order_date" type="row" interval="day"/>
            <field name="amount_total" type="measure" aggregate="sum"/>
        </graph>
    </field>
</record>

<record id="view_sale_pie_chart" model="ir.ui.view">
    <field name="name">Top Products</field>
    <field name="model">sale.order.line</field>
    <field name="arch" type="xml">
        <!-- PIE CHART -->
        <graph string="Sales by Product" type="pie">
            <field name="product_id" type="row"/>
            <field name="price_total" type="measure" aggregate="sum"/>
        </graph>
    </field>
</record>

custom_module/
├── static/
│   └── src/
│       ├── js/
│       │   ├── dashboard.js
│       │   └── chart_renderer.js
│       └── xml/
│           └── dashboard.xml
└── views/
    └── dashboard_views.xml

/** @odoo-module */
import { registry } from "@web/core/registry"
import { loadJS } from "@web/core/assets"
import { onMounted, useState } from "@odoo/owl"

const { Component } = owl

export class SalesDashboard extends Component {
    setup() {
        this.state = useState({
            topProducts: [],
            salesByRegion: [],
            monthlySales: [],
            loading: true,
        })
        
        onMounted(async () => {
            // Load Chart.js library
            await loadJS("https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.0/chart.umd.min.js")
            
            // Fetch data and render charts
            await this.loadData()
            this.renderCharts()
        })
    }
    
    async loadData() {
        // Fetch top products
        const topProducts = await this.orm.readGroup(
            "sale.order.line",
            [["state", "=", "sale"]],
            ["product_id", "price_total:sum"],
            ["product_id"],
            { limit: 10, order: "price_total:sum DESC" }
        )
        this.state.topProducts = topProducts
        
        // Fetch sales by region
        const salesByRegion = await this.orm.readGroup(
            "sale.order",
            [["state", "=", "done"]],
            ["partner_id.country_id", "amount_total:sum"],
            ["partner_id.country_id"]
        )
        this.state.salesByRegion = salesByRegion
        
        // Fetch monthly sales
        const monthlySales = await this.orm.readGroup(
            "sale.order",
            [["state", "=", "done"]],
            ["order_date", "amount_total:sum"],
            ["order_date:month"]
        )
        this.state.monthlySales = monthlySales
        
        this.state.loading = false
    }
    
    renderCharts() {
        this.renderTopProductsChart()
        this.renderSalesByRegionChart()
        this.renderMonthlySalesChart()
    }
    
    renderTopProductsChart() {
        const ctx = document.getElementById("topProductsChart").getContext("2d")
        const labels = this.state.topProducts.map(p => p.product_id[1])
        const data = this.state.topProducts.map(p => p.price_total)
        
        new Chart(ctx, {
            type: "bar",
            data: {
                labels: labels,
                datasets: [{
                    label: "Revenue",
                    data: data,
                    backgroundColor: "#E10600",
                }]
            },
            options: {
                responsive: true,
                onClick: (event, elements) => {
                    if (elements.length > 0) {
                        const index = elements[0].index
                        const productId = this.state.topProducts[index].product_id[0]
                        this.drillDownProduct(productId)
                    }
                }
            }
        })
    }
    
    renderSalesByRegionChart() {
        const ctx = document.getElementById("salesByRegionChart").getContext("2d")
        const labels = this.state.salesByRegion.map(r => r["partner_id.country_id"][1])
        const data = this.state.salesByRegion.map(r => r.amount_total)
        
        new Chart(ctx, {
            type: "pie",
            data: {
                labels: labels,
                datasets: [{
                    data: data,
                    backgroundColor: ["#E10600", "#111827", "#3B82F6", "#10B981", "#F59E0B"],
                }]
            },
            options: { responsive: true }
        })
    }
    
    renderMonthlySalesChart() {
        const ctx = document.getElementById("monthlySalesChart").getContext("2d")
        const labels = this.state.monthlySales.map(m => m.order_date)
        const data = this.state.monthlySales.map(m => m.amount_total)
        
        new Chart(ctx, {
            type: "line",
            data: {
                labels: labels,
                datasets: [{
                    label: "Monthly Revenue",
                    data: data,
                    borderColor: "#E10600",
                    fill: false,
                }]
            },
            options: { responsive: true }
        })
    }
    
    drillDownProduct(productId) {
        // Navigate to product sales details
        this.action.doAction({
            type: "ir.actions.act_window",
            res_model: "sale.order.line",
            views: [[false, "list"]],
            domain: [["product_id", "=", productId]],
        })
    }
}

SalesDashboard.template = "custom_module.SalesDashboard"

registry.category("actions").add("custom_module.sales_dashboard", SalesDashboard)

<?xml version="1.0" encoding="UTF-8"?>
<templates xml:space="preserve">
    <t t-name="custom_module.SalesDashboard" owl="1">
        <div class="dashboard-container">
            <h1>Sales Dashboard</h1>
            
            <t t-if="state.loading">
                <div class="spinner">Loading...</div>
            </t>
            
            <t t-else="">
                <div class="row">
                    <!-- Top Products Chart -->
                    <div class="col-lg-6">
                        <div class="card">
                            <div class="card-body">
                                <canvas id="topProductsChart"></canvas>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Sales by Region Chart -->
                    <div class="col-lg-6">
                        <div class="card">
                            <div class="card-body">
                                <canvas id="salesByRegionChart"></canvas>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- Monthly Sales Chart (Full Width) -->
                <div class="row mt-4">
                    <div class="col-lg-12">
                        <div class="card">
                            <div class="card-body">
                                <canvas id="monthlySalesChart"></canvas>
                            </div>
                        </div>
                    </div>
                </div>
            </t>
        </div>
    </t>
</templates>

<?xml version="1.0" encoding="utf-8"?>
<odoo>
    <record id="action_sales_dashboard" model="ir.actions.client">
        <field name="name">Sales Dashboard</field>
        <field name="tag">custom_module.sales_dashboard</field>
    </record>
    
    <menuitem id="menu_sales_dashboard" 
              name="Dashboard"
              action="action_sales_dashboard" 
              parent="sale.sale_menu_root"
              sequence="1"/>
</odoo>

// Use D3.js for maximum control
// Similar setup but with D3 library
import * as d3 from "https://cdn.jsdelivr.net/npm/d3@7"

export class InventoryHeatmap extends Component {
    async renderHeatmap() {
        const data = await this.fetchInventoryData()
        
        const svg = d3.select("#heatmap")
            .append("svg")
            .attr("width", 1000)
            .attr("height", 600)
        
        // Render heatmap using D3
        // Products on X-axis, Warehouses on Y-axis
        // Color intensity shows stock level
        
        // Create scales
        const xScale = d3.scaleBand()
            .domain(data.products)
            .range([0, 800])
        
        const yScale = d3.scaleBand()
            .domain(data.warehouses)
            .range([0, 500])
        
        const colorScale = d3.scaleSequential(d3.interpolateReds)
            .domain([0, d3.max(data.values)])
        
        // Render cells
        svg.selectAll("rect")
            .data(data.values)
            .enter()
            .append("rect")
            .attr("x", d => xScale(d.product))
            .attr("y", d => yScale(d.warehouse))
            .attr("width", xScale.bandwidth())
            .attr("height", yScale.bandwidth())
            .attr("fill", d => colorScale(d.stock_level))
            .on("click", d => this.drillDownInventory(d))
    }
}