Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
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.
//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);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment