Databases
StackOverflow2013
Postsdbo
POGoogle Chart: Altering height of chart dynamically, based on total rows
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POGoogle Chart: Altering height of chart dynamically, based on total rows
    primarykey
    data
    text
    <p>Google have recently provided the ability to filter the graph results using some native controls. </p> <p>Some of the code I provide below is taken directly from the new <a href="http://code.google.com/apis/ajax/playground/?type=visualization#dependent_controls" rel="nofollow">'Dependent controls'</a> in the Google Chart API playground. My problem is directly related to limitations imposed in this new dynamic functionality.</p> <p>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.</p> <pre><code>var initialHeight = data.getNumberOfRows() * 60 </code></pre> <p>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+.</p> <p>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. </p> <p>** THE INITIAL RESPONSES BELOW REFERRED TO CODE I HAVE NOW REMOVED, BECAUSE THE DEVELOPMENT HAS PROGRESSED. **</p> <p><strong>Part 2.</strong></p> <p>Following kind help from <strong>Oli</strong>, I have further developed this script and it is almost working ... I hope. </p> <p>There are two caviats to that statement.</p> <p>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.</p> <p>This is not as concise as I would like it but can't find a way around it?</p> <p>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. </p> <pre><code>if(barChart.getDataTable()){ </code></pre> <p>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. </p> <p>Once again, I cannot find a way around this. and I think that it's my JS knowledge, rather than anything else.</p> <p>Here is the complete code for the page as it currently stands:</p> <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"&gt; &lt;head&gt; &lt;title&gt;Google Visualization API Sample&lt;/title&gt; &lt;script type="text/javascript" src="http://www.google.com/jsapi"&gt;&lt;/script&gt; &lt;link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/themes/base/jquery-ui.css" type="text/css" media="all" /&gt; &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"&gt;&lt;/script&gt; &lt;script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.min.js" type="text/javascript"&gt;&lt;/script&gt; &lt;script src="http://jquery-ui.googlecode.com/svn/tags/latest/external/jquery.bgiframe-2.1.2.js" type="text/javascript"&gt;&lt;/script&gt; &lt;script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/i18n/jquery-ui-i18n.min.js" type="text/javascript"&gt;&lt;/script&gt; &lt;script src="http://jquery.com/files/social/js/jquery.tabs.js"&gt;&lt;/script&gt; &lt;script type="text/javascript"&gt; google.load('visualization', '1.1', {packages: ['controls']}); &lt;/script&gt; &lt;script type="text/javascript"&gt; 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); &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;style&gt; #resizable { width: 300px; height: 300px; padding: 0.5em; } #resizable h3 { text-align: center; margin: 0; } &lt;/style&gt; &lt;div id="resizable" class="ui-widget-content"&gt; &lt;div id="dashboard"&gt; &lt;table&gt; &lt;tr&gt; &lt;td font-size: 0.9em;'&gt; &lt;div id="control1"&gt;&lt;/div&gt; &lt;div id="control2"&gt;&lt;/div&gt; &lt;div id="control3"&gt;&lt;/div&gt; &lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td style='background-color:#EEEEEE;'&gt; &lt;div style="float: left;" id="chart1"&gt;&lt;/div&gt; &lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;/div&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>A massive thanks in advance for any help you can provide in creating this script. I think it will be hugely useful.</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USHadleigh
    1. USHadleigh
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POGoogle Chart: Altering height of chart dynamically, based on total rows
      1. This table or related slice is empty.
      1. VTUpMod
    1. COBefore I attempt to answer this, want to re-clarify, you want to adjust the height of the chart based on the number of bars that will be displayed?
      singulars
      1. POGoogle Chart: Altering height of chart dynamically, based on total rows
      1. USDuniyadnd
    2. COYes, that's exactly what I want to do. Please see how far I have got in the development of this below. Please don't tell me that there is native functionality for this? ...
      singulars
      1. POGoogle Chart: Altering height of chart dynamically, based on total rows
      1. USHadleigh
    3. COI meant above, not below ....
      singulars
      1. POGoogle Chart: Altering height of chart dynamically, based on total rows
      1. USHadleigh
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload