eCharts + slideUp/Down fadeOut/In

[Stuart and Joy]

Hi Devs

Great product, congrats!

I am struggling to render some charts when I am calling first with a hidden
div, then render the chart, then fade in / slide down the div the canvas
resides in.

The Chart is blank until I resize the page.  I have the window listener for
resize working (clearly as it re-renders the chart) but I do not understand
why when sliding down or fading on the chart fails.

Initial load where the div (panel) is blank
[image: image.png]

Then resizing the browser, the charts are rendered?
[image: image.png]

Have you had or heard of this before?  Do you have any suggestions?

Code:
$(document).ready(function() {
.
. other code ...
.
  // control resize of charts
  $(window).on('resize',function() {
    console.log("resizing");
     $(".hl-chart").each(function(){
       var id = $(this).attr('_echarts_instance_');
       window.addEventListener('resize',
window.echarts.getInstanceById(id).resize);
     });

$("#contains_tables").find($(".fixed-table-body")).css("overflow","hidden").css("overflow-x","auto");
  });
});

// 2022-07-28 - SB wrap entire logic in fade in loading
hideAll();
$("#loading").slideDown(400, function() {
.
.   get the data
.
.   generate the charts
.
.  if no data found showNoData()
.
.  else

.
});

// 2022-07-27 - Peter - show_no_information "modal" - Hide charts
function showNoData() {
// 2022-07-27 - Peter - show modal
$( "#loading").fadeOut(400, function() {
$( '#no-data-found' ).fadeIn(400);
});
}

function showData() {
// 2022-07-27 - Peter - show modal
$( '#report-functions' ).show();
$( '#chart-start' ).show();
$( '#side-by-side' ).show();
$( '#delivered-emails' ).show();
$( '#email-open' ).show();
$( '#main_div' ).show();
$(window).trigger('resize');
}

// 2022-07-27 - Peter - show_no_information "modal" - Hide charts
function hideAll() {
$( '#no-data-found' ).hide();
$( '#report-functions' ).hide();
$( '#chart-start' ).hide();
$( '#side-by-side' ).hide();
$( '#delivered-emails' ).hide();
$( '#email-open' ).hide();
$( '#main_div' ).hide();
}