Section Views displays based on checkbox selection, how to draw Google Charts with good legend?

Question

So I have read you can't draw nice Google Charts when the div's are hidden, somehow the legend is way off.

Now I am trying some solutions I have found here, but none of them seems to work. I am using this as last part of my draw Chart function

var container = document.getElementById("chart1");
    container.style.display = null;
    var chart = new google.visualization.PieChart(container);

    chart.draw(data, options);


    and my Google Chart calls

//  Section1
        google.charts.setOnLoadCallback(drawA1);
        google.charts.setOnLoadCallback(drawA2);
        google.charts.setOnLoadCallback(drawA3);
        google.charts.setOnLoadCallback(drawa4);
        google.charts.setOnLoadCallback(drawA5);
        //Section2
        google.charts.setOnLoadCallback(drawB1);
        google.charts.setOnLoadCallback(drawB2);
        google.charts.setOnLoadCallback(drawB3);
        google.charts.setOnLoadCallback(drawB4);
        // Section3
        google.charts.setOnLoadCallback(drawC1);
        google.charts.setOnLoadCallback(drawC2);
        google.charts.setOnLoadCallback(drawC3);
        google.charts.setOnLoadCallback(drawC4);
        google.charts.setOnLoadCallback(drawC5);
        google.charts.setOnLoadCallback(drawC6);

On page load all sections are hidden and this is the function which show hides section views based on checkboxes selected

// Show / Hide Section Views
                $("input[name='section_view[]']:checked").each(function ()
                {
                    var inputValue = $(this).attr("value");

                    $("#section_view" + inputValue).toggle();
                    $("#menuItemSection" + inputValue).toggle();
                });

What else can I try so the google charts are drawn as expected???

ps: I am trying out How to fix overlapping Google Chart legend for my situation, but no luck at the moment

Answer 1

first, setOnLoadCallback only needs to be called once per page load
but you can use the promise the load statement returns instead
in addition, the load statement will wait for the page to load before returning the promise
as such, google.charts.load can be used in place of --> $(document).ready (or similar method)

recommend replacing "on page load" function with google.charts.load
move all the page load stuff there

and when the promise is returned, you can start drawing charts without --> setOnLoadCallback
when section is made visible, use the toggle's complete option to know when toggle is done
(just provide a function)

then draw the chart
you can probably use inputValue to know which chart to draw
see following example...

// replace $(document).ready with the following

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {  // <-- promise function returned

  // move on page load stuff here

  // move draw chart functions here...
  $("input[name='section_view[]']:checked").each(function ()
  {
      var inputValue = $(this).attr("value");
      $("#section_view" + inputValue).toggle(function () {

        $("#menuItemSection" + inputValue).toggle(function () {

          // draw chart
          switch (inputValue) {
            case 'A1':
              drawA1();
              break;

            case 'B1':
              drawB1();
              break;

            // etc...
          }

        });

      });
  });
});