javascript - Ranking a Google visualization Table -
so have far rank table @ first see main table (allstores table) , when click on rank header table owners stores pop shows owners rank in respect other competitors stores. want arrow sort event on each of headers in main table. did find solution gives me doing solution not show owners stores table.you can see code in jsfiddle.
google.setonloadcallback(draw); google.setonloadcallback(drawmystores); var data = new google.visualization.datatable(); function allstores() { data.addcolumn('number', 'rank'); data.addcolumn('string', 'store name'); data.addcolumn('number', ' sales'); data.addcolumn('number', 'sos'); var raw= ([ [1 ,'bayfair', 4895, 68 ], [2 ,'greerton', 3158, 126], [3 ,'frankton', 3689, 79], [4 ,'mt manganui', 3069, 72], [5 ,'tauranga', 2689 , 68], [6 ,'te rapa', 2269, 143], [7 ,'the base', 1895, 125], ]);
a few changes...
set 1 callback function.
don't create things under google namespace until callback called.
here, use sort event sort both tables same...
var data; var data2; var table; var table2; var view; var formatter; var options = { showrownumber: false, width: '100%', height: '100%', sort: 'enable', sortascending: true, sortcolumn: 0 } var array; var dollarsign= '$'; google.load('visualization', '1', {'packages': ['table'], 'callback': draw}); function allstores() { data.addcolumn('number', 'rank'); data.addcolumn('string', 'store name'); data.addcolumn('number', ' sales'); data.addcolumn('number', 'sos'); var raw= ([ [1 ,'bayfair', 4895, 68 ], [2 ,'greerton', 3158, 126], [3 ,'frankton', 3689, 79], [4 ,'mt manganui', 3069, 72], [5 ,'tauranga', 2689 , 68], [6 ,'te rapa', 2269, 143], [7 ,'the base', 1895, 125], ]); data.addrows(raw); var sorted = raw.slice().sort(function(a,b){return b-a}) var ranks = raw.slice().map(function(v){ return sorted.indexof(v)+1 }); var formatter = new google.visualization.numberformat({ prefix: '$' }); formatter.format(data, 2); } function draw() { formatter = new google.visualization.numberformat({ prefix: '$' }); data = new google.visualization.datatable(); allstores(); table = new google.visualization.table(document.getelementbyid('table_div')); google.visualization.events.addlistener(table, 'sort', sorttables); sorttables(); } function sorttables(usersort) { if (usersort) { options.sortcolumn = usersort.column; options.sortascending = usersort.ascending; } data.sort({column: options.sortcolumn, desc: (!options.sortascending)}); (var = 0; < data.getnumberofrows(); i++) { data.setvalue(i, 0, + 1); } initialisecolumns(); table.draw(data, options); table2.draw(data2, options); } function initialisecolumns() { view = new google.visualization.dataview(data); data2 = new google.visualization.datatable(); data2.addcolumn('number', 'rank'); data2.addcolumn('string', 'store name'); data2.addcolumn('number', 'sales'); data2.addcolumn('number', 'sos'); array = []; mystores(); (var j = 0; j < array.length; j++) { data2.addrow([array[j][0], array[j][1], array[j][2], array[j][3]]); formatter.format(data2, 2); } table2 = new google.visualization.table(document.getelementbyid('table_div1')); google.visualization.events.addlistener(table2, 'sort', sorttables); } function mystores() { (var = 0; < data.getnumberofrows(); i++) { if (view.getvalue(i, 1) == 'the base' || view.getvalue(i, 1) == 'greerton') { array.push([view.getvalue(i, 0), view.getvalue(i, 1), view.getvalue(i, 2), view.getvalue(i, 3)]); } } }<script src="https://www.google.com/jsapi"></script> <body style='background-color:beige;'> <div id='text'> <h1 style='color: purple;'> rank table </h1> </div> <div id="test1"></div> <div id="test2"></div> <br/> <i class="material-icons"></i> <div style='color:purple; ' id="table_div1"></div> <br/> <div style='color:purple;' id="table_div"></div> </body>
Comments
Post a Comment