javascript - node - socket io on message

Gráficos de Google en JQuery Tab dibujar problema

Question

Actualmente estoy tratando de mover los gráficos de Google en los que se extraen los datos desde el servidor a través de socket.io y dibujarlos en las pestañas de la IU de JQuery.

El problema es que el primer informe que se dibuja funciona bien y se ve bien.

La segunda parece bastante incorrecta, creo que tiene algo que ver con cómo puedo dibujar las tablas, pero no puedo encontrar una solución, este problema no ocurre cuando simplemente lo dibujo en divs fuera de las pestañas de la IU de JQuery.

Este es el código actual que tengo ahora:

jQuery(function ($) {
    var socket = io.connect();
    var result = [];
    google.charts.load(''current'', {
            packages : [''bar'']
        });

 $(function() {
    $( "#tabs" ).tabs();
  });

    socket.on("SQLdipo", function (valueArr) {
        google.charts.setOnLoadCallback(drawMaterial);
        var data = valueArr;
        function drawMaterial() {

            var result = [[''Call Disposition'', ''Answered'', ''No Answer'', ''Busy'',''Failed'']].concat(valueArr);
            var options = {
                height: 350,
                 chart: {
            title: ''Agent Call Dispositions'',
            subtitle: ''Agent call states'',
          }
            };
            var chartdata = new google.visualization.arrayToDataTable(result);
            var chart1 = new google.charts.Bar(document.getElementById(''chartDipo''));
            chart1.draw(chartdata, options);
        }
    });

    socket.on("SQLmins", function (valueArr) {
        google.charts.setOnLoadCallback(drawChart);
        var data = valueArr;
        function drawChart() {

            var result = [[''Total Mins'', ''Active'',''Inactive'']].concat(valueArr);
            var options = {
                height: 350,
                 chart: {
            title: ''Agent Activity in seconds'',
            subtitle: ''Agent Duration Activity'',
          }
            };
            var chartdata = new google.visualization.arrayToDataTable(result);
            var chart2 = new google.charts.Bar(document.getElementById(''chartMins''));
            chart2.draw(chartdata, options);
        }
    });
});

He hecho un violín JS configurado para emular el problema estoy AQUÍ

Answer 1

Creo que el problema es que el gráfico está oculto cuando se dibuja inicialmente.
Puede establecer un ancho específico o ...

Espere hasta que la pestaña esté activada, antes de dibujar el gráfico, como en este ejemplo ...

$(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);
  }
});

<link rel="stylesheet" type="text/css" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div class="tab-div" id="tabs">
  <ul>
    <li><a href="#tabs-1">Call Disposition</a></li>
    <li><a href="#tabs-2">Agent Activity</a></li>
  </ul>
  <div id="tabs-1">
    <div class="report-style" id="chartDipo"></div>
  </div>
  <div id="tabs-2">
    <div class="report-style" id="chartMins"></div>
  </div>
</div>

Answer 2

Lo he modificado con mi propio código en base a la sugerencia que le diste a @Whitehat que funciona bien, pero significa que tengo que usar globales, lo que no creo que sea recomendable.

¿Cuáles son sus pensamientos sobre este o cualquier cambio o mejora sugeridos?

jQuery(function ($) {
    //Global Varibles
    var socket = io.connect();
    var result = [];
    google.charts.load(''current'', {
            packages : [''bar'']
        });

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

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

    socket.on("SQLdipo", function (valueArr) {
        google.charts.setOnLoadCallback(drawMaterial);
        data1 = valueArr;
    });

    socket.on("SQLmins", function (valueArr) {
        google.charts.setOnLoadCallback(drawChart);
        data2 = valueArr;
    });


        function drawMaterial() {

            var result = [[''Call Disposition'', ''Answered'', ''No Answer'', ''Busy'',''Failed'']].concat(data1);
            var options = {
                height: 350,
                 chart: {
            title: ''Agent Call Dispositions'',
            subtitle: ''Agent call states'',
          }
            };
            var chartdata = new google.visualization.arrayToDataTable(result);
            var chart1 = new google.charts.Bar(document.getElementById(''chartDipo''));
            chart1.draw(chartdata, options);
        }

        function drawChart() {

            var result = [[''Total Mins'', ''Active'',''Inactive'']].concat(data2);
            var options = {
                height: 350,
                 chart: {
            title: ''Agent Activity in seconds'',
            subtitle: ''Agent Duration Activity'',
          }
            };
            var chartdata = new google.visualization.arrayToDataTable(result);
            var chart2 = new google.charts.Bar(document.getElementById(''chartMins''));
            chart2.draw(chartdata, options);
        }

});