We Keep Coding

Adding pagination (table paging) to Google visualization table - javascript

I am looking to add pagination to my Google visualization table. I have followed the guide and have the code below. I can't figure out why it's not working... can anyone see anything wrong? The pagination part is at the bottom.
Also, as a longer term project, if possible, I'd be looking to have each page as a separate webpage rather than all on the same URL... anyone know a why to implement this?
Javascript code:
function drawTable() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('string', 'Team');
data.addColumn('string', 'Nationality');
data.addColumn('number', 'Height');
data.addColumn('number', 'Weight');
data.addColumn('number', 'Age');
data.addColumn('string', 'Foot');
data.addColumn('string', 'Position');
data.addColumn('number', 'Attack');
data.addColumn('number', 'Control');
data.addColumn('number', 'Dribbling');
data.addColumn('number', 'Low Pass');
data.addColumn('number', 'Lofted Pass');
data.addColumn('number', 'Finishing');
data.addColumn('number', 'Place Kicking');
data.addColumn('number', 'Controlled Spin');
data.addColumn('number', 'Heading');
data.addColumn('number', 'Defence');
data.addColumn('number', 'Ball Winning');
data.addColumn('number', 'Kicking Power');
data.addColumn('number', 'Speed');
data.addColumn('number', 'Explosive Power');
data.addColumn('number', 'Body Balance');
data.addColumn('number', 'Jump');
data.addColumn('number', 'Goalkeeping');
data.addColumn('number', 'Saving');
data.addColumn('number', 'Tenacity');
data.addColumn('number', 'Stamina');
data.addColumn('number', 'Form');
data.addColumn('number', 'Injury Resistance');
data.addColumn('number', 'Weak Foot Usage');
data.addColumn('number', 'Weak Foot Accuracy');
data.addColumn('number', 'Overall Rating');
data.addRows([
['RONALDO','REAL MADRID','PORTUGAL',187,80,28,'Right','LWF',94,90,95,83,87,92,93,85,97,48,49,96,87,87,90,89,50,50,74,78,5,3,5,7,99],
['MESSI','BARCELONA','ARGENTINA',169,67,26,'Left','SS',94,93,98,84,81,99,87,86,74,53,48,80,82,98,83,74,50,50,76,76,6,3,4,6,99],
['INIESTA','BARCELONA','SPAIN',170,65,29,'Right','CMF',86,98,97,94,86,83,72,82,64,67,49,77,78,87,75,63,50,50,78,88,6,2,6,8,98],
['BUFFON','JUVENTUS F.C.','ITALY',191,83,35,'Right','GK',42,60,62,62,63,45,45,45,55,41,45,78,73,75,87,86,96,98,82,62,7,2,4,4,97],
['XAVI','BARCELONA','SPAIN',170,68,33,'Right','CMF',82,95,89,98,90,73,80,82,67,71,58,76,74,83,74,72,50,50,80,88,8,2,4,5,97],
['PIRLO','JUVENTUS F.C.','ITALY',177,68,34,'Right','DMF',83,93,88,92,97,76,96,95,66,72,58,80,74,76,74,65,50,50,79,82,7,2,7,7,96],
['AGUERO','MAN BLUE','ARGENTINA',175,70,25,'Right','CF',90,88,90,77,73,92,73,72,82,49,47,83,90,90,85,94,50,50,74,83,7,3,5,5,96],
['IBRAHIMOVIC','PARIS SAINT-GERMAIN','SWEDEN',194,94,31,'Right','CF',91,93,96,88,87,87,81,79,76,47,52,93,78,73,98,78,50,50,78,76,5,2,5,6,95],
['VAN PERSIE','MANCHESTER UNITED','NETHERLANDS',183,71,30,'Left','CF',91,89,87,85,84,95,80,90,75,52,46,89,82,82,82,74,50,50,75,77,6,2,5,7,95],
['CAVANI','PARIS SAINT-GERMAIN','URUGUAY',184,74,26,'Right','CF',94,83,83,76,76,94,84,78,90,66,52,85,85,81,86,90,50,50,86,93,7,3,6,4,95],
['FALCAO','AS MONACO FC','COLOMBIA',177,72,27,'Right','CF',94,82,81,79,77,98,75,74,97,55,44,81,80,84,76,86,50,50,77,78,6,3,5,6,95],
['CASILLAS','REAL MADRID','SPAIN',185,84,32,'Left','GK',40,47,56,58,59,45,45,45,55,45,44,75,75,79,81,85,97,95,90,60,7,3,4,4,95],
['NEUER','BAYERN MÜNCHEN','GERMANY',193,92,27,'Right','GK',40,62,62,63,66,45,45,45,55,45,42,86,72,75,86,79,97,94,85,60,7,3,3,4,94],
['ROONEY','MANCHESTER UNITED','ENGLAND',176,86,27,'Right','CF',90,86,84,85,84,93,76,80,78,63,55,89,83,83,91,76,50,50,90,90,6,3,5,6,94],
['SUÁREZ','MERSEYSIDE RED','URUGUAY',181,81,26,'Right','CF',93,83,88,82,78,93,78,77,68,57,49,85,83,85,84,74,50,50,65,81,4,3,4,5,94],
['JÚLIO CÉSAR','FREE','BRAZIL',186,79,34,'Left','GK',47,67,66,64,66,50,54,56,55,41,45,78,72,75,83,82,94,96,75,60,6,3,4,4,94],
['CESC FABREGAS','FC BARCELONA','SPAIN',179,75,26,'Right','CMF',84,91,87,92,85,85,77,80,70,73,51,80,76,82,75,73,50,50,82,92,6,2,6,7,93],
['RONALDINHO','ATLÉTICO MINEIRO','BRAZIL',182,80,33,'Right','AMF',81,92,94,92,88,84,86,89,78,47,46,81,80,76,81,82,50,50,75,74,4,2,5,6,93],
['SILVA','MAN BLUE','SPAIN',170,67,27,'Left','AMF',85,92,91,93,85,81,76,77,62,60,46,77,80,90,74,75,50,50,72,80,6,2,3,3,93],
['VIDIC','MANCHESTER UNITED','SERBIA',189,84,31,'Right','CB',65,71,69,72,70,61,62,61,92,91,87,75,74,71,92,86,50,50,86,79,6,2,4,4,93],
['HANDANOVIC','INTER','SLOVENIA',193,89,29,'Right','GK',40,45,48,46,49,45,45,45,55,43,41,76,70,73,86,70,95,95,75,65,7,3,5,5,93],
['VALDÉS','FBARCELONA','SPAIN',183,78,31,'Right','GK',41,62,60,63,64,45,50,50,55,45,40,81,75,82,84,84,95,92,83,60,7,3,3,4,92],
['CECH','LONDON FC','CZECH REPUBLIC',197,92,31,'Left','GK',40,63,52,56,57,45,45,45,55,45,43,85,67,70,88,80,92,95,78,60,7,2,4,4,92],
['FREY','GENOA CFC','FRANCE',189,85,33,'Right','GK',41,48,52,55,52,45,45,45,55,40,46,75,67,68,86,82,95,92,76,60,7,2,3,3,92],
['NEYMAR','FBARCELONA','BRAZIL',174,64,21,'Right','SS',82,93,98,81,80,84,85,82,65,50,43,75,83,93,73,83,50,50,65,78,5,2,5,6,92],
['THIAGO SILVA','PARIS SAINT-GERMAIN','BRAZIL',183,79,29,'Right','CB',73,78,83,82,84,65,75,66,81,94,85,85,83,83,87,92,50,50,83,81,6,3,5,5,92],
['DI NATALE','UDINESE CALCIO','ITALY',170,70,35,'Right','CF',88,87,84,83,85,95,82,85,71,50,41,75,79,87,72,72,50,50,84,75,7,2,5,6,92],
['MILITO','INTER','ARGENTINA',183,78,34,'Right','CF',91,85,83,77,74,92,70,72,78,57,47,78,77,79,81,78,50,50,80,79,6,2,6,7,92],
['TERRY','LONDON FC','ENGLAND',187,90,32,'Right','CB',67,72,72,78,77,64,58,56,90,90,93,80,71,67,91,82,50,55,91,77,4,2,6,7,92],
['KOMPANY','MAN BLUE','BELGIUM',191,91,27,'Right','CB',71,78,78,78,81,63,63,63,82,90,92,81,79,74,92,84,50,50,87,80,7,1,5,5,92],
['CHIELLINI','JUVENTUS F.C.','ITALY',186,76,29,'Left','CB',71,73,73,70,72,66,65,70,79,91,90,83,83,76,89,87,50,50,86,82,7,2,4,4,92],
['ROBBEN','BAYERN MÜNCHEN','NETHERLANDS',180,80,29,'Left','RMF',84,87,94,80,83,84,78,80,70,54,46,85,92,88,78,73,50,50,65,76,4,1,4,4,92]
]);
var dashboard = new google.visualization.Dashboard(document.querySelector('#dashboard'));
var stringFilter1 = new google.visualization.ControlWrapper({
controlType: 'StringFilter',
containerId: 'string_filter_div',
options: {
filterColumnIndex: 0
}
});
var stringFilter2 = new google.visualization.ControlWrapper({
controlType: 'StringFilter',
containerId: 'position',
options: {
filterColumnIndex: 7
}
});
var numberRangeFilter1 = new google.visualization.ControlWrapper({
controlType: 'NumberRangeFilter',
containerId: 'numnber_range_filter_div',
options: {
filterColumnIndex: 5,
minValue: 0,
maxValue: 100,
ui: {
label: 'Overall Rating'
}
}
});
var numberRangeFilter2 = new google.visualization.ControlWrapper({
controlType: 'NumberRangeFilter',
containerId: 'height',
options: {
filterColumnIndex: 3,
minValue: 160,
maxValue: 210,
ui: {
label: 'Height'
}
}
});
var table = new google.visualization.ChartWrapper({
chartType: 'Table',
containerId: 'table_div',
options: {
showRowNumber: true
}
});
dashboard.bind([stringFilter1, stringFilter2, numberRangeFilter1, numberRangeFilter2], [table]);
dashboard.draw(data);
options['page'] = 'enable';
options['pageSize'] = 20;
options['pagingSymbols'] = {prev: 'prev', next: 'next'};
options['pagingButtonsConfiguration'] = 'auto';
}
google.load('visualization', '1', {packages:['controls'], callback: drawTable});

