Pulls data from a JSON feed, parses and prepares it for hand-off to and return from Google Charts API. Also pulls data from the same feed and posts it elsewhere on the page for display in tables and large callouts.

charts.js

//parses raw JSON and makes workable array
function prepData(jsonData) { 
  var dataArr = [];
  var staffArr = [];
  var bugsArr = [];
  $.each($.parseJSON(jsonData), function(key,value){
      if (key == 'staff_tickets') {
        var result = $.parseJSON(value);
        $.each(result, function(obj,vals) {
          var tempArr = [];
          tempArr[0] = vals.initials;
          tempArr[1] = parseInt(vals.responses);
          staffArr.push(tempArr);
          });
      } else if (key == 'staff_bugs') {
        var result = $.parseJSON(value);
        $.each(result, function(obj,vals) {
          var tempArr = [];
          tempArr[0] = vals.initials;
          tempArr[1] = parseInt(vals.bugs_closed);
          bugsArr.push(tempArr);          
          });
      } else {
        var tempArr = [];
        tempArr[0] = key;
        tempArr[1] = parseFloat(value);
        dataArr.push(tempArr);
      }
  });
  dataArr['staff_tickets'] =  staffArr;
  dataArr['staff_bugs'] =  bugsArr;
  return dataArr;
}
// Draws Statistics Tables
function statTable(statArr, title, target) {
    var table = "<table class='stats-table'><thead><th colspan='2'>Name</th><th>"+title+"</th></thead><tbody>";
    statArr.forEach(function(row) {
      table += "<tr><td class='key-color'></td><td>"+row[0]+"</td><td>"+row[1]+"</td></tr>";
    });
    table += "</tbody></table>";
    $(target).append(table);
}

// Main function initialized on page load
function drawCharts() {
  
  //pull JSON feed
  var ticketData = $.ajax({
    url: "URL OF JSON FEED GOES HERE",
    dataType:"json",
    async: false,
    }).responseText;

  //Prepare data 
    var ticketArr = prepData(ticketData);
    
  // Create Unassigned / Open Ticket Callouts & Response Average
    var unassignedTickets = ticketArr[0][1];
    var openTickets = ticketArr[1][1];
    var aveResponse = (ticketArr[2][1] / 60).toFixed(2);

    $( "#unassignedTickets" ).prepend( "<p class='number'>"+unassignedTickets+"</p>" );
    $( "#openTickets" ).prepend( "<p class='number'>"+openTickets+"</p>" );
    $( "#responseAverage" ).prepend( "<p class='number'>"+aveResponse+"</p>" );

  // Draw SUPPORT TICKET TABLE
    var staffArr = ticketArr['staff_tickets'];
    statTable(staffArr, 'Tickets Resolved', staffTable);

  // Draw BUGS TABLE
    var bugArr = ticketArr['staff_bugs'];
    statTable(bugArr, 'Bugs Resolved', bugTable);

  // Pie Chart Options
  var chartOptions = {    
      is3D: true,
      backgroundColor: '#203d67',
      height: 460,
      width: 475,
      fontName: 'Ubuntu Mono',
      chartArea: {
        left: 10,
        top: 10,
        width: '95%',
        height: '95%',
      },
      legend: {
        position: 'none',
        textStyle: { 
          color: 'white',
          fontSize: 24,
          bold: false,
          italic: false }
      },
      pieSliceTextStyle: {
        color: 'white',
        fontSize: 24,
      },
    };

  // Instantiate and draw SUPPORT TICKET PIE CHART
    var staffData = new google.visualization.DataTable();
    staffData.addColumn('string', 'Initials');
    staffData.addColumn('number', 'Responses');
    staffData.addRows(staffArr);
    var staffChart = new google.visualization.PieChart(document.getElementById('staffChart'));
    staffChart.draw(staffData, chartOptions);

  // Instantiate and draw BUG PIE CHART
    var bugData = new google.visualization.DataTable();
    bugData.addColumn('string', 'Initials');
    bugData.addColumn('number', 'Responses');
    bugData.addRows(bugArr);
    var bugChart = new google.visualization.PieChart(document.getElementById('bugChart'));
    bugChart.draw(bugData, chartOptions);
}