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

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

});