You are setting the options to enable paging after drawing the table, which is why it doesn't work. Set those options in the table's ChartWrapper instead, and it will work:
var table = new google.visualization.ChartWrapper({
chartType: 'Table',
containerId: 'table_div',
options: {
showRowNumber: true,
page: 'enable',
pageSize: 20,
pagingSymbols: {
prev: 'prev',
next: 'next'
},
pagingButtonsConfiguration: 'auto'
}
});
IMO< forcing a page reload or forcing the user to navigate to a new page is not a good idea for handing table pagination, but you can do it if you really want to. You just need to keep track of where your user is in the data set and serve up the appropriate data when the page is refreshed or the new page is visited.
I would suggest, however, that you investigate implementing server-side paging via AJAX calls. Set up a script or servlet that hands out data in pieces, and an AJAX function on the client-side that calls the server for the next piece of data (it could be one page, 5 pages, 100 pages, whatever is most convenient for your application), and fills in the table piece-by-piece.

D3 table with pagination. Check this fiddle below.
var tableChartWithPagination = function(inputData, divName) {
var wd = 700;
var ht = 550;
var keys = new Array();
// no. of rows per page
var pageSize = 4;
var currentPage = 1;
var totalPages = getTotalPages();
...
D3 table with pagination.
cheers.

Related

I'm trying to create a google candlestick chart, but also trying to overlay multiple lines on the same chart.
I'm able to draw one line over the candlestick if I do something like the following:
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('number', 'Low');
data.addColumn('number', 'Open');
data.addColumn('number', 'Close');
data.addColumn('number', 'High');
data.addColumn('number', 'Average');
data.addRow('Mon', 1, 1, 2, 2, 1.5]);
data.addRow('Tue', 2, 2, 3, 3, 2.5]);
data.addRow('Wed', 2, 2, 4, 4, 3.5]);
var options = {
legend:'none',
series: {1: {type: 'line'}}
};
But I can't seem to figure out how to add a second line.
To avoid confusion, I'll leave out all of the things I've attempted, but the goal is to just add another data column and specify whatever is necessary to tell the chart to overlay the new data as a second line.
Is there any way to make this work?

