OdooWiki OCA HUB

Web Widget JSON Graph

web_widget_json_graph folder_open OCA/web open_in_new
Hidden/Dependency License: LGPL-3

This module allows to load a line graph per ordered pair from an One2many or Many2many field.

auto_awesome What this module does

AI-generated from the code · Odoo 15.0

Adds a new field widget called "json_graph" that draws a chart from JSON data stored in a field, using the Chart.js library inside Odoo forms.

This module is a technical building block rather than a standalone business feature. It registers a new field widget named json_graph in Odoo's field registry, so developers can display a JSON field as a line/bar chart instead of raw text.

When a form view uses this widget, the widget reads the field's value, interprets it as JSON, and renders a chart on an HTML canvas element inside the field area. The chart is drawn with the Chart.js library, which the widget loads automatically before starting.

  • The widget is available anywhere a field widget can be selected (for example in form views), but only for fields whose content is valid JSON describing a chart configuration.
  • It does not create menus, models, reports, scheduled actions, emails or business rules.
  • It does not add any database tables or server-side logic; everything happens in the browser.
  • It depends only on the standard web module and is not installed automatically.

Because the module contains no models, menus or data files, its only visible effect is the new chart-style field rendering. Any use requires a developer to configure a field and provide JSON data in the expected chart format.

Depends on

web

Text generated by AI (DeepSeek) from reading the Odoo 15.0 code on GitHub; it may contain mistakes, so check the code before deciding. View the code on GitHub

Availability by version

Reviewed: 2026-11-03
Confirmed (verified in repository and branch) Estimated (unverified) No information

Confirmation status: 2 confirmed, 7 with no information of 9 versions.

terminal Installation and usage

OCA documentation · Odoo 15.0

Usage

Source · Odoo 15.0

Use this widget by including:

<field name="field_text_json" widget="json_graph" />

For example:

<field name="values_data" widget="json_graph"/>

The JSON needs to be like:

info = {
    "type": "line",
    "data": {"datasets": [], "labels": []},
    "options": {
        "scales": {
            "yAxes": [
                {
                    "ticks": {"beginAtZero": True, "stacked": False},
                    "scaleLabel": {"display": True, "labelString": "Quantity"},
                }
            ],
            "xAxes": [
                {
                    "scaleLabel": {"display": True, "labelString": "Date"},
                }
            ],
        },
        "elements": {"point": {"radius": 3}},
        "legend": {"labels": {"usePointStyle": True}},
        "tooltips": {"intersect": False, "axis": "xy", "mode": "index"},
    },
}
self.field_text_json = json.dumps(info)

For example:

plot_dataset = [1, 2, 3, 4, 3, 2]
labels = ["Jan", "Feb", "Mar", "Apr", "May", "Jun"]
info = {
    "type": "line",
    "data": {"datasets": plot_dataset, "labels": labels},
    "options": {
        "scales": {
            "yAxes": [
                {
                    "ticks": {"beginAtZero": True, "stacked": False},
                    "scaleLabel": {"display": True, "labelString": "Quantity"},
                }
            ],
            "xAxes": [
                {
                    "scaleLabel": {"display": True, "labelString": "Date"},
                }
            ],
        },
        "elements": {"point": {"radius": 3}},
        "legend": {"labels": {"usePointStyle": True}},
        "tooltips": {"intersect": False, "axis": "xy", "mode": "index"},
    },
}
self.values_data = json.dumps(info)

For more information, please see Chart Js Documentation <https://www.chartjs.org/docs/2.9.4/>.

No verified information in OCA: Installation, Configuration.

info

Data imported from GitHub: this sheet reflects the latest catalog review, not a live lookup. Always check the module documentation and staging before installing in production.