We Keep Coding

Displaying type name on bars in google column charts

I am using Google Column charts.
As of now I got my chart as shown in the below image.
Here I have two columns in each category. I want to differentiate them by their type(Type-1, Type-2) like shown in the below image. How can I do this, is there any possibility for this.

you can use a data column role for --> 'annotation'
the 'annotation' column should follow each value it represents in the data table
see following working snippet...
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Category Type');
data.addColumn('number', 'Type-1');
data.addColumn({role: 'annotation', type: 'string'});
data.addColumn('number', 'Type-2');
data.addColumn({role: 'annotation', type: 'string'});
data.addRows([
['Pri #1:', 4000, 'Type-1', 5000, 'Type-2'],
['Pri #2:', 6000, 'Type-1', 8000, 'Type-2'],
['Pri #3:', 1500, 'Type-1', 3000, 'Type-2'],
]);
var container = document.getElementById('chart_div');
var chart = new google.visualization.ColumnChart(container);
chart.draw(data, {
annotations: {
alwaysOutside: true
}
});
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

Multiple lines over google candlestick chart

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>

Google line chart dividing grid line

I have created a google line chart that has multiple values over time like this
The data refers to historical data and from a point in time is forecasted data. I want to divide (split) the chart to differentiate the historical information of forecast information.
And get a chart like this:
Is there a way to do that?

You can get a vertical line like that by adding an 'annotation' role column to your domain (x-axis) column in the DataTable, and setting the annotation.<annotation column index>.style option to 'line'. Here's an example:
function drawChart () {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Month');
data.addColumn({type: 'string', role: 'annotation'});
data.addColumn('number', 'Value');
data.addRows([
['Jun', null, 3],
['Jul', null, 5],
['Aug', null, 4],
['Sep', null, 4],
['Oct', null, 8],
['Nov', 'this month', 6],
['Dec', null, 2]
]);
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, {
height: 400,
width: 600,
annotation: {
1: {
style: 'line'
}
}
});
}
google.load('visualization', '1', {packages:['corechart'], callback: drawChart});
see it working here: http://jsfiddle.net/asgallant/pkwqt/

Adding pagination (table paging) to Google visualization table

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.

Multiple string and number range filters - google visualization

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});