Hadleigh
Reputation: 498
Google Chart: Altering height of chart dynamically, based on total rows
Google have recently provided the ability to filter the graph results using some native controls.
Some of the code I provide below is taken directly from the new 'Dependent controls' in the Google Chart API playground. My problem is directly related to limitations imposed in this new dynamic functionality.
I have a large dataset of 4000+ rows, which I want to display in one hbar graph. I don't know how many rows there will be but I can use the following code to find out.
var initialHeight = data.getNumberOfRows() * 60
The problem I have is that the chart height needs to be very tall in order to display all of the 4000+ records. But the chart height does not change when the dependent controls are applied. Instead of resizing, the data 'grows' to fill the original graph height. The bars in the chart just become taller within the same space. Therefore, when my 4000+ records are filtered down to just one record, that one record is as tall as the initial 4000+.
To combat this I am using JQUERY to alter the size of the DIV surrounding the graph, which in turn alters the graph size. This works because the graph inherits its size from the surrounding DIV, if its not explicitly set.
** THE INITIAL RESPONSES BELOW REFERRED TO CODE I HAVE NOW REMOVED, BECAUSE THE DEVELOPMENT HAS PROGRESSED. **
Part 2.
Following kind help from Oli, I have further developed this script and it is almost working ... I hope.
There are two caviats to that statement.
The first is that it has to 'draw' the chart twice, the first time in order to calculate the number of rows it needs to display, the second time in order to stretch or shrink the size of the chart to the equally sized Div.
This is not as concise as I would like it but can't find a way around it?
The second caviat is that it errors on the 'ready' state of the first 'draw' event. If you remove the following code for the 3 'ControlWrapper' elements you will see them.
if(barChart.getDataTable()){
This error means that altering the 'cityPicker' filter does not change the height. It now works for the country and region as it should do.
Once again, I cannot find a way around this. and I think that it's my JS knowledge, rather than anything else.
Here is the complete code for the page as it currently stands:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Google Visualization API Sample</title>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/themes/base/jquery-ui.css" type="text/css" media="all" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.min.js" type="text/javascript"></script>
<script src="http://jquery-ui.googlecode.com/svn/tags/latest/external/jquery.bgiframe-2.1.2.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/i18n/jquery-ui-i18n.min.js" type="text/javascript"></script>
<script src="http://jquery.com/files/social/js/jquery.tabs.js"></script>
<script type="text/javascript">
google.load('visualization', '1.1', {packages: ['controls']});
</script>
<script type="text/javascript">
function drawVisualization() {
// Prepare the data
data = google.visualization.arrayToDataTable([
['Make','Region','City','Total'],
['Renault','South','York',68],
['Renault','South','Yeovil',18],
['Renault','South','Wymondham',10],
['Renault','South','Wrexham',93],
['Renault','South','Worthing',25],
['Ford','South East','Sudbury',8],
['Ford','South East','Strontian',11],
['Ford','South East','Strathy',9],
['Vauxhall','South East','Strathpeffer',27],
['Vauxhall','South East','Strathdon',9],
['Vauxhall','South East','Strathaven',173],
['Vauxhall','South East','Stratford-upon-',44],
['Vauxhall','South East','Stranraer',164],
['Vauxhall','South East','Stowmarket',10],
['Vauxhall','South East','Stow-on-the-Wol',4],
['Vauxhall','South East','Stornoway',226],
['Toyota','South East','Stonehaven',243],
['Toyota','South East','Stoke-on-Trent',1680],
['Toyota','South East','Stirling',3103],
['Toyota','South East','Stevenage',21],
['Toyota','South East','Stanhope',24],
['Toyota','South East','Stamford',12],
['Toyota','South East','Staines',30],
['Toyota','South East','Stafford',832],
['Toyota','South East','St Helens',666],
['Toyota','South East','St Boswells',73],
['Toyota','South East','St Austell',20],
['Toyota','South East','St Andrews',734],
['Toyota','South East','St Albans',75],
['Toyota','South East','Spilsby',1],
['BMW','South East','Spalding',6],
['BMW','South East','Southport',217],
['BMW','South East','Southend-on-Sea',107],
['BMW','South East','Southampton',66],
['BMW','South East','South Molton',1],
['BMW','South East','Slough',155],
['BMW','South East','Sleaford',6],
['BMW','South East','Skipton',14],
['BMW','South East','Skelmersdale',185],
['BMW','South East','Skegness',8],
['BMW','South East','Sittingbourne',15],
['BMW','South East','Shrewsbury',160],
['BMW','South East','Shetland',53],
['BMW','South East','Shepton Mallet',6],
['BMW','South East','Sheffield',217],
['BMW','South East','Shap',34],
['BMW','South East','Shaftesbury',3],
['BMW','South East','Sevenoaks',83],
['BMW','South East','Settle',7],
['BMW','South East','Selkirk',39],
['BMW','South East','Selby',10],
['BMW','South East','Sedgefield',8],
['BMW','South East','Sedbergh',11],
['BMW','South East','Scunthorpe',28],
['BMW','South East','Scourie',7],
['BMW','South East','Scarinish',38],
['BMW','South East','Scarborough',17],
['BMW','South East','Saxmundham',10],
['BMW','South East','Sanquhar',69],
['BMW','South East','Sandy',3],
['BMW','South East','Sandwick',51],
['BMW','South East','Sanday',9],
['BMW','South East','Salisbury',11],
['BMW','South East','Saintfield',4],
['BMW','South East','Saffron Walden',1],
['BMW','South East','Rye',17],
['BMW','South East','Ruthin',12],
['BMW','South East','Runcorn',318],
['BMW','South East','Rugely',142],
['BMW','South East','Rugby',44],
['BMW','South East','Royston',18],
['BMW','South East','Rothesay',132],
['BMW','South East','Rotherham',93],
['BMW','South East','Rothbury',22],
['BMW','South East','Rostrevor',25],
['BMW','South East','Ross-on-Wye',4],
['BMW','South East','Romsey',6],
['BMW','South East','Romford',57],
['BMW','South East','Rochdale',209],
['BMW','South East','Ripon',19],
['BMW','South East','Ripley',35],
['BMW','South East','Ringwood',8],
['BMW','South East','Richmond',21],
['Renault','South East','Rhyl',55],
['Renault','South East','Retford',18],
['Renault','South East','Redruth',7],
['Renault','South East','Redhill',124],
['Renault','South East','Redditch',78],
['Renault','South East','Reading',101],
['Renault','South East','Raughton Head',54],
['Renault','South East','Pwllheli',4],
['Renault','South East','Prudhoe',162],
['Renault','South East','Preston',1126],
['Renault','South East','Portsmouth',108],
['Ford','South East','Porthmadog',14],
['Ford','South East','Portadown',14],
['Ford','South East','Port Ellen',124],
['Ford','South East','Pooley Bridge',57],
['Ford','South East','Pontypridd',51],
['Ford','South East','Pontypool',15],
['Ford','South East','Pontefract',100],
['Ford','South East','Pocklington',13],
['Ford','South East','Plymouth',47],
['Ford','South East','Pitlochry',142],
['Vauxhall','South East','Pickering',9],
['Vauxhall','South East','Petersfield',10],
['Vauxhall','South East','Peterhead',691],
['Vauxhall','South East','Peterborough',49],
['Vauxhall','South East','Perth',1455],
['Vauxhall','South East','Penzance',11],
['Vauxhall','South East','Penrith',372],
['Vauxhall','North','Penicuik',233],
['Toyota','North','Pencombe',3],
['Toyota','North','Peebles',53],
['Toyota','North','Peat Inn',579],
['Toyota','North','Patrington',9],
['Toyota','North','Pakenham',4],
['Toyota','North','Oxford',55],
['Toyota','North','Oswestry',35],
['Toyota','North','Orpington',12],
['Toyota','North','Orkney',166],
['Toyota','North','Omagh',8],
['Toyota','North','Oldmeldrum',361],
['Toyota','North','Okehampton',4],
['Toyota','North','Oban',221],
['Toyota','North','Oakham',18],
['BMW','North','Nottingham',184],
['BMW','North','Norwich',83],
['BMW','North','Northwich',1610],
['BMW','East','Northampton',87],
['BMW','East','Northallerton',53],
['BMW','East','North Walsham',2],
['BMW','East','North Cave',8],
['BMW','East','North Berwick',233],
['BMW','East','Newtownstewart',5],
['BMW','East','Newtown',7],
['BMW','East','Newton Stewart',55],
['Renault','East','Newton Abbot',19],
['Renault','East','Newry',15],
['Renault','East','Newquay',1],
['Renault','East','Newport',58],
['Renault','East','Newmarket',7],
['Renault','East','Newcastle (Co.D',2],
['Renault','East','Newbury',38],
['Renault','East','Newark',24],
['Renault','East','New Mills',61],
['Renault','East','New Luce',15],
['Renault','East','New Galloway',25],
['Ford','East','Neath',25],
['Ford','East','Narberth',1],
['Ford','East','Nairn',183],
['Ford','East','Motherwell',4552],
['Ford','East','Moscow',337],
['Ford','East','Morpeth',400],
['Ford','East','Montrose',241],
['Ford','East','Monmouth',3],
['Ford','East','Mold',63],
['Ford','East','Moffat',26],
['Vauxhall','East','Minehead',1],
['Vauxhall','East','Milton Keynes',175],
['Vauxhall','East','Millom',27],
['Vauxhall','East','Milford Haven',8],
['Vauxhall','East','Middlesbrough',190],
['Vauxhall','East','Mid Yell',18],
['Vauxhall','East','Merthyr Tydfil',18],
['Vauxhall','East','Meriden',14],
['Toyota','East','Melton Mowbray',16],
['Toyota','East','Medway',45],
['Toyota','East','Maybole',143],
['Toyota','East','Maud',211],
['Toyota','East','Matlock',10],
['Toyota','East','Martin',4],
['Toyota','East','Marlborough',10],
['Toyota','East','Market Weighton',4],
['Toyota','East','Market Rasen',16],
['Toyota','East','Market Harborou',7],
['Toyota','East','Market Drayton',46],
['Toyota','East','Mansfield',71],
['Toyota','East','Manchester',6602],
['Toyota','East','Malvern',46],
['BMW','East','Malton',6],
['BMW','East','Malmesbury',4],
['BMW','East','Mallaig',34],
['BMW','East','Maldon',25],
['BMW','East','Maidstone',41],
['BMW','East','Maidenhead',45],
['BMW','East','Magherafelt',4],
['BMW','East','Madingley',8],
['BMW','East','Machynlleth',2],
['BMW','East','Macclesfield',428],
['BMW','East','Lynton',1],
['Renault','East','Lymington',11],
['Renault','East','Lydney',27],
['Renault','East','Lybster',48],
['Renault','East','Luton',203],
['BMW','East','Kyle',53],
['BMW','East','Knutsford',247],
['BMW','East','Knighton',1],
['BMW','East','Kirriemuir',223],
['BMW','East','Kirkwhelpington',5],
['Renault','East','Kirkcudbright',88],
['Renault','East','Kirkcaldy',3742],
['Renault','East','Kinrossie',55],
['Renault','East','Kinross',211],
['Renault','East','Kingussie',89],
['Renault','East','Kington',4],
['Renault','East','Kingsbridge',12],
['Renault','East','Kings Lynn',15],
['Renault','East','Kilrea',2],
['Renault','East','Kilmelford',44],
['Renault','East','Kilmarnock',1877],
['Ford','East','Killingholme',4],
['Ford','East','Killin',40],
['Ford','East','Killearn',568],
['Ford','East','Kilchrenan',21],
['Ford','East','Kidderminster',83],
['Ford','East','Kettering',37],
['Ford','East','Keswick',69],
['Ford','East','Kesh',2],
['Ford','East','Kendal',42],
['Ford','East','Kelso',41],
['Vauxhall','East','Keith',327],
['Vauxhall','East','Keighley',32],
['Vauxhall','East','Johnstone',1912],
['Vauxhall','East','Jersey',3],
['Vauxhall','East','Isle of Wight',33],
['Vauxhall','East','Isle of Skye Po',49],
['Vauxhall','East','Isle of Skye Ed',54],
['Vauxhall','East','Isle of Skye Br',61],
['Toyota','East','Isle of Mull To',20],
['Toyota','East','Isle of Mull Fi',7],
['Toyota','East','Isle of Mull Cr',25],
['Toyota','East','Isle of Man',40],
['Toyota','East','Isle of Benbecu',68],
['Toyota','East','Isle of Arran',87],
['Toyota','East','Ipswich',60],
['Toyota','East','Ipstones',138],
['Toyota','East','Inverurie',347],
['Toyota','East','Inverness',2007],
['Toyota','East','Inveraray',57],
['Toyota','East','Insch',59],
['Toyota','East','Huntly',127],
['Toyota','East','Huntingdon',41],
['BMW','East','Hunstanton',1],
['BMW','East','Hungerford',2],
['BMW','East','Hull',67],
['BMW','East','Huddersfield',1419],
['BMW','East','Horsham',29],
['BMW','East','Hornsea',7],
['BMW','East','Hornby',33],
['BMW','East','Honiton',7],
['BMW','East','Honington',1],
['BMW','East','Holyhead',22],
['BMW','East','Holsworthy',10],
['Renault','East','Holmes Chapel',94],
['Renault','East','Holbeach',6],
['Renault','East','Hitchin',42],
['Renault','East','Hinckley',29],
['Renault','East','High Wycombe',44],
['Renault','East','Hexham',330],
['Renault','East','Hereford',113],
['Renault','East','Henley-on-Thame',13],
['Renault','East','Hemel Hempstead',15],
['Renault','East','Helmsdale',9],
['Renault','East','Helensburgh',477],
['Ford','East','Heathfield',1],
['Ford','East','Haywards Heath',7],
['Ford','East','Hawkshead',18],
['Ford','East','Hawick',68],
['Ford','East','Haverhill',4],
['Ford','East','Haverfordwest',18],
['Ford','East','Hathersage',6],
['Ford','East','Hastings',19],
['Ford','East','Haslemere',8],
['Ford','East','Hartlepool',49],
['Vauxhall','East','Harthill',974],
['Vauxhall','East','Harrogate',37],
['Vauxhall','East','Harris',47],
['Vauxhall','East','Haltwhistle',46],
['Vauxhall','East','Halifax',280],
['Vauxhall','East','Guiseley',22],
['Vauxhall','East','Guisborough',11],
['Vauxhall','East','Guildford',52],
['Toyota','East','Guernsey',9],
['Toyota','East','Grimsby',19],
['Toyota','East','Gretna',177],
['Toyota','East','Greenock',2695],
['Toyota','East','Great Yarmouth',35],
['Toyota','East','Great Dunmow',9],
['Toyota','East','Great Bernera',15],
['Toyota','East','Grays Thurrock',28],
['Toyota','East','Gravesend',20],
['Toyota','East','Grantown-on-Spe',137],
['Toyota','East','Grantham',22],
['Toyota','East','Grange-Over-San',9],
['Toyota','East','Gosforth',93],
['Toyota','East','Goole',9],
['BMW','East','Golspie',54],
['BMW','East','Gloucester',220],
['BMW','East','Glossop',73],
['BMW','East','Glenurquhart',75],
['BMW','East','Glenborrodale',2],
['BMW','East','Glastonbury',3],
['BMW','West','Glasgow',40237],
['BMW','West','Girvan',142],
['BMW','West','Garstang',25],
['BMW','West','Galashiels',133],
['BMW','West','Gairloch',40],
['Renault','West','Gainsborough',30],
['Renault','West','Frome',7],
['Renault','West','Fraserburgh',361],
['Renault','West','Fortrose',62],
['Renault','West','Fort William',201],
['Renault','West','Fort Augustus',13],
['Renault','West','Forres',154],
['Renault','West','Forfar',229],
['Renault','West','Folkestone',20],
['Renault','West','Felixstowe',7],
['Renault','West','Faringdon',3],
['Ford','West','Fareham',6],
['Ford','West','Falmouth',14],
['Ford','West','Falkirk',3179],
['Ford','West','Fakenham',1],
['Ford','West','Exeter',31],
['Ford','West','Evesham',25],
['Ford','West','Esher',180],
['Ford','West','Enniskillen',16],
['Ford','West','Ely',8],
['Ford','West','Ellon',326],
['Vauxhall','West','Elgin',814],
['Vauxhall','West','Edinburgh',7771],
['Vauxhall','West','Eastbourne',31],
['Vauxhall','West','East Kilbride',1948],
['Vauxhall','West','East Grinstead',19],
['Vauxhall','West','Easingwold',8],
['Vauxhall','West','Dursley',22],
['Vauxhall','West','Durham',233],
['Toyota','West','Duns',22],
['Toyota','West','Dunoon',322],
['Toyota','West','Dunkeld',42],
['Toyota','West','Dungannon',67],
['Toyota','West','Dunfermline',2091],
['Toyota','West','Dundee',4582],
['Toyota','West','Dunbar',89],
['Toyota','West','Dumfries',956],
['Toyota','West','Dumbarton',1664],
['Toyota','West','Dudley',442],
['Toyota','West','Driffield',3],
['Toyota','West','Downpatrick',9],
['Toyota','West','Downham Market',4],
['Toyota','West','Dover',12],
['BMW','West','Dorking',21],
['BMW','West','Dorchester',12],
['BMW','West','Doncaster',93],
['BMW','West','Diss',5],
['BMW','West','Dingwall',324],
['BMW','West','Devizes',7],
['BMW','West','Dereham',3],
['BMW','West','Derby',109],
['BMW','West','Daventry',37],
['BMW','West','Dartford',51],
['BMW','West','Darlington',80],
['Renault','West','Dalmally',15],
['Renault','West','Cumnock',480],
['Renault','West','Cromer',10],
['Renault','West','Crieff',332],
['Renault','West','Crewe',489],
['Renault','West','Crediton',7],
['Renault','West','Crawley',63],
['Renault','West','Cranbrook',11],
['Renault','West','Craigellachie',77],
['Renault','West','Coventry',173],
['Renault','West','Coupar Angus',207],
['Ford','West','Corwen',3],
['Ford','West','Coppull',285],
['Ford','West','Cookstown',6],
['Ford','West','Consett',153],
['Ford','West','Congleton',82],
['Ford','West','Colwyn Bay',47],
['Ford','West','Coleshill',19],
['Ford','West','Coleraine',27],
['Ford','West','Coldstream',55],
['Ford','West','Colchester',50],
['Vauxhall','West','Coatbridge',3393],
['Vauxhall','West','Coalville',44],
['Vauxhall','West','Clopton',8],
['Vauxhall','West','Clitheroe',40],
['Vauxhall','West','Clevedon',32],
['Vauxhall','West','Clacton-on-Sea',13],
['Vauxhall','West','Cirencester',13],
['Vauxhall','West','Church Stretton',11],
['Toyota','West','Chipping Sodbur',49],
['Toyota','West','Chipping Norton',8],
['Toyota','West','Chippenham',63],
['Toyota','West','Chichester',34],
['Toyota','West','Chesterfield',84],
['Toyota','West','Chester',286],
['Toyota','West','Chepstow',2],
['Toyota','West','Cheltenham',29],
['Toyota','West','Chelmsford',36],
['Toyota','West','Chatteris',3],
['Toyota','West','Chard',1],
['Toyota','West','Cerne Abbas',5],
['Toyota','West','Cemmaes Road',1],
['Toyota','West','Caterham',18],
['BMW','West','Castlebay',41],
['BMW','West','Castle Douglas',103],
['BMW','West','Carrickmore',1],
['BMW','West','Carradale',38],
['BMW','West','Carmarthen',11],
['BMW','West','Carlisle',1029],
['BMW','West','Cardigan',2],
['BMW','West','Cardiff',178],
['BMW','West','Canterbury',19],
['BMW','West','Cannock',164],
['BMW','West','Campbeltown',123],
['Renault','West','Cambridge',78],
['Renault','West','Camberley',21],
['Renault','West','Callandar',123],
['Renault','West','Caernarvon',16],
['Renault','West','Buxton',29],
['Renault','West','Bury-St-Edmunds',21],
['Renault','West','Burton-on-Trent',62],
['Renault','West','Burnley',91],
['Renault','West','Bungay',4],
['Renault','West','Budleigh Salter',8],
['Renault','West','Buckingham',11],
['Ford','West','Brooke',14],
['Ford','West','Bromyard',7],
['Ford','West','Bristol',209],
['Ford','West','Brighton',79],
['Ford','West','Brigg',4],
['Ford','West','Bridport',1],
['Ford','West','Bridlington',10],
['Ford','West','Bridgwater',31],
['Ford','West','Bridgnorth',37],
['Ford','West','Bridgend',72],
['Vauxhall','West','Brentwood',35],
['Vauxhall','West','Brecon',1],
['Vauxhall','West','Brechin',148],
['Vauxhall','West','Brampton',56],
['Vauxhall','West','Braintree',21],
['Vauxhall','West','Bradford',218],
['Vauxhall','West','Bracknell',53],
['Vauxhall','West','Bournemouth',130],
['Toyota','West','Bourne',6],
['Toyota','West','Boston',5],
['Toyota','West','Boroughbridge',9],
['Toyota','West','Bolton',312],
['Toyota','West','Bodmin',3],
['Toyota','West','Blandford',5],
['Toyota','West','Blairgowrie',146],
['Toyota','West','Blackpool',233],
['Toyota','West','Blackburn',252],
['Toyota','West','Bishops Waltham',77],
['Toyota','West','Bishops Stortfo',194],
['Toyota','West','Bishops Castle',10],
['Toyota','West','Bishop Auckland',51],
['Toyota','West','Birmingham',2189],
['BMW','West','Biggar',73],
['BMW','West','Bideford',2],
['BMW','West','Bicester',16],
['BMW','West','Bewdley',31],
['BMW','West','Betws-y-Coed',2],
['BMW','West','Berwick-on-Twee',87],
['BMW','West','Bellingham',44],
['BMW','West','Belfast',144],
['BMW','West','Bedford',78],
['BMW','West','Bedale',11],
['BMW','West','Bathgate',3537],
['Renault','West','Bath',45],
['Renault','West','Basingstoke',55],
['Renault','West','Basildon',50],
['Renault','West','Barry',11],
['Renault','West','Barrow-in-Furne',75],
['Renault','West','Barnstable',9],
['Renault','West','Barnsley',55],
['Renault','West','Barnard Castle',9],
['Renault','West','Barmouth',2],
['Renault','West','Bangor (Gwynedd',60],
['Renault','West','Bangor (Co.Down',25],
['Ford','West','Banff',146],
['Ford','West','Banchory',266],
['Ford','West','Banbury',37],
['Ford','West','Banbridge',15],
['Ford','West','Bamburgh',18],
['Ford','West','Ballymoney',2],
['Ford','West','Ballymena',13],
['Ford','West','Ballyclare',12],
['Ford','West','Ballycastle',3],
['Ford','West','Ballindalloch',22],
['Vauxhall','West','Ballater',33],
['Vauxhall','West','Ballachulish',39],
['Vauxhall','North West','Bala',2],
['Vauxhall','North West','Ayton',26],
['Vauxhall','North West','Ayr',2969],
['Vauxhall','North West','Aylesbury',41],
['Vauxhall','North West','Axminster',2],
['Vauxhall','North West','Ashford (Kent)',25],
['Toyota','North West','Ashbourne',16],
['Toyota','North West','Arrochar',28],
['Toyota','North West','Armagh',4],
['Toyota','North West','Ardrossan',1920],
['Toyota','North West','Ardgay',14],
['Toyota','North West','Arbroath',539],
['Toyota','North West','Appleby',59],
['Toyota','North West','Antrim',13],
['Toyota','North West','Andover',19],
['Toyota','North West','Ammanford',10],
['Toyota','North West','Amesbury',8],
['Toyota','North West','Alton',9],
['Toyota','North West','Alnwick',70],
['Toyota','North West','Alloa',1348],
['Citroen','North','Alford (Lincs)',9],
['Citroen','West','Alford (Aberdee',80],
['Citroen','East','Aldershot',89],
['Citroen','South','Aboyne',124],
['Citroen','South West','Abington',31],
['Citroen','South East','Abingdon',45],
['Citroen','North West','Aberystwyth',13],
['Citroen','North West','Abergavenny',5],
['Citroen','North West','Aberfeldy',53],
['Citroen','North West','Aberdeen',7706]
]);
data = new google.visualization.DataView(data);
// Define category pickers for 'Country', 'Region/State' and 'City'
var countryPicker = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'control1',
'options': {
'filterColumnLabel': 'Make',
'ui': {
'labelStacking': 'horizontal',
'allowTyping': false,
'allowMultiple': true
}
}
});
var regionPicker = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'control2',
'options': {
'filterColumnLabel': 'Region',
'ui': {
'labelStacking': 'horizontal',
'allowTyping': false,
'allowMultiple': true
}
}
});
var cityPicker = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'control3',
'options': {
'filterColumnLabel': 'City',
'ui': {
'labelStacking': 'horizontal',
'allowTyping': false,
'allowMultiple': true
}
}
});
// Define a bar chart to show 'Population' data
var barChart = new google.visualization.ChartWrapper({
'chartType': 'BarChart',
'containerId': 'chart1',
'options': {
'width': '100%',
'height': '100%',
'fontSize': 14,
'chartArea': {top: 0, right: 0, bottom: 0, height:'99.4%', width:'75%'}
},
// Configure the barchart to use columns 2 (City) and 3 (Population)
'view': {'columns': [2, 3]}
});
new google.visualization.Dashboard(document.getElementById('dashboard')).
bind(countryPicker, regionPicker).
bind(regionPicker, cityPicker).
bind(cityPicker, barChart).
draw(data);
google.visualization.events.addListener(countryPicker, 'ready', function() {
if(barChart.getDataTable()){
Div('resizable',barChart.getDataTable().getNumberOfRows());
}
});
google.visualization.events.addListener(regionPicker, 'ready', function() {
if(barChart.getDataTable()){
Div('resizable',barChart.getDataTable().getNumberOfRows());
}
});
google.visualization.events.addListener(cityPicker, 'ready', function() {
if(barChart.getDataTable()){
Div('resizable',barChart.getDataTable().getNumberOfRows());
}
});
google.visualization.events.addListener(countryPicker, 'error', function() {
alert("country error??");
});
google.visualization.events.addListener(regionPicker, 'error', function() {
alert("region error??");
});
google.visualization.events.addListener(cityPicker, 'error', function() {
alert("city error??");
});
new google.visualization.Dashboard(document.getElementById('dashboard')).
//bind(countryPicker, regionPicker).
//bind(regionPicker, cityPicker).
//bind(cityPicker, barChart).
draw(data);
} // end of drawVisualization
// sets the chart size to the same size as the Div
function setGraphSize() {
$('#chart1').height($('#resizable').height());
$('#chart1').width($('#resizable').width());
//This doesn't work yet
//$(document).height($('#resizable').height());
}
function Div(id,ud) {
var div=document.getElementById(id);
var h = (ud * 40);
div.style.height = h + "px";
var w=parseInt(div.style.width)+ud;
div.style.width = 1200 + "px";
//set the graph size
setGraphSize();
}
google.setOnLoadCallback(drawVisualization);
</script>
</head>
<body>
<style>
#resizable { width: 300px; height: 300px; padding: 0.5em; }
#resizable h3 { text-align: center; margin: 0; }
</style>
<div id="resizable" class="ui-widget-content">
<div id="dashboard">
<table>
<tr>
<td font-size: 0.9em;'>
<div id="control1"></div>
<div id="control2"></div>
<div id="control3"></div>
</td>
</tr>
<tr>
<td style='background-color:#EEEEEE;'>
<div style="float: left;" id="chart1"></div>
</td>
</tr>
</table>
</div>
</div>
</body>
</html>
A massive thanks in advance for any help you can provide in creating this script. I think it will be hugely useful.
Upvotes: 4
Views: 12228
Answers (2)
Hadleigh
Reputation: 498
This code is finally working in the example I provide below. The only thing it requires is the height of the surrounding DIV to be set at runtime. Maybe you can find a way around this.
<html>
<head>
<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
// Load the Visualization API and the controls package.
google.load('visualization', '1.1', {'packages':['corechart', 'controls']});
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawDashboard);
// Callback that creates and populates a data table,
// instantiates a dashboard, a range slider and a pie chart,
// passes in the data and draws it.
function drawDashboard() {
// Create our data table.
var data = google.visualization.arrayToDataTable([
['Make','Region','City','Total'],
['Renault','South','York',68],
['Renault','South','Yeovil',18],
['Renault','South','Wymondham',10],
['Renault','South','Wrexham',93],
['Renault','South','Worthing',25],
['Renault','South','Wormbridge',1],
['Renault','South','Worksop',35],
['Renault','South','Workington',719],
['Renault','South','Worcester',84],
['Renault','South','Wolverhampton',407],
['Renault','South','Witney',6],
['Ford','South','Wisbech',21],
['Ford','South','Winchester',10],
['Ford','South','Wincanton',3],
['Ford','South','Wigtown',41],
['Ford','South','Wigton',147],
['Ford','South','Wigan',1513],
['Ford','South','Wick',145],
['Ford','South','Whitehaven',560],
['Ford','South','Whitchurch',15],
['Ford','South','Whitby',8],
['Vauxhall','South','Whatton',10],
['Vauxhall','South','Weybridge',138],
['Vauxhall','South','Wetherby',13],
['Vauxhall','South','Weston-Super-Ma',41],
['Vauxhall','South','Westerham',5],
['Vauxhall','South','West Heslerton',8],
['Vauxhall','South','Wem',31],
['Vauxhall','South','Welwyn Garden C',56],
['Toyota','South','Welshpool',10],
['Toyota','South East','Wellingborough',93],
['Toyota','South East','Watford',102],
['Toyota','South East','Watchet',2],
['Toyota','South East','Warwick',164],
['Toyota','South East','Warrington',1808],
['Toyota','South East','Wareham',13],
['Toyota','South East','Ware',4],
['Toyota','South East','Warboys',7],
['Toyota','South East','Walsall',166],
['Toyota','South East','Wakefield',323],
['Toyota','South East','Uxbridge',40],
['Toyota','South East','Ullapool',27],
['Toyota','South East','Uckfield',17],
['BMW','South East','Tyneside',2763],
['BMW','South East','Turriff',122],
['BMW','South East','Tunbridge Wells',34],
['BMW','South East','Truro',8],
['BMW','South East','Tranent',420],
['BMW','South East','Torrington',1],
['BMW','South East','Torquay',31],
['BMW','South East','Tongue',19],
['BMW','South East','Tomdoun',1],
['BMW','South East','Tomatin',5],
['BMW','South East','Tiverton',17],
['Renault','South East','Thurso',159],
['Renault','South East','Thornhill',55],
['Renault','South East','Thirsk',5],
['Renault','South East','Thetford',6],
['Renault','South East','Thanet',15],
['Renault','South East','Thame',5],
['Renault','South East','Temple Cloud',10],
['Renault','South East','Telford',131],
['Renault','South East','Tavistock',5],
['Renault','South East','Taunton',21],
['Renault','South East','Tarporley',99],
['Ford','South East','Tarbert',44],
['Ford','South East','Tamworth',115],
['Ford','South East','Tain',154],
['Ford','South East','Swindon',63],
['Ford','South East','Swansea',88],
['Ford','South East','Swaffham',1],
['Ford','South East','Sunderland',2199],
['Ford','South East','Sudbury',8],
['Ford','South East','Strontian',11],
['Ford','South East','Strathy',9],
['Vauxhall','South East','Strathpeffer',27],
['Vauxhall','South East','Strathdon',9],
['Vauxhall','South East','Strathaven',173],
['Vauxhall','South East','Stratford-upon-',44],
['Vauxhall','South East','Stranraer',164],
['Vauxhall','South East','Stowmarket',10],
['Vauxhall','South East','Stow-on-the-Wol',4],
['Vauxhall','South East','Stornoway',226],
['Toyota','South East','Stonehaven',243],
['Toyota','South East','Stoke-on-Trent',1680],
['Toyota','South East','Stirling',3103],
['Toyota','South East','Stevenage',21],
['Toyota','South East','Stanhope',24],
['Toyota','South East','Stamford',12],
['Toyota','South East','Staines',30],
['Toyota','South East','Stafford',832],
['Toyota','South East','St Helens',666],
['Toyota','South East','St Boswells',73],
['Toyota','South East','St Austell',20],
['Toyota','South East','St Andrews',734],
['Toyota','South East','St Albans',75],
['Toyota','South East','Spilsby',1],
['BMW','South East','Spalding',6],
['BMW','South East','Southport',217],
['BMW','South East','Southend-on-Sea',107],
['BMW','South East','Southampton',66],
['BMW','South East','South Molton',1],
['BMW','South East','Slough',155],
['BMW','South East','Sleaford',6],
['BMW','South East','Skipton',14],
['BMW','South East','Skelmersdale',185],
['BMW','South East','Skegness',8],
['BMW','South East','Sittingbourne',15],
['BMW','South East','Shrewsbury',160],
['BMW','South East','Shetland',53],
['BMW','South East','Shepton Mallet',6],
['BMW','South East','Sheffield',217],
['BMW','South East','Shap',34],
['BMW','South East','Shaftesbury',3],
['BMW','South East','Sevenoaks',83],
['BMW','South East','Settle',7],
['BMW','South East','Selkirk',39],
['BMW','South East','Selby',10],
['BMW','South East','Sedgefield',8],
['BMW','South East','Sedbergh',11],
['BMW','South East','Scunthorpe',28],
['BMW','South East','Scourie',7],
['BMW','South East','Scarinish',38],
['BMW','South East','Scarborough',17],
['BMW','South East','Saxmundham',10],
['BMW','South East','Sanquhar',69],
['BMW','South East','Sandy',3],
['BMW','South East','Sandwick',51],
['BMW','South East','Sanday',9],
['BMW','South East','Salisbury',11],
['BMW','South East','Saintfield',4],
['BMW','South East','Saffron Walden',1],
['BMW','South East','Rye',17],
['BMW','South East','Ruthin',12],
['BMW','South East','Runcorn',318],
['BMW','South East','Rugely',142],
['BMW','South East','Rugby',44],
['BMW','South East','Royston',18],
['BMW','South East','Rothesay',132],
['BMW','South East','Rotherham',93],
['BMW','South East','Rothbury',22],
['BMW','South East','Rostrevor',25],
['BMW','South East','Ross-on-Wye',4],
['BMW','South East','Romsey',6],
['BMW','South East','Romford',57],
['BMW','South East','Rochdale',209],
['BMW','South East','Ripon',19],
['BMW','South East','Ripley',35],
['BMW','South East','Ringwood',8],
['BMW','South East','Richmond',21],
['Renault','South East','Rhyl',55],
['Renault','South East','Retford',18],
['Renault','South East','Redruth',7],
['Renault','South East','Redhill',124],
['Renault','South East','Redditch',78],
['Renault','South East','Reading',101],
['Renault','South East','Raughton Head',54],
['Renault','South East','Pwllheli',4],
['Renault','South East','Prudhoe',162],
['Renault','South East','Preston',1126],
['Renault','South East','Portsmouth',108],
['Ford','South East','Porthmadog',14],
['Ford','South East','Portadown',14],
['Ford','South East','Port Ellen',124],
['Ford','South East','Pooley Bridge',57],
['Ford','South East','Pontypridd',51],
['Ford','South East','Pontypool',15],
['Ford','South East','Pontefract',100],
['Ford','South East','Pocklington',13],
['Ford','South East','Plymouth',47],
['Ford','South East','Pitlochry',142],
['Vauxhall','South East','Pickering',9],
['Vauxhall','South East','Petersfield',10],
['Vauxhall','South East','Peterhead',691],
['Vauxhall','South East','Peterborough',49],
['Vauxhall','South East','Perth',1455],
['Vauxhall','South East','Penzance',11],
['Vauxhall','South East','Penrith',372],
['Vauxhall','North','Penicuik',233],
['Toyota','North','Pencombe',3],
['Toyota','North','Peebles',53],
['Toyota','North','Peat Inn',579],
['Toyota','North','Patrington',9],
['Toyota','North','Pakenham',4],
['Toyota','North','Oxford',55],
['Toyota','North','Oswestry',35],
['Toyota','North','Orpington',12],
['Toyota','North','Orkney',166],
['Toyota','North','Omagh',8],
['Toyota','North','Oldmeldrum',361],
['Toyota','North','Okehampton',4],
['Toyota','North','Oban',221],
['Toyota','North','Oakham',18],
['BMW','North','Nottingham',184],
['BMW','North','Norwich',83],
['BMW','North','Northwich',1610],
['BMW','East','Northampton',87],
['BMW','East','Northallerton',53],
['BMW','East','North Walsham',2],
['BMW','East','North Cave',8],
['BMW','East','North Berwick',233],
['BMW','East','Newtownstewart',5],
['BMW','East','Newtown',7],
['BMW','East','Newton Stewart',55],
['Renault','East','Newton Abbot',19],
['Renault','East','Newry',15],
['Renault','East','Newquay',1],
['Renault','East','Newport',58],
['Renault','East','Newmarket',7],
['Renault','East','Newcastle (Co.D',2],
['Renault','East','Newbury',38],
['Renault','East','Newark',24],
['Renault','East','New Mills',61],
['Renault','East','New Luce',15],
['Renault','East','New Galloway',25],
['Ford','East','Neath',25],
['Ford','East','Narberth',1],
['Ford','East','Nairn',183],
['Ford','East','Motherwell',4552],
['Ford','East','Moscow',337],
['Ford','East','Morpeth',400],
['Ford','East','Montrose',241],
['Ford','East','Monmouth',3],
['Ford','East','Mold',63],
['Ford','East','Moffat',26],
['Vauxhall','East','Minehead',1],
['Vauxhall','East','Milton Keynes',175],
['Vauxhall','East','Millom',27],
['Vauxhall','East','Milford Haven',8],
['Vauxhall','East','Middlesbrough',190],
['Vauxhall','East','Mid Yell',18],
['Vauxhall','East','Merthyr Tydfil',18],
['Vauxhall','East','Meriden',14],
['Toyota','East','Melton Mowbray',16],
['Toyota','East','Medway',45],
['Toyota','East','Maybole',143],
['Toyota','East','Maud',211],
['Toyota','East','Matlock',10],
['Toyota','East','Martin',4],
['Toyota','East','Marlborough',10],
['Toyota','East','Market Weighton',4],
['Toyota','East','Market Rasen',16],
['Toyota','East','Market Harborou',7],
['Toyota','East','Market Drayton',46],
['Toyota','East','Mansfield',71],
['Toyota','East','Manchester',6602],
['Toyota','East','Malvern',46],
['BMW','East','Malton',6],
['BMW','East','Malmesbury',4],
['BMW','East','Mallaig',34],
['BMW','East','Maldon',25],
['BMW','East','Maidstone',41],
['BMW','East','Maidenhead',45],
['BMW','East','Magherafelt',4],
['BMW','East','Madingley',8],
['BMW','East','Machynlleth',2],
['BMW','East','Macclesfield',428],
['BMW','East','Lynton',1],
['Renault','East','Lymington',11],
['Renault','East','Lydney',27],
['Renault','East','Lybster',48],
['Renault','East','Luton',203],
['Renault','East','Ludlow',30],
['Renault','East','Lowestoft',14],
['Renault','East','Louth',2],
['Renault','East','Loughborough',22],
['Renault','East','Looe',2],
['Renault','East','Londonderry',19],
['Renault','East','London',2793],
['Ford','East','Lockerbie',88],
['Ford','East','Lochmaddy',51],
['Ford','East','Lochinver',11],
['Ford','East','Lochgilphead',269],
['Ford','East','Lochcarron',19],
['Ford','East','Lochboisdale',22],
['Ford','East','Llanon',7],
['Ford','East','Llanidloes',3],
['Ford','East','Llanelli',3],
['Ford','East','Llandyssul',3],
['Vauxhall','East','Llandrindod Wel',3],
['Vauxhall','East','Llandeilo',1],
['Vauxhall','East','Llanarth',4],
['Vauxhall','East','Liverpool',2907],
['Vauxhall','East','Lisnaskea',5],
['Vauxhall','East','Liskeard',8],
['Vauxhall','East','Lisburn',24],
['Vauxhall','East','Lincoln',42],
['Toyota','East','Limavady',1],
['Toyota','East','Leyburn',8],
['Toyota','East','Lerwick',190],
['Toyota','East','Leominster',17],
['Toyota','East','Leighton Buzzar',35],
['Toyota','East','Leicester',237],
['Toyota','East','Leeds',935],
['Toyota','East','Lea Valley',49],
['Toyota','East','Laurencekirk',138],
['Toyota','East','Launceston',1],
['Toyota','East','Lauder',24],
['Toyota','East','Larne',4],
['Toyota','East','Lapworth',18],
['Toyota','East','Langholm',63],
['BMW','East','Lancaster',135],
['BMW','East','Lanark',748],
['BMW','East','Lampeter',2],
['BMW','East','Lairg',19],
['BMW','East','Laggan',7],
['BMW','East','Ladybank',269],
['BMW','East','Kyle',53],
['BMW','East','Knutsford',247],
['BMW','East','Knighton',1],
['BMW','East','Kirriemuir',223],
['BMW','East','Kirkwhelpington',5],
['Renault','East','Kirkcudbright',88],
['Renault','East','Kirkcaldy',3742],
['Renault','East','Kinrossie',55],
['Renault','East','Kinross',211],
['Renault','East','Kingussie',89],
['Renault','East','Kington',4],
['Renault','East','Kingsbridge',12],
['Renault','East','Kings Lynn',15],
['Renault','East','Kilrea',2],
['Renault','East','Kilmelford',44],
['Renault','East','Kilmarnock',1877],
['Ford','East','Killingholme',4],
['Ford','East','Killin',40],
['Ford','East','Killearn',568],
['Ford','East','Kilchrenan',21],
['Ford','East','Kidderminster',83],
['Ford','East','Kettering',37],
['Ford','East','Keswick',69],
['Ford','East','Kesh',2],
['Ford','East','Kendal',42],
['Ford','East','Kelso',41],
['Vauxhall','East','Keith',327],
['Vauxhall','East','Keighley',32],
['Vauxhall','East','Johnstone',1912],
['Vauxhall','East','Jersey',3],
['Vauxhall','East','Isle of Wight',33],
['Vauxhall','East','Isle of Skye Po',49],
['Vauxhall','East','Isle of Skye Ed',54],
['Vauxhall','East','Isle of Skye Br',61],
['Toyota','East','Isle of Mull To',20],
['Toyota','East','Isle of Mull Fi',7],
['Toyota','East','Isle of Mull Cr',25],
['Toyota','East','Isle of Man',40],
['Toyota','East','Isle of Benbecu',68],
['Toyota','East','Isle of Arran',87],
['Toyota','East','Ipswich',60],
['Toyota','East','Ipstones',138],
['Toyota','East','Inverurie',347],
['Toyota','East','Inverness',2007],
['Toyota','East','Inveraray',57],
['Toyota','East','Insch',59],
['Toyota','East','Huntly',127],
['Toyota','East','Huntingdon',41],
['BMW','East','Hunstanton',1],
['BMW','East','Hungerford',2],
['BMW','East','Hull',67],
['BMW','East','Huddersfield',1419],
['BMW','East','Horsham',29],
['BMW','East','Hornsea',7],
['BMW','East','Hornby',33],
['BMW','East','Honiton',7],
['BMW','East','Honington',1],
['BMW','East','Holyhead',22],
['BMW','East','Holsworthy',10],
['Renault','East','Holmes Chapel',94],
['Renault','East','Holbeach',6],
['Renault','East','Hitchin',42],
['Renault','East','Hinckley',29],
['Renault','East','High Wycombe',44],
['Renault','East','Hexham',330],
['Renault','East','Hereford',113],
['Renault','East','Henley-on-Thame',13],
['Renault','East','Hemel Hempstead',15],
['Renault','East','Helmsdale',9],
['Renault','East','Helensburgh',477],
['Ford','East','Heathfield',1],
['Ford','East','Haywards Heath',7],
['Ford','East','Hawkshead',18],
['Ford','East','Hawick',68],
['Ford','East','Haverhill',4],
['Ford','East','Haverfordwest',18],
['Ford','East','Hathersage',6],
['Ford','East','Hastings',19],
['Ford','East','Haslemere',8],
['Ford','East','Hartlepool',49],
['Vauxhall','East','Harthill',974],
['Vauxhall','East','Harrogate',37],
['Vauxhall','East','Harris',47],
['Vauxhall','East','Haltwhistle',46],
['Vauxhall','East','Halifax',280],
['Vauxhall','East','Guiseley',22],
['Vauxhall','East','Guisborough',11],
['Vauxhall','East','Guildford',52],
['Toyota','East','Guernsey',9],
['Toyota','East','Grimsby',19],
['Toyota','East','Gretna',177],
['Toyota','East','Greenock',2695],
['Toyota','East','Great Yarmouth',35],
['Toyota','East','Great Dunmow',9],
['Toyota','East','Great Bernera',15],
['Toyota','East','Grays Thurrock',28],
['Toyota','East','Gravesend',20],
['Toyota','East','Grantown-on-Spe',137],
['Toyota','East','Grantham',22],
['Toyota','East','Grange-Over-San',9],
['Toyota','East','Gosforth',93],
['Toyota','East','Goole',9],
['BMW','East','Golspie',54],
['BMW','East','Gloucester',220],
['BMW','East','Glossop',73],
['BMW','East','Glenurquhart',75],
['BMW','East','Glenborrodale',2],
['BMW','East','Glastonbury',3],
['BMW','West','Glasgow',40237],
['BMW','West','Girvan',142],
['BMW','West','Garstang',25],
['BMW','West','Galashiels',133],
['BMW','West','Gairloch',40],
['Renault','West','Gainsborough',30],
['Renault','West','Frome',7],
['Renault','West','Fraserburgh',361],
['Renault','West','Fortrose',62],
['BMW','West','Bellingham',44],
['BMW','West','Belfast',144],
['BMW','West','Bedford',78],
['BMW','West','Bedale',11],
['BMW','West','Bathgate',3537],
['Renault','West','Bath',45],
['Renault','West','Basingstoke',55],
['Renault','West','Basildon',50],
['Renault','West','Barry',11],
['Renault','West','Barrow-in-Furne',75],
['Renault','West','Barnstable',9],
['Renault','West','Barnsley',55],
['Renault','West','Barnard Castle',9],
['Renault','West','Barmouth',2],
['Renault','West','Bangor (Gwynedd',60],
['Renault','West','Bangor (Co.Down',25],
['Ford','West','Banff',146],
['Ford','West','Banchory',266],
['Ford','West','Banbury',37],
['Ford','West','Banbridge',15],
['Ford','West','Bamburgh',18],
['Ford','West','Ballymoney',2],
['Ford','West','Ballymena',13],
['Ford','West','Ballyclare',12],
['Ford','West','Ballycastle',3],
['Ford','West','Ballindalloch',22],
['Vauxhall','West','Ballater',33],
['Vauxhall','West','Ballachulish',39],
['Vauxhall','North West','Bala',2],
['Vauxhall','North West','Ayton',26],
['Vauxhall','North West','Ayr',2969],
['Vauxhall','North West','Aylesbury',41],
['Vauxhall','North West','Axminster',2],
['Vauxhall','North West','Ashford (Kent)',25],
['Toyota','North West','Ashbourne',16],
['Toyota','North West','Arrochar',28],
['Toyota','North West','Armagh',4],
['Toyota','North West','Ardrossan',1920],
['Toyota','North West','Ardgay',14],
['Toyota','North West','Arbroath',539],
['Toyota','North West','Appleby',59],
['Toyota','North West','Antrim',13],
['Toyota','North West','Andover',19],
['Toyota','North West','Ammanford',10],
['Toyota','North West','Amesbury',8],
['Toyota','North West','Alton',9],
['Toyota','North West','Alnwick',70],
['Toyota','North West','Alloa',1348],
['Citroen','North','Alford (Lincs)',9],
['Citroen','West','Alford (Aberdee',80],
['Citroen','East','Aldershot',89],
['Citroen','South','Aboyne',124],
['Citroen','South West','Abington',31],
['Citroen','South East','Abingdon',45],
['Citroen','North West','Aberystwyth',13],
['Citroen','North West','Abergavenny',5],
['Citroen','North West','Aberfeldy',53],
['Citroen','North West','Aberdeen',7706]
]);
// Create a dashboard.
var dashboard = new google.visualization.Dashboard(
document.getElementById('dashboard_div'));
// Define category pickers for 'Country', 'Region/State' and 'City'
var controlPicker1 = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'control1',
'options': {
'filterColumnLabel': 'Make',
'ui': {
'labelStacking': 'horizontal',
'allowTyping': false,
'allowMultiple': true
}
}
});
var controlPicker2 = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'control2',
'options': {
'filterColumnLabel': 'Region',
'ui': {
'labelStacking': 'horizontal',
'allowTyping': false,
'allowMultiple': true
}
}
});
var controlPicker3 = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'control3',
'options': {
'filterColumnLabel': 'City',
'ui': {
'labelStacking': 'horizontal',
'allowTyping': false,
'allowMultiple': true
}
}
});
// Create a pie chart, passing some options
var barChart = new google.visualization.ChartWrapper({
'chartType': 'BarChart',
'containerId': 'chart_div',
'options': {
'width': '100%',
'height': '100%',
'fontSize': 14,
'chartArea': {top: 0, right: 0, bottom: 0, height:'95%', width:'70%'}
},
// Configure the barchart to use columns 2 (City) and 3 (Population)
'view': {'columns': [2, 3]}
});
google.visualization.events.addListener(dashboard, 'ready', function() {
// Dashboard redraw, have a look at how many rows the barChart is displaying
var numRows = barChart.getDataTable().getNumberOfRows();
var expectedHeight = (numRows * 40)+50;
if (parseInt(barChart.getOption('height'), 10) != expectedHeight) {
// Update the chart options and redraw just it
Div("chart_div", expectedHeight);
barChart.setOption('height', expectedHeight);
barChart.draw();
}
});
dashboard.bind(controlPicker1, controlPicker2);
dashboard.bind(controlPicker2, controlPicker3);
dashboard.bind(controlPicker3, barChart);
// Draw the dashboard.
dashboard.draw(data);
}
function Div(id,h) {
var div=document.getElementById(id);
h = h + "px";
var w=parseInt(div.style.width);
if($(this).width() >= 1200){
w = 1200 + "px";
}else{
w = ($(this).width()-30) + "px";
}
$(div).height(h);
$(div).width(w);
}
</script>
</head>
<style>
#chart_div { width: 1200px; height: 30000px; }
</style>
<body>
<!--Div that will hold the dashboard-->
<div id="dashboard_div">
<!--Divs that will hold each control and visualization-->
<div id="control1"></div>
<div id="control2"></div>
<div id="control3"></div>
<div id="chart_div" style="background-color:#EEEEEE;"></div>
</div>
</body>
</html>
Thanks to everyone who helped find a solution.
Upvotes: 0
oli
Reputation: 3551
From what I understand, you want to find out the number of rows in the underlying data table of a chart after a filter has been applied.
You could do this by adding event listeners to your controls, listening for a 'statechange' event. This is fired when a control changes. When this happens, you can grab your chart and get the updated number of rows in it's data table. Control docs here.
I added the following just before the final closing brace in your linked example in the playground, give it a shot:
google.visualization.events.addListener(countryPicker, 'statechange', function() {
alert(barChart.getDataTable().getNumberOfRows());
});
Change the country picker and it should alert the updated number of rows.
Upvotes: 1
Related Questions
- Set height of chart in Chart.js
- How do I increase the row height of Google Timelines Chart?
- Highcharts - how to have a chart with dynamic height?
- Automatic Height for Chart.js
- Dynamically Setting Height of Chart
- how to make a div match a dynamically created google chart height
- Resize google table chart row height
- How to set Google Chart height based on number of rows?
- Google Gantt chart height detection
- Specifying column heights in Google Charts Histogram