Google charts into JQuery Tab draw issue

Question

I am currently trying to move Google charts in which the data is being pulled from the server-side via socket.io and drawing them into JQuery UI Tabs.

The issue am h

Answer 1

the problem is the chart is hidden when it is initially drawn.
you could set specific size options or...

wait until the tab is activated, before drawing the chart for the first time, as in this example...

$(document).ready(function() {
  $("#tabs").tabs({
    activate: function(event, ui){
      switch (ui.newTab.index()) {
        case 0:
          drawMaterial();
          break;

        case 1:
          drawChart();
          break;
      }
    }
  });

  google.charts.load('current', {
    callback: drawMaterial,
    packages: ['bar']
  });

  function drawMaterial() {
    var data = google.visualization.arrayToDataTable([
      ['Call Disposition', 'Answered', 'No Answer', 'Busy', 'Failed'],
      ['1000', 4, 0, 2, 0],
      ['1001', 4, 2, 0, 0],
      ['1002', 6, 0, 0, 0]
    ]);

    var options = {
      height: 350,
      chart: {
        title: 'Agent Call Dispositions',
        subtitle: 'Agent call states',
      }
    };
    var chart1 = new google.charts.Bar(document.getElementById('chartDipo'));
    chart1.draw(data, options);
  }

  function drawChart() {
    var data = google.visualization.arrayToDataTable([
      ['Call Disposition', 'Answered', 'No Answer', 'Busy', 'Failed'],
      ['1000', 4, 0, 2, 0],
      ['1001', 4, 2, 0, 0],
      ['1002', 6, 0, 0, 0]
    ]);

    var options = {
      height: 350,
      chart: {
        title: 'Agent Call Dispositions',
        subtitle: 'Agent call states',
      }
    };
    var chart1 = new google.charts.Bar(document.getElementById('chartMins'));
    chart1.draw(data, options);
  }
});

  

    
Call Disposition
    
Agent Activity