M.App Enterprise Discussions

[edohalove]

Hey community,

I've set up a BI Map that contains a composite chart among others.

This composite chart always has a weird vertical offset. I've tried fixing this through the properties but with no luck.

The only thing that fix it temporary is when i click Apply Properties (even with  no change).

However in running mode, it can't be fixed at all.

I think it might be a bug. But i need it to be fixed because i have a demo. 

Can someone help with this?

screenshot of the issue

 

[edohalove]

Nobody has an idea?

[pszrajber]

Hi Elodie,

Yes, it looks weird. We are investigating what's wrong. Just in order not to miss anything - could you please briefly describe the steps to reproduce this behavior?

[marcin.karpinski]

Hello,

We are investigating but meanwhile maybe you can try to manipulate margins of individual charts within composite chart?
It's possible after selecting child charts from "Select widget" combox:

[edohalove]

Thanks for the suggestion.

I did change the margins (in my app it's called offset) for all three charts in the composite chart, then saved the Apps.

When I reopen, i have the same strange behavior.

 

Piotr, what i did was add the composite chart to the map, add the bar chart and configure it, add one line chart and then the other and configure them.

The first time i reopen my app, the chart was all weird.

I had a button at the bottom of the preview button that was supposed to transform the charts in grid chart or something like that.

I didn't screenshot it 

I'm onto something urgent right now but after that if needed i will try to reproduce that for you guys.

[marcin.karpinski · Accepted solution]

A quick workaround for this would be to force redrawing composite chart after it loads in your application.

To do this first you should go to editor and in chart's settings panel (advanced settings part) add a css class which will help you identify your chart:

Next paste following code into application scripts editor (remembering to change your class):

function correctWidgetMargins() {
    if (!document.querySelector(".my_chart-class svg")) {
        setTimeout(correctWidgetMargins, 500);
    } else {
        $GP.bi.stage.findWidgets({
            descriptors: [function(item) {
                return item.chartM.compositeId || item.chartM.chart === "composite";
            }]
        }, function(widgets) {
            var l = widgets.length;
            while (l--) {
                if (!widgets[l] || !widgets[l].chart) continue;
                widgets[l].chart.margins(widgets[l].chart.margins());
                // alternatively you can specify margins: widgets[l].chart.margins({top: 20, bottom: 20, left: 40, right: 20});
                widgets[l].chart.render();
            }
        });
    }
}

correctWidgetMargins();

* of course if you can skip the first part (adding css class) if you already know how to build a valid css selector for your chart's svg.