Google недавно предоставил возможность фильтровать результаты графика с помощью некоторых встроенных элементов управления.
Часть кода, который я привожу ниже, взят непосредственно из новых 'Зависимых элементов управления ' на игровой площадке Google Chart API. Моя проблема напрямую связана с ограничениями, наложенными на эту новую динамическую функциональность.
У меня есть большой набор данных из 4000+ строк, которые я хочу отобразить на одном графике hbar. Я не знаю, сколько там будет строк, но я могу использовать следующий код, чтобы узнать.
var initialHeight = data.getNumberOfRows() * 60
У меня проблема в том, что высота диаграммы должна быть очень высокой, чтобы отображались все 4000+ записей. Но высота диаграммы не меняется при применении зависимых элементов управления. Вместо изменения размера данные «растут», чтобы заполнить исходную высоту графика. Полосы на диаграмме становятся выше в пределах того же пространства. Следовательно, когда мои 4000+ записей отфильтровываются до одной записи, эта одна запись имеет высоту исходных 4000+.
Чтобы бороться с этим, я использую JQUERY для изменения размера DIV, окружающего график, что, в свою очередь, изменяет размер графика. Это работает, потому что граф наследует свой размер от окружающего DIV, если он не установлен явно.
** ПЕРВОНАЧАЛЬНЫЕ ОТВЕТЫ, ОТНОСЯЩИЕСЯ К КОДУ, КОТОРЫЙ Я ТЕПЕРЬ УДАЛЕН, ПОТОМУ ЧТО РАЗРАБОТКА ПРОДОЛЖАЛАСЬ. **
Часть 2.
После любезной помощи Оли я доработал этот скрипт, и он почти работает ... Надеюсь.
В этом заявлении есть две кавычки.
Во-первых, он должен «нарисовать» диаграмму дважды: в первый раз, чтобы вычислить количество строк, которые необходимо отобразить, во второй раз, чтобы растянуть или уменьшить размер диаграммы до равного размера Div.
Это не так лаконично, как мне хотелось бы, но не можете найти способ обойти это?
Вторая проблема заключается в том, что это ошибка в состоянии готовности первого события розыгрыша. Если вы удалите следующий код для 3 элементов ControlWrapper, вы увидите их.
if(barChart.getDataTable()){
Эта ошибка означает, что изменение фильтра cityPicker не приводит к изменению высоты. Теперь он работает для страны и региона, как и должно быть.
Еще раз, я не могу найти способ обойти это. и я думаю, что это мои знания JS, а не что-то еще.
Вот полный код страницы в ее нынешнем виде:
<!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>
Заранее благодарим вас за любую помощь, которую вы можете оказать в создании этого скрипта. Я думаю, это будет очень полезно.