sure, just keep adding line series as you have, using the series option...
for the CandleStickChart, five columns are required,
those five columns count as one series,
in this example, series 0
which makes the 6th column series 1
which you've changed to 'line'
1: {type: 'line'}
adding another column would be series 2,
just add another column and change the type...
1: {type: 'line'},
2: {type: 'line'}
see following working snippet...
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Date');
data.addColumn('number', 'Low');
data.addColumn('number', 'Open');
data.addColumn('number', 'Close');
data.addColumn('number', 'High');
data.addColumn('number', 'Average');
data.addColumn('number', 'Average 2');
data.addRow(['Mon', 1, 1, 2, 2, 1.5, 2.5]);
data.addRow(['Tue', 2, 2, 3, 3, 2.5, 3.5]);
data.addRow(['Wed', 2, 2, 4, 4, 3.5, 4.5]);
var options = {
legend: 'none',
series: {
1: {type: 'line'},
2: {type: 'line'}
}
};
var container = document.getElementById('chart_div');
var chart = new google.visualization.CandlestickChart(container);
chart.draw(data, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

I'm using PHP to make a call to Yahoo Finance's API for various financial markers. I've been graphing these using Google's Chart API. I have 4 charts which have always shown up until a few days ago. I can't figure out what's going on. It will only show one graph at a time. All of the data is being loaded successfully for all 4 graphs, but only show one graph. Any advice would be appreciated!
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<br>
<script type="text/javascript">
google.load('visualization', '1.1', {packages: ['line']});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'Day');
data.addColumn('number', 'Stock Index(%)');
data.addRows([
<?=$stockIndex?>
]);
var options = {
chart: {
title: 'Stock Index',
},
width: 1100,
height: 900
};
var chart = new google.charts.Line(document.getElementById('stocks'));
chart.draw(data, options);
}
</script>
<script type="text/javascript">
google.load('visualization', '1.1', {packages: ['line']});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'Day');
data.addColumn('number', 'Stock Index(%)');
data.addColumn('number', '12-Day EMA');
data.addColumn('number', '26-Day EMA');
data.addRows([
<?=$stockTwelveTwentySix?>
]);
var options = {
chart: {
title: 'Stock Index w/12-day and 26-day EMA',
},
width: 1100,
height: 900
};
var chart = new google.charts.Line(document.getElementById('twelvetwentysixday'));
chart.draw(data, options);
}
</script>
<script type="text/javascript">
google.load('visualization', '1.1', {packages: ['line']});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'Day');
data.addColumn('number', 'Stock Index(%)');
data.addColumn('number', '12-Day EMA');
data.addRows([
<?=$stockTwelve?>
]);
var options = {
chart: {
title: 'Stock Index w/12-day EMA',
},
width: 1100,
height: 900
};
var chart = new google.charts.Line(document.getElementById('twelvetwentyday'));
chart.draw(data, options);
}
</script>
<script type="text/javascript">
google.load('visualization', '1.1', {packages: ['line']});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'Day');
data.addColumn('number', 'Stock Index(%)');
data.addColumn('number', 'Lower BB');
data.addColumn('number', 'Upper BB');
data.addRows([
<?= $bb ?>
]);
var options = {
chart: {
title: 'Stock Index w/Bollinger Band Comparisons',
},
width: 1100,
height: 900
};
var chart = new google.charts.Line(document.getElementById('Bollinger'));
chart.draw(data, options);
}
</script>
<div id="stocks"></div>
<br>
<div id="twelvetwentyday"></div>
<br>
<div id="twelvetwentysixday"></div>
<br>
<div id="Bollinger"></div>

