Google charts into JQuery Tab draw issue

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 having is that the first report that gets drawn in works fine and looks fine.

The 2nd looks quite wrong, I think its something to do with how am drawing the tables maybe but am unable to find a solution, this issue does not happen when am simply drawing it into divs outside the JQuery UI tabs.

This is the current code I have right now:

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

I have made a configured a JS fiddle to emulate the issue am having HERE

Answers:

Answer

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

I have modified it with my own code based of the suggestion you gave @Whitehat which works fine but it means I have to use globals which I believe is not recommended.

What are your thoughts on this or any suggested changes or improvements?

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

});

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.