Ir al contenido
Menú
Se marcó esta pregunta
2 Respuestas
1898 Vistas

i have made a graph in kanban the colour of the graph is light gray by default if there is data inside my widget is widget="dashboard_graph", but i want to change the colour to light blue if there is data i did not find any widget my code is below:

Colonization
Property Types
Property Stages
Avatar
Descartar
Mejor respuesta

Hi,

If you are using the widget "dashboard_graph" and you need change the color of the graph, then you may need to check the JS file of the widget and you can patch the js file and change the color in it. The Js file is "JournalDashboardGraphField" you can search for this class in the JS file and make the changes.

You can refer to our below blog to get idea on patching a component in js https://www.cybrosys.com/blog/how-to-patch-existing-owl-component-in-odoo-17


Hope it helps

Avatar
Descartar
Mejor respuesta

To change the color of a graph in an Odoo Kanban view based on whether there is data or not, you can achieve this by customizing the CSS styles of the graph widget based on the presence of data. Since there's no built-in widget for this specific requirement, you'll need to use custom JavaScript and CSS.

Here's a general approach to accomplish this:

  1. Identify the Graph Element: First, you'll need to identify the HTML element of the graph widget in your Kanban view. You can do this by inspecting the page source in your web browser.
  2. Add Custom JavaScript: Write JavaScript code to check if there is data present in the graph widget. This can involve querying the data and analyzing its presence.
  3. Update CSS Styles: Based on the presence or absence of data, dynamically update the CSS styles of the graph widget to change its color accordingly.

Here's a simplified example of how you might implement this:

javascriptCopy codeodoo.define('your_module_name.custom_dashboard_graph', function (require) {
    "use strict";

    var KanbanView = require('web.KanbanView');

    KanbanView.include({
        // Override the `render` method to add custom logic
        render: function () {
            var self = this;
            this._super.apply(this, arguments);
            
            // Check if there is data in the graph widget
            // For simplicity, let's assume `this` refers to the Kanban view element
            var $graphWidget = this.$('.o_dashboard_graph');
            var hasData = ... // Your logic to check if data is present

            // Update CSS styles based on data presence
            if (hasData) {
                $graphWidget.css('background-color', 'lightblue');
            } else {
                $graphWidget.css('background-color', 'lightgray');
            }
        },
    });
});

Please note that this is a simplified example, and you'll need to adjust it based on your specific requirements and the structure of your Odoo module. You may also need to handle asynchronous data loading if applicable.

Remember to replace 'your_module_name' with the actual name of your Odoo module.

Additionally, you may need to consider browser compatibility and other factors while implementing custom JavaScript and CSS in Odoo. Testing thoroughly across different browsers and devices is recommended.

Avatar
Descartar
Publicaciones relacionadas Respuestas Vistas Actividad
2
may 24
1381
1
ago 23
2362
1
jun 23
2595
1
dic 23
2027
2
sept 23
11401