Solution is easy U will make only one callback.Dont write function for every chart. do it all in one function.
google.load('visualization', '1.1', {packages: ['line']});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'Day');
data.addColumn('number', 'Stock Index(%)');
data.addRows([
<?=$stockIndex?>
]);
var options = {
chart: {
title: 'Stock Index',
},
width: 1100,
height: 900
};
var chart = new google.charts.Line(document.getElementById('stocks'));
chart.draw(data, options);
var data2 = new google.visualization.DataTable();
data2.addColumn('number', 'Day');
data2.addColumn('number', 'Stock Index(%)');
data2.addColumn('number', '12-Day EMA');
data2.addColumn('number', '26-Day EMA');
data2.addRows([
<?=$stockTwelveTwentySix?>
]);
var options2 = {
chart: {
title: 'Stock Index w/12-day and 26-day EMA',
},
width: 1100,
height: 900
};
var chart2 = new google.charts.Line(document.getElementById('twelvetwentysixday'));
chart2.draw(data2, options2);
var data3 = new google.visualization.DataTable();
data3.addColumn('number', 'Day');
data3.addColumn('number', 'Stock Index(%)');
data3.addColumn('number', '12-Day EMA');
data3.addRows([
<?=$stockTwelve?>
]);
var options3 = {
chart: {
title: 'Stock Index w/12-day EMA',
},
width: 1100,
height: 900
};
var chart3 = new google.charts.Line(document.getElementById('twelvetwentyday'));
chart3.draw(data3, options3);
var data4 = new google.visualization.DataTable();
data4.addColumn('number', 'Day');
data4.addColumn('number', 'Stock Index(%)');
data4.addColumn('number', 'Lower BB');
data4.addColumn('number', 'Upper BB');
data4.addRows([
<?= $bb ?>
]);
var options4 = {
chart: {
title: 'Stock Index w/Bollinger Band Comparisons',
},
width: 1100,
height: 900
};
var chart4 = new google.charts.Line(document.getElementById('Bollinger'));
chart.draw(data4, options4);
}
do it somthing like that .

