Google Chart: la modification de la hauteur du tableau de manière dynamique, basé sur le nombre total des lignes

Google ont récemment offert la possibilité de filtrer les résultats sous forme graphique à l'aide de certains contrôles natifs.

Une partie du code que je fournis ci-dessous sont prises directement à partir de la nouvelle 'Les contrôles dépendants' dans l'API Google Chart aire de jeux. Mon problème est directement lié à des restrictions imposées dans cette nouvelle dynamique de la fonctionnalité.

J'ai un grand jeu de données de plus de 4000 lignes, je veux afficher dans un guide graphique. Je ne sais pas combien de lignes il y aura, mais je peux utiliser le code suivant pour le savoir.

var initialHeight = data.getNumberOfRows() * 60

Le problème que j'ai est que le graphique de la hauteur doit être de très grande taille afin d'afficher toutes les 4000+ des enregistrements. Mais le graphique de la hauteur ne change pas lorsque les contrôles dépendants sont appliquées. Au lieu de redimensionnement, les données "grandit" pour remplir le graphique d'origine de la hauteur. Les barres du graphique juste devenir plus grand dans le même espace. Par conséquent, lorsque mon 4000+ enregistrements sont filtrés vers le bas pour seulement un record, ce disque est aussi grande que la première 4000+.

Pour lutter contre cela, je suis en utilisant JQUERY pour modifier la taille de la DIV qui entoure le graphique, qui à son tour modifie le graphique de la taille. Cela fonctionne parce que le graphique hérite de la taille de la DIV entourant, si elle n'est pas définie de façon explicite.

** LES PREMIÈRES RÉPONSES CI-DESSOUS DU CODE EN QUESTION, J'AI MAINTENANT SUPPRIMÉ, PARCE QUE LE DÉVELOPPEMENT A PROGRESSÉ. **

Partie 2.

Suivant la nature de l'aide auprès de Oli, j'ai encore développé ce script et il est presque de travail ... j'espère.

Il y a deux caviats à celle de l'instruction.

La première est qu'il a de "tracer" le graphique de deux fois, la première fois afin de calculer le nombre de lignes qu'il doit afficher, la deuxième fois pour étirer ou rétrécir la taille du tableau à taille égale, Div.

Ce n'est pas aussi précis que je le voudrais mais ne peux pas trouver un moyen de contourner cela?

La deuxième caviat est que les erreurs sur le "prêt" de l'état de la première "tirage" de l'événement. Si vous supprimez le code suivant pour le 3 'ControlWrapper' éléments que vous les verrez.

if(barChart.getDataTable()){

Cette erreur signifie que la modification de l' 'cityPicker' filtre ne modifie pas la hauteur. Il travaille aujourd'hui pour le pays et la région comme il se doit.

Une fois de plus, je ne peux pas trouver un moyen de contourner cela. et je pense que c'est mon JS connaissances, plutôt qu'autre chose.

Voici le code complet de la page tel qu'il est actuellement:

<!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>

Un énorme merci à l'avance pour toute aide que vous pouvez fournir à la création de ce script. Je pense qu'il sera très utile.

Avant d'essayer de répondre à cette question, à re-préciser, vous souhaitez régler la hauteur de la carte basée sur le nombre de barres qui sera affiché?
Oui, c'est exactement ce que je veux faire. Veuillez voir à quel point j'ai eu dans le développement de cette ci-dessous. S'il vous plaît ne me dites pas qu'il y est une fonctionnalité native pour cela? ...
Je voulais dire ci-dessus, pas en dessous ....

OriginalL'auteur Hadleigh | 2011-05-13

1

De ce que je comprends, vous voulez connaître le nombre de lignes dans la table de données d'un graphique après un filtre a été appliqué.

Vous pouvez le faire en ajoutant des écouteurs d'événement à vos commandes, à l'écoute d'un " statechange de l'événement. Ce est déclenché lorsqu'un contrôle des changements. Lorsque cela se produit, vous pouvez saisir votre tableau et obtenir la mise à jour du nombre de lignes du tableau de données. Contrôle de docs ici.

J'ai ajouté le code suivant juste avant la dernière accolade de fermeture de votre lié exemple dans la cour de récréation, donner un coup de feu:
```
google.visualization.events.addListener(countryPicker, 'statechange', function() {
alert(barChart.getDataTable().getNumberOfRows());
});
```
Changer le pays sélecteur et il doit alerter la mise à jour du nombre de lignes.

Merci, ce post m'a aidé à déplacer le problème d'un peu d'étapes, et je suis presque là. J'ai posté la "finale" du problème j'ai besoin pour les surmonter.
+1 pour la mention de Contrôle des documents; ils m'ont aidé à voir la hauteur en option à la carte! Dans mon cas, mon php sait combien de lignes, donc je ne peux l'affirmer. Maintenant essayer de comprendre solution de contournement pour le google chart étant d'environ 30% plus grand que nécessaire. 😛

OriginalL'auteur oli

Vous devez vous connecter pour publier un commentaire.