Pivot chart - showOverlay

Webix JS
#1

Hi,

How can I show / hide overlay with Pivot Chart component?

This code doesn’t work:

    webix.extend(this, webix.OverlayBox);
    pivot.showOverlay(message);

Thank you.

#2

Hi Mika,

Please try the following:

webix.extend($$("pivot"), webix.OverlayBox);
$$("pivot").showOverlay("My message");
#3

Hi, Maria,

Well it is working, but not good enough :frowning:

  1. Please have a look at http://snag.gy/uawbE.jpg. Message is not centered according the bounding rectangle. I think that rectangle is not necessary at all :slight_smile:

  2. If where is no data I would like to show “no data” overlay.

    var pivotchart = $$(“pivotchart”);
    var charttable = pivotchart.$$(“chart”);

    webix.extend(pivotchart, webix.OverlayBox);

    charttable.attachEvent(“onAfterLoad”, function() {
    if (!charttable.data.count()) { //if no data is available
    showOverlay(pivotchart, webix.i18n.app.message_nodata);
    }
    });

But empty chart hides overlay after load.

#4

Hi Mika,

“I think that rectangle is not necessary at all :)”

You can redefine .webix_loading_overlay css rule as you need. For example:

.webix_loading_overlay{
   border:none !important;
   background-color: #fff  !important;
   background-image: none !important;
}

“But empty chart hides overlay after load.”

Yes, overlay is shown only while data are loaded. So, you can call showOverlay if you want to show it on another action. But if you need to show it on AfterLoad event, you should use delay, because the control has own event handler that hides popup:

charttable.attachEvent("onAfterLoad", function() { 
     if (!charttable.data.count()) { 
         webix.delay(function(){
             pivotchart.showOverlay(webix.i18n.app.message_nodata);
         }); 
     } 
});
#5

Hi Maria,

It works, but now I can’t just show new overlay after calling

webix.delay(function(){
         pivotchart.showOverlay(webix.i18n.app.message_nodata);
     });

In order to show new overlay I have to call pivotchart.hideOverlay() before pivotchart.showOverlay().

Is it bug or not?

#6

Actually it was kind of expected, only one overlay can exists per component, and while previous one is open, you can’t show the next one.

We can update functionality in the next update, so showOverlay call will automatically hide the previous one.

#7

Ok, It would be very good :slight_smile:

Please fix this minor bugs in the next release too:

  1. Pivot Chart, settings dialog - list of fields should be scrollable.

  2. Pivot Chart, setting dialog - default length of cancel and apply buttons are too small (100px), please make it at least 130.

  3. Pivot, settings dialog - all lists should be scrollable.

  4. Pivot settings dialog - default length of cancel and apply buttons are too small (100px), please make it at least 130.

#8

Thanks for the list of suggestions, we will try to include fixes for all above issues in the next update.