Sorry I don't know much about google graph api , there is what I have done
var data = new google.visualization.DataTable();
data.addColumn('string', 'Day');
data.addColumn('number', 'Q1');
data.addColumn('number', 'Q2');
data.addColumn('number', 'Q3');
data.addColumn('number', 'Q4');
data.addRows([
['Day 1', 1,2,3,4,5 ],
['Day 2', 2,2,3,5,1 ],
['Day 3', 3,1,1,3,5 ],
]);
and it generate something like this:
what I want to do is to change value on vertical bar (1,2,3,4,5) to something like (a,b,c,d,e).
please help!!!

try adding this to your chart configuration options
vAxis: { ticks: ['a','b','c','d','e'] }

<script type="text/javascript">
function drawVisualization2(dataValues, chartTitle, columnNames, categoryCaption) {
if (dataValues.length < 1)
return;
var data = new google.visualization.DataTable();
data.addColumn('string', columnNames.split(',')[0]);
data.addColumn('string', columnNames.split(',')[1]);
data.addColumn('string', columnNames.split(',')[2]);
data.addColumn('number', columnNames.split(',')[3]);
data.addColumn('number', columnNames.split(',')[4]);
data.addColumn('number', columnNames.split(',')[5]);
data.addColumn('string', 'Email');
for (var i = 0; i < dataValues.length; i++) {
data.addRow([dataValues[i].Value1, dataValues[i].Value2, dataValues[i].Value3, dataValues[i].Value4, dataValues[i].Value5, dataValues[i].Value6, 'www.google.in']);
}
var formatter = new google.visualization.NumberFormat({ pattern: '####%' });
formatter.format(data, 5);
var formatter = new google.visualization.PatternFormat('{4}');
formatter.format(data, [4, 6]);
var view = new google.visualization.DataView(data);
view.setColumns([0,1,2,3,4,5]);
var categoryPicker2 = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'Container1',
'options': {
'filterColumnLabel': columnNames.split(',')[1],
'ui': {
'labelStacking': 'horizontal',
'allowTyping': false,
'allowMultiple': false,
'caption': categoryCaption,
'label': columnNames.split(',')[2]
}
}
});
var table2 = new google.visualization.ChartWrapper({
'chartType': 'Table',
'containerId': 'TableContainer2',
'options': {
'width': '895px',
'page': 'enable',
'pageSize': 5
}
});
new google.visualization.Dashboard(document.getElementById('PieChartExample2')).bind([categoryPicker2], [table2]).draw(view, { allowHtml: true, showRowNumber: true });
//visualization.draw(view, { allowHtml: true, showRowNumber: true });
}
</script>
I am facing a problem on table chart adding link button ;here is my code.And column 7 need to go google;First tried with simple table,it works fine;but in case of controls and dashboard ;its not i tried bur could can anyone help me to resolve.Thank you..

