Processing javascript objects with google charts -
i trying draw google visualization pie chart based on below json. having issues since google takes numerical data, instead of plain objects.
for example, want pie chart based on usecase. pie chart list vdi,upgrade,demo , show proportion related total. please help.
here json example [{"id":0,"processedtime":"2012/01","approver":"zoo","poc":"poc1","usecase":"vdi"},{"id":0,"processedtime":"2012/02","approver":"zoo","poc":"poc1","usecase":"upgrade"},{"id":0,"processedtime":"2012/03","approver":"zoo","poc":"poc2","usecase":"demo"},{"id":0,"processedtime":"2012/04","approver":"victor","poc":"poc2","usecase":"demo"},{"id":0,"processedtime":"2012/05","approver":"victor","poc":"poc3","usecase":"vdi"},{"id":0,"processedtime":"2012/06","approver":"victor","poc":"poc3","usecase":"upgrade"},{"id":0,"processedtime":"2012/05","approver":"tom","poc":"poc3","usecase":"vdi"},{"id":0,"processedtime":"2012/06","approver":"tom","poc":"poc3","usecase":"upgrade"}]
// full source google.setonloadcallback(drawchart); function drawchart() { $.get('/home/getdata', {}, function (data) { var tdata = new google.visualization.datatable(); tdata.addcolumn('string', 'usecase'); tdata.addcolumn('int', 'count'); // reservation based on usecase var reservationbyusecase = []; (var = 0; < data.length; i++) { var d = data[i]; // if not part of array.. add if ($.inarray(d.usecase, reservationbyusecase) === -1) { var usecasevalue = d.usecase; var usecasecountvalue = 1; reservationbyusecase.push({ usecase: usecasevalue, usecasecount: usecasecountvalue }); } // if part of array.. increase count if ($.inarray(d.usecase, reservationbyusecase) !== -1) { var cusecase = reservationbyusecase[$.inarray(d.usecase, reservationbyusecase)]; cusecase.usecasecount = cusecase.usecasecount + 1; reservationbyusecase[$.inarray(d.usecase, reservationbyusecase)] = cusecase } } (var = 0; < reservationbyusecase.length; i++) { tdata.addcolumn(reservationbyusecase[i].usecasevalue, reservationbyusecase[i].usecasecountvalue) alert(reservationbyusecase[i].usecasevalue); alert(reservationbyusecase[i].usecasecountvalue); } var options = { title: "reservations" }; var chart = new google.visualization.piechart(document.getelementbyid('chart_div')); chart.draw(tdata, options); }); }
you need loop through data , add each usecase:
var ndata = {} var data = [{"id":0,"processedtime":"2012/01","approver":"zoo","poc":"poc1","usecase":"vdi"},{"id":0,"processedtime":"2012/02","approver":"zoo","poc":"poc1","usecase":"upgrade"},{"id":0,"processedtime":"2012/03","approver":"zoo","poc":"poc2","usecase":"demo"},{"id":0,"processedtime":"2012/04","approver":"victor","poc":"poc2","usecase":"demo"},{"id":0,"processedtime":"2012/05","approver":"victor","poc":"poc3","usecase":"vdi"},{"id":0,"processedtime":"2012/06","approver":"victor","poc":"poc3","usecase":"upgrade"},{"id":0,"processedtime":"2012/05","approver":"tom","poc":"poc3","usecase":"vdi"},{"id":0,"processedtime":"2012/06","approver":"tom","poc":"poc3","usecase":"upgrade"}]; (i = 0; < data.length; i++) { var d = data[i]; if (ndata[d["usecase"]] == null) { ndata[d["usecase"]] = 1 } else { ndata[d["usecase"]] = ndata[d["usecase"]] + 1 } } console.log(ndata);
here's fiddle: http://jsfiddle.net/znj0klsg/
Comments
Post a Comment