Menu
So what I have so far is a rank table where at first you see the main table (allstores Table) and when you click on rank header another table with the owners stores pop up that shows the owners rank in respect to the other competitors stores. What I want is a arrow sort event on each of my headers in the main table. I did find some solution that gives me that but then by doing that solution it would not show the owners stores table.You can see my 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],
]);
704
asked Jun 24 '26 06:06
A few changes...
Only set one callback function.
Don't create things under the google namespace until the callback is called.
Here, I use the sort event to sort both tables the 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)});
for (var i = 0; i < data.getNumberOfRows(); i++) {
data.setValue(i, 0, i + 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();
for (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() {
for (var i = 0; i < 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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