That looks mostly fine. Just set the Table's allowHtml option to true:
var table2 = new google.visualization.ChartWrapper({
'chartType': 'Table',
'containerId': 'TableContainer2',
'options': {
'width': '895px',
'page': 'enable',
'pageSize': 5,
allowHtml: true
}
});
Also, trying to set options in the Dashboard's draw call will not do anything, so remove the second argument:
new google.visualization.Dashboard(document.getElementById('PieChartExample2')).bind([categoryPicker2], [table2]).draw(view);

I wish to include multiple string and number range filters in my database. It is only letting put one of each at the moment though and I can't figure out why.
Below is the current code I am using.
HTML:
<div id="dashboard">
<div id="string_filter_div"></div>
<div id="position"></div>
<div id="numnber_range_filter_div"></div>
<div id="height"></div>
<div id="table_div"></div>
</div>
JavaScript:
function drawTable() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('string', 'Team');
data.addColumn('string', 'Nationality');
data.addColumn('number', 'Height');
data.addColumn('number', 'Weight');
data.addColumn('number', 'Age');
data.addColumn('string', 'Foot');
data.addColumn('string', 'Position');
data.addColumn('number', 'Overall Rating');
data.addColumn('number', 'Attack');
data.addColumn('number', 'Defense');
data.addColumn('number', 'Header Accuracy');
data.addColumn('number', 'Dribble Accuracy');
data.addColumn('number', 'Short Pass Accuracy');
data.addColumn('number', 'Short Pass Speed');
data.addColumn('number', 'Long Pass Accuracy');
data.addColumn('number', 'Long Pass Speed');
data.addColumn('number', 'Shot Accuracy');
data.addColumn('number', 'Place Kicking');
data.addColumn('number', 'Swerve');
data.addColumn('number', 'Ball Control');
data.addColumn('number', 'Weak Foot Accuracy');
data.addColumn('number', 'Weak Foot Usage');
data.addColumn('number', 'Goal Keeping');
data.addColumn('number', 'Responsiveness');
data.addColumn('number', 'Explosive Power');
data.addColumn('number', 'Dribble Speed');
data.addColumn('number', 'Top Speed');
data.addColumn('number', 'Body Balance');
data.addColumn('number', 'Stamina');
data.addColumn('number', 'Kicking Power');
data.addColumn('number', 'Jump');
data.addColumn('number', 'Injury');
data.addColumn('number', 'Attack 2');
data.addColumn('number', 'Defence 2');
data.addColumn('number', 'Form');
data.addColumn('number', 'Tenacity');
data.addColumn('number', 'Teamwork');
data.addColumn('number', 'Owners');
data.addColumn('number', 'Price');
data.addRows([
['MESSI','FC BARCELONA','ARGENTINA',169,67,25,'Left foot','SS',98,99,38,74,98,84,82,81,81,99,85,85,93,6,4,50,84,97,98,82,83,76,80,74,2,3,2,6,76,83,904,55704866],
['INIESTA','FC BARCELONA','SPAIN',170,65,28,'Right foot','CMF',97,90,62,64,97,94,91,86,74,83,72,82,98,8,6,50,78,87,87,78,75,88,77,63,2,3,2,6,77,96,751,49828981],
['XAVI','FC BARCELONA','SPAIN',170,68,32,'Right foot','CMF',97,86,68,70,90,98,95,90,84,73,79,82,95,5,4,50,78,83,76,74,74,90,78,73,3,3,3,8,80,98,458,42893249],
['RONALDO','REAL MADRID','PORTUGAL',187,80,27,'Right foot','SS',97,99,30,95,97,83,83,87,92,92,93,85,90,7,5,50,85,87,97,87,90,78,96,89,2,3,1,5,74,72,2122,60822237],
['THIAGO SILVA','PARIS SAINT-GERMAIN','BRAZIL',183,79,28,'Right foot','CB',96,62,95,81,77,81,81,83,84,65,75,66,78,5,5,50,93,77,79,86,87,83,84,92,3,2,3,7,83,78,1203,52174484],
['AL HABSI','LANCASHIRE ATHLETIC','OMAN',194,79,30,'Right foot','GK',84,30,83,55,54,54,56,58,66,45,45,45,53,4,3,82,95,70,55,67,84,63,79,87,3,2,2,6,79,68,71,9326020]
]);
var dashboard = new google.visualization.Dashboard(document.querySelector('#dashboard'));
var stringFilter = new google.visualization.ControlWrapper({
controlType: 'StringFilter',
containerId: 'string_filter_div',
options: {
filterColumnIndex: 0
}
});
var stringFilter = new google.visualization.ControlWrapper({
controlType: 'StringFilter',
containerId: 'position',
options: {
filterColumnIndex: 7
}
});
var numberRangeFilter = new google.visualization.ControlWrapper({
controlType: 'NumberRangeFilter',
containerId: 'numnber_range_filter_div',
options: {
filterColumnIndex: 5,
minValue: 0,
maxValue: 100,
ui: {
label: 'Overall Rating'
}
}
});
var numberRangeFilter = new google.visualization.ControlWrapper({
controlType: 'NumberRangeFilter',
containerId: 'height',
options: {
filterColumnIndex: 3,
minValue: 160,
maxValue: 210,
ui: {
label: 'Height'
}
}
});
var table = new google.visualization.ChartWrapper({
chartType: 'Table',
containerId: 'table_div',
options: {
showRowNumber: true
}
});
dashboard.bind([stringFilter, numberRangeFilter], [table]);
dashboard.draw(data);
}
google.load('visualization', '1', {packages:['controls'], callback: drawTable});
Can anyone see anything wrong with this code or know why? Cheers.

You have given all controls of the same type the same variable name, so earlier controls are getting overwritten by later ones. Use different variable names for the controls to fix this:
function drawTable() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('string', 'Team');
data.addColumn('string', 'Nationality');
data.addColumn('number', 'Height');
data.addColumn('number', 'Weight');
data.addColumn('number', 'Age');
data.addColumn('string', 'Foot');
data.addColumn('string', 'Position');
data.addColumn('number', 'Overall Rating');
data.addColumn('number', 'Attack');
data.addColumn('number', 'Defense');
data.addColumn('number', 'Header Accuracy');
data.addColumn('number', 'Dribble Accuracy');
data.addColumn('number', 'Short Pass Accuracy');
data.addColumn('number', 'Short Pass Speed');
data.addColumn('number', 'Long Pass Accuracy');
data.addColumn('number', 'Long Pass Speed');
data.addColumn('number', 'Shot Accuracy');
data.addColumn('number', 'Place Kicking');
data.addColumn('number', 'Swerve');
data.addColumn('number', 'Ball Control');
data.addColumn('number', 'Weak Foot Accuracy');
data.addColumn('number', 'Weak Foot Usage');
data.addColumn('number', 'Goal Keeping');
data.addColumn('number', 'Responsiveness');
data.addColumn('number', 'Explosive Power');
data.addColumn('number', 'Dribble Speed');
data.addColumn('number', 'Top Speed');
data.addColumn('number', 'Body Balance');
data.addColumn('number', 'Stamina');
data.addColumn('number', 'Kicking Power');
data.addColumn('number', 'Jump');
data.addColumn('number', 'Injury');
data.addColumn('number', 'Attack 2');
data.addColumn('number', 'Defence 2');
data.addColumn('number', 'Form');
data.addColumn('number', 'Tenacity');
data.addColumn('number', 'Teamwork');
data.addColumn('number', 'Owners');
data.addColumn('number', 'Price');
data.addRows([
['MESSI','FC BARCELONA','ARGENTINA',169,67,25,'Left foot','SS',98,99,38,74,98,84,82,81,81,99,85,85,93,6,4,50,84,97,98,82,83,76,80,74,2,3,2,6,76,83,904,55704866],
['INIESTA','FC BARCELONA','SPAIN',170,65,28,'Right foot','CMF',97,90,62,64,97,94,91,86,74,83,72,82,98,8,6,50,78,87,87,78,75,88,77,63,2,3,2,6,77,96,751,49828981],
['XAVI','FC BARCELONA','SPAIN',170,68,32,'Right foot','CMF',97,86,68,70,90,98,95,90,84,73,79,82,95,5,4,50,78,83,76,74,74,90,78,73,3,3,3,8,80,98,458,42893249],
['RONALDO','REAL MADRID','PORTUGAL',187,80,27,'Right foot','SS',97,99,30,95,97,83,83,87,92,92,93,85,90,7,5,50,85,87,97,87,90,78,96,89,2,3,1,5,74,72,2122,60822237],
['THIAGO SILVA','PARIS SAINT-GERMAIN','BRAZIL',183,79,28,'Right foot','CB',96,62,95,81,77,81,81,83,84,65,75,66,78,5,5,50,93,77,79,86,87,83,84,92,3,2,3,7,83,78,1203,52174484],
['AL HABSI','LANCASHIRE ATHLETIC','OMAN',194,79,30,'Right foot','GK',84,30,83,55,54,54,56,58,66,45,45,45,53,4,3,82,95,70,55,67,84,63,79,87,3,2,2,6,79,68,71,9326020]
]);
var dashboard = new google.visualization.Dashboard(document.querySelector('#dashboard'));
var stringFilter1 = new google.visualization.ControlWrapper({
controlType: 'StringFilter',
containerId: 'string_filter_div',
options: {
filterColumnIndex: 0
}
});
var stringFilter2 = new google.visualization.ControlWrapper({
controlType: 'StringFilter',
containerId: 'position',
options: {
filterColumnIndex: 7
}
});
var numberRangeFilter1 = new google.visualization.ControlWrapper({
controlType: 'NumberRangeFilter',
containerId: 'numnber_range_filter_div',
options: {
filterColumnIndex: 5,
minValue: 0,
maxValue: 100,
ui: {
label: 'Overall Rating'
}
}
});
var numberRangeFilter2 = new google.visualization.ControlWrapper({
controlType: 'NumberRangeFilter',
containerId: 'height',
options: {
filterColumnIndex: 3,
minValue: 160,
maxValue: 210,
ui: {
label: 'Height'
}
}
});
var table = new google.visualization.ChartWrapper({
chartType: 'Table',
containerId: 'table_div',
options: {
showRowNumber: true
}
});
dashboard.bind([stringFilter1, stringFilter2, numberRangeFilter1, numberRangeFilter2], [table]);
dashboard.draw(data);
}
google.load('visualization', '1', {packages:['controls'], callback: drawTable});