I'm trying to create an interactive histogram chart using Google Chart. My code for generating the histogram can be found here.
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load("current", {packages:["corechart"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['pt_network_seg_id','speed'],
['9','32'],
['10','22'],
['13','23'],
['14','18'],
['15','34'],
['17','22'],
['18','30'],
['19','20'],
['20','33'],
['21','26'],
['22','33'],
['23','21'],
['24','19'],
['25','41'],
['26','23'],
['27','16'],
['28','39'],
['29','15'],
['30','25'],
['31','26'],
['32','29'],
['40','31'],
['41','9'],
['42','27'],
['44','25'],
['45','10'],
['46','25'],
['47','24'],
['48','20'],
['49','20'],
['50','25'],
['51','19'],
['52','34'],
['53','19'],
['54','27'],
['56','27'],
['58','10'],
['59','26'],
['60','54'],
['62','54'],
['64','17'],
['68','27'],
['74','43'],
['75','10'],
['76','32'],
['77','47'],
['78','31'],
['80','24'],
['84','20'],
['85','35'],
['86','33'],
['88','25'],
['89','26'],
['91','35'],
['93','25'],
['94','18'],
['95','24'],
['98','34'],
['100','23'],
['101','36'],
['102','18'],
['103','21'],
['105','16'],
['106','26'],
['107','29'],
['109','8'],
['111','16'],
['112','19'],
['113','33'],
['114','20'],
['115','18'],
['116','21'],
['117','14'],
['126','22'],
['127','26'],
['130','24'],
['131','10'],
['133','29'],
['134','26'],
['135','22'],
['136','16'],
['137','14'],
['139','23'],
['140','17'],
['141','18'],
['142','19'],
['143','15'],
['144','25'],
['145','19'],
['146','23'],
['147','18'],
['148','50'],
['150','47'],
['151','13'],
['152','37'],
['153','24'],
['156','22'],
['157','21'],
['158','40'],
['159','34'],
['160','12'],
['161','22'],
['165','18'],
['168','24'],
['169','23'],
['171','20'],
['172','22'],
['173','25'],
['175','30'],
['176','24'],
['177','15'],
['178','25'],
['179','0'],
['181','28'],
['182','21'],
['183','17'],
['184','22'],
['185','40'],
['187','24'],
['188','22'],
['189','21'],
['190','8'],
['191','18'],
['192','23'],
['193','33'],
['194','30'],
['195','32'],
['196','33'],
['197','31'],
['198','34'],
['199','34'],
['200','31'],
['201','31'],
['203','20'],
['204','34'],
['205','32'],
['206','19'],
['210','24'],
['211','32'],
['212','29'],
['213','19'],
['214','20'],
['215','19'],
['216','21'],
['217','24'],
['218','27'],
['219','22'],
['220','20'],
['221','17'],
['222','18'],
['223','34'],
['224','35'],
['229','19'],
['230','22'],
['231','21'],
['232','23'],
['234','27'],
['235','22'],
['236','12'],
['237','17'],
['238','16'],
['239','19'],
['240','33'],
['241','13'],
['242','24'],
['243','25'],
['244','19'],
['245','19'],
['246','17'],
['247','23'],
['248','22'],
['250','12'],
['252','10'],
['253','13'],
['254','17'],
['256','23'],
['257','16'],
['258','20'],
['259','24'],
['260','36'],
['263','15'],
['264','19'],
['266','24'],
['267','14'],
['270','17'],
['271','23'],
['272','14'],
['274','21'],
['277','26'],
['279','18'],
['280','27'],
['281','26'],
['282','19'],
['283','23'],
['284','19'],
['288','49'],
['289','37'],
['290','31'],
['291','50'],
['296','17'],
['297','29'],
['299','17'],
['301','32'],
['302','34'],
['304','17'],
['305','32'],
['306','23'],
['307','34'],
['309','27'],
['314','20'],
['316','39'],
['317','48'],
['318','34'],
['319','46'],
['326','16'],
['329','0'],
['330','17'],
['334','15'],
['338','4'],
['339','14'],
['341','23'],
['346','31'],
['347','27'],
['348','39'],
['349','20'],
['350','18'],
['351','16'],
['352','20'],
['353','20'],
['354','18'],
['355','29'],
['356','22'],
['360','18'],
['362','0'],
['363','27'],
['367','25'],
['368','15'],
['369','23'],
['370','31'],
['371','43'],
['373','13'],
['374','30'],
['375','43'],
['376','27'],
['377','44'],
['379','35'],
['380','23'],
['382','41'],
['383','31'],
['384','28'],
['385','23'],
['386','19'],
['387','22'],
['388','30'],
['389','31'],
['390','3'],
['391','38'],
['393','7'],
['394','34'],
['396','31'],
['397','31'],
['398','24'],
['399','39'],
['400','31'],
['401','31'],
['402','27'],
['403','12'],
['405','7'],
['406','23'],
['408','24'],
['409','35'],
['410','32'],
['411','31'],
['412','33'],
['415','0'],
['416','25'],
['417','17'],
['418','14'],
['420','9'],
['421','16'],
['422','24'],
['423','49'],
['424','31'],
['426','31'],
['427','25'],
['428','33'],
['429','23'],
['430','31'],
['431','29'],
['433','27'],
['434','14'],
['435','22'],
['436','48'],
['437','30'],
['438','17'],
['439','12'],
['442','18'],
['443','32'],
['444','26'],
['445','14'],
['446','17'],
['447','13'],
['450','20'],
['451','25'],
['452','24'],
['454','14'],
['455','19'],
['456','23'],
['457','15'],
['458','20'],
['459','23'],
['460','21'],
['461','30'],
['462','15'],
['463','26'],
['464','16'],
['465','22'],
['466','20'],
['467','28'],
['468','22'],
['469','27'],
['470','15'],
['476','8'],
['478','7'],
['479','14'],
['481','14'],
['482','8'],
['483','17'],
['484','16'],
['485','10'],
['487','10'],
['488','17'],
['492','12'],
['493','18'],
['496','22'],
['497','14'],
['498','19'],
['500','17'],
['501','13'],
['503','9'],
['504','16'],
['505','19'],
['506','19'],
['507','25'],
['508','27'],
['510','15'],
['512','12'],
['514','8'],
['515','18'],
['517','20'],
['518','14'],
['519','19'],
['520','16'],
['522','15'],
['523','18'],
['525','20'],
['526','21'],
['527','21'],
['528','21'],
['529','26'],
['531','21'],
['533','4'],
['535','16'],
['536','0'],
['537','16'],
['538','16'],
['539','19'],
['540','24'],
['541','17'],
['542','12'],
['543','16'],
['545','16'],
['546','15'],
['547','11'],
['549','8'],
['550','13'],
['551','26'],
['552','35'],
['553','20'],
['554','17'],
['556','0'],
['557','13'],
['558','14'],
['559','13'],
['561','13'],
['563','18'],
['564','19'],
['566','10'],
['567','23'],
['568','8'],
['570','49'],
['571','20'],
['572','36'],
['573','27'],
['574','0'],
['575','24'],
['576','13'],
['577','51'],
['578','0'],
['579','16'],
['582','13'],
['583','16'],
['584','17'],
['585','15'],
['586','19'],
['589','13'],
['590','20'],
['591','18'],
['593','21'],
['594','28'],
['595','35'],
['596','20'],
['597','9'],
['598','5'],
['599','12'],
['600','21'],
['601','16'],
['602','7'],
['604','22'],
['605','44'],
['607','40'],
['608','27'],
['609','16'],
['610','17'],
['612','15'],
['613','14'],
['614','39'],
['615','13'],
['618','7'],
['620','13'],
['621','13'],
['623','27'],
['624','13'],
['625','13'],
['628','16'],
['629','15'],
['630','28'],
['631','10'],
['633','18'],
['634','12'],
['636','14'],
['638','35'],
['639','6'],
['640','14'],
['641','14'],
['642','14'],
['643','28'],
['644','29'],
['645','21'],
['649','15'],
['650','21'],
['651','22'],
['652','20'],
['653','24'],
['654','19'],
['655','17'],
['656','15'],
['657','14'],
['659','11'],
['660','12'],
['663','29'],
['664','14'],
['666','6'],
['667','30'],
['669','7'],
['670','9'],
['671','29'],
['672','19'],
['676','19'],
['679','23'],
['680','16'],
['681','19'],
['682','16'],
['683','35'],
['684','17'],
['685','29'],
['687','35'],
['688','21'],
['689','22'],
['691','20'],
['692','19'],
['693','34'],
['694','26'],
['695','21'],
['697','25'],
['698','20'],
['700','24'],
['701','24'],
['702','25'],
['703','24'],
['704','18'],
['706','20'],
['707','15'],
['708','26'],
['711','9'],
['712','30'],
['713','28'],
['714','49'],
['716','23'],
['717','21'],
['718','33'],
['719','22'],
['720','22'],
['722','19'],
['723','47'],
['725','16'],
['726','12'],
['727','23'],
['728','18'],
['730','36'],
['731','17'],
['732','18'],
['733','31'],
['735','31'],
['737','17'],
['738','15'],
['739','18'],
['741','28'],
['742','28'],
['743','26'],
['744','24'],
['745','0'],
['746','25'],
['747','22'],
['748','24'],
['753','26'],
['755','35'],
['756','26'],
['757','36'],
['758','25'],
['759','23'],
['760','23'],
['761','13'],
['762','18'],
['763','22'],
['764','29'],
['765','20'],
['766','25'],
['767','20'],
['769','18'],
['770','21'],
['773','14'],
['774','21'],
['781','38'],
['783','29'],
['784','24'],
['785','31'],
['786','33'],
['790','30'],
['791','13'],
['792','19'],
['793','20'],
['794','20'],
['796','15'],
['797','23'],
['798','20'],
['799','16'],
['801','36'],
['802','40'],
['803','29'],
['805','33'],
['809','27'],
['810','23'],
['811','28'],
['812','22'],
['813','25'],
['815','4'],
['816','19'],
['817','30'],
['818','34'],
['819','20'],
['820','19'],
['821','20'],
['822','14'],
['823','20'],
['824','23'],
['827','14'],
['829','31'],
['830','14'],
['831','32'],
['832','38'],
['834','17'],
['835','32'],
['841','21'],
['845','40'],
['847','14'],
['848','13'],
['849','15'],
['850','10'],
['851','13'],
['852','14'],
['854','23'],
['855','22'],
['857','18'],
['858','16'],
['859','25'],
['860','15'],
['862','15'],
['863','13'],
['864','25'],
['865','22'],
['867','19'],
['868','19'],
['869','20'],
['870','18'],
['872','19'],
['873','7'],
['875','19'],
['876','19'],
['877','13'],
['878','19'],
['879','25'],
['880','26'],
['882','33'],
['883','21'],
['884','36'],
['888','27'],
['889','14'],
['891','22'],
['893','13'],
['894','14'],
['895','21'],
['898','6'],
['900','21'],
['901','31'],
['902','21'],
['903','15'],
['904','11'],
['913','21'],
['915','13'],
['916','14'],
['917','32'],
['918','32'],
['922','28'],
['923','19'],
['924','18'],
['926','26'],
['930','13'],
['931','10'],
['933','19'],
['934','27'],
['935','6'],
['937','4'],
['938','13'],
['940','27'],
['941','16'],
['945','16'],
['946','14'],
['948','0'],
['949','22'],
['952','17'],
['953','21'],
['954','25'],
['955','21'],
['956','21'],
['957','6'],
['958','8'],
['959','24'],
['960','28'],
['961','45'],
['962','23'],
['963','19'],
['964','13'],
['965','14'],
['966','40'],
['967','9'],
['968','22'],
['969','18'],
['970','24'],
['971','18'],
['973','37'],
['974','52'],
['976','17'],
['977','24'],
['978','14'],
['979','28'],
['980','32'],
['982','23'],
['983','24'],
['985','30'],
['986','13'],
['989','19'],
['990','23'],
['992','21'],
['993','22'],
['995','31'],
['996','27'],
['997','24'],
['999','25'],
['1000','27'],
['1002','10'],
['1003','19'],
['1004','29'],
['1005','6'],
['1006','10'],
]);
var options = {
title: 'Distribution of Bus Speeds on Beer Sheva PT Segments 7-10AM',
hAxis: {title: 'Bus Speeds (kph)',
titleTextStyle: {
italic: false
}},
vAxis: {title: 'PT Segments Count',
titleTextStyle: {
italic: false
}},
legend: { position: 'none' },
histogram: { bucketSize: 5 },
colors:['red','yellow']
};
var chart = new google.visualization.Histogram(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
On another part of my screen I have a map showing the data points separately. I want to filter the map using the IDs of each data point of a selected bar. That is, if the user selects a bar in the histogram, I need to get all the IDs of data points in that bar.
I've been fishing around the web, but mostly found solutions for getting a specific item using chart.getSelection().
I tried to also get the column range, but got unclear results of min=0 and max=999.
Any help is appreciated!
for a Histogram, getSelection() only returns the index of the selected bar,
it does not return the row indexes from the data table,
as it does with other charts.
in this case, we need to use --> getChartLayoutInterface()
the layout interface is an object we can use to find the position of various chart elements.
first, we use getSelection() to determine which bar, and / or series, is selected.
getSelection() will return something similar to --> [{"row":3,"column":1}]
where row is the selected bar, and column is the data table column,
and column - 1 is the series index.
next, we use the layout interface method --> getBoundingBox(id)
where id is the id of the chart element, for a bar it takes the following format.
bar#series#row -- bar#0#3
as such, getBoundingBox('bar#0#3') will give us the dimensions of the fourth bar.
something like --> {"left":381,"top":60.5,"width":89,"height":103}
then we can use layout interface method --> getHAxisValue(position)
this will return the value on the x-axis for the given position
by providing the left and right coordinates of the bar,
we can determine the min and max values of the range
with the range, we can then filter the data table to determine which rows make up the bar.
here is the snippet...
google.visualization.events.addListener(chart, 'select', function () {
var selection = chart.getSelection();
if (selection.length > 0) {
// get position of selected bar
var chartLayout = chart.getChartLayoutInterface();
var barBounds = chartLayout.getBoundingBox('bar#' + (selection[0].column - 1) + '#' + selection[0].row);
// get rows for selected bar
var rows = data.getFilteredRows([{
column: selection[0].column,
minValue: chartLayout.getHAxisValue(barBounds.left),
maxValue: chartLayout.getHAxisValue(barBounds.left + barBounds.width)
}]);
// create data view for selected rows
var view = new google.visualization.DataView(data);
view.setRows(rows);
// get ids of selected bar
var ids = view.getDistinctValues(0);
console.log(JSON.stringify(ids));
}
});
EDIT
the number of items in the above snippet was off.
instead of using minValue & maxValue,
we need to use the test function.
where the value of each row is...
>= min value of the range
< max value of the range
the above was >= & <=
and we may also need to use Math.ceil on the min value,
and Math.floor on the max value.
the following snippet appears to sync with the chart...
google.visualization.events.addListener(chart, 'select', function () {
var selection = chart.getSelection();
if (selection.length > 0) {
// get position of selected bar
var chartLayout = chart.getChartLayoutInterface();
var barBounds = chartLayout.getBoundingBox('bar#' + (selection[0].column - 1) + '#' + selection[0].row);
// get rows for selected bar
var rows = data.getFilteredRows([{
column: selection[0].column,
test: function (value) {
return ((value >= Math.ceil(chartLayout.getHAxisValue(barBounds.left))) &&
(value < Math.floor(chartLayout.getHAxisValue(barBounds.left + barBounds.width))));
}
}]);
// create data view for selected rows
var view = new google.visualization.DataView(data);
view.setRows(rows);
// get ids of selected bar
var ids = view.getDistinctValues(0);
console.log(ids.length);
}
});
see following working example...
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var data = google.visualization.arrayToDataTable([
['pt_network_seg_id','speed'],
['9',32],
['10',22],
['13',23],
['14',18],
['15',34],
['17',22],
['18',30],
['19',20],
['20',33],
['21',26],
['22',33],
['23',21],
['24',19],
['25',41],
['26',23],
['27',16],
['28',39],
['29',15],
['30',25],
['31',26],
['32',29],
['40',31],
['41',9],
['42',27],
['44',25],
['45',10],
['46',25],
['47',24],
['48',20],
['49',20],
['50',25],
['51',19],
['52',34],
['53',19],
['54',27],
['56',27],
['58',10],
['59',26],
['60',54],
['62',54],
['64',17],
['68',27],
['74',43],
['75',10],
['76',32],
['77',47],
['78',31],
['80',24],
['84',20],
['85',35],
['86',33],
['88',25],
['89',26],
['91',35],
['93',25],
['94',18],
['95',24],
['98',34],
['100',23],
['101',36],
['102',18],
['103',21],
['105',16],
['106',26],
['107',29],
['109',8],
['111',16],
['112',19],
['113',33],
['114',20],
['115',18],
['116',21],
['117',14],
['126',22],
['127',26],
['130',24],
['131',10],
['133',29],
['134',26],
['135',22],
['136',16],
['137',14],
['139',23],
['140',17],
['141',18],
['142',19],
['143',15],
['144',25],
['145',19],
['146',23],
['147',18],
['148',50],
['150',47],
['151',13],
['152',37],
['153',24],
['156',22],
['157',21],
['158',40],
['159',34],
['160',12],
['161',22],
['165',18],
['168',24],
['169',23],
['171',20],
['172',22],
['173',25],
['175',30],
['176',24],
['177',15],
['178',25],
['179',0],
['181',28],
['182',21],
['183',17],
['184',22],
['185',40],
['187',24],
['188',22],
['189',21],
['190',8],
['191',18],
['192',23],
['193',33],
['194',30],
['195',32],
['196',33],
['197',31],
['198',34],
['199',34],
['200',31],
['201',31],
['203',20],
['204',34],
['205',32],
['206',19],
['210',24],
['211',32],
['212',29],
['213',19],
['214',20],
['215',19],
['216',21],
['217',24],
['218',27],
['219',22],
['220',20],
['221',17],
['222',18],
['223',34],
['224',35],
['229',19],
['230',22],
['231',21],
['232',23],
['234',27],
['235',22],
['236',12],
['237',17],
['238',16],
['239',19],
['240',33],
['241',13],
['242',24],
['243',25],
['244',19],
['245',19],
['246',17],
['247',23],
['248',22],
['250',12],
['252',10],
['253',13],
['254',17],
['256',23],
['257',16],
['258',20],
['259',24],
['260',36],
['263',15],
['264',19],
['266',24],
['267',14],
['270',17],
['271',23],
['272',14],
['274',21],
['277',26],
['279',18],
['280',27],
['281',26],
['282',19],
['283',23],
['284',19],
['288',49],
['289',37],
['290',31],
['291',50],
['296',17],
['297',29],
['299',17],
['301',32],
['302',34],
['304',17],
['305',32],
['306',23],
['307',34],
['309',27],
['314',20],
['316',39],
['317',48],
['318',34],
['319',46],
['326',16],
['329',0],
['330',17],
['334',15],
['338',4],
['339',14],
['341',23],
['346',31],
['347',27],
['348',39],
['349',20],
['350',18],
['351',16],
['352',20],
['353',20],
['354',18],
['355',29],
['356',22],
['360',18],
['362',0],
['363',27],
['367',25],
['368',15],
['369',23],
['370',31],
['371',43],
['373',13],
['374',30],
['375',43],
['376',27],
['377',44],
['379',35],
['380',23],
['382',41],
['383',31],
['384',28],
['385',23],
['386',19],
['387',22],
['388',30],
['389',31],
['390',3],
['391',38],
['393',7],
['394',34],
['396',31],
['397',31],
['398',24],
['399',39],
['400',31],
['401',31],
['402',27],
['403',12],
['405',7],
['406',23],
['408',24],
['409',35],
['410',32],
['411',31],
['412',33],
['415',0],
['416',25],
['417',17],
['418',14],
['420',9],
['421',16],
['422',24],
['423',49],
['424',31],
['426',31],
['427',25],
['428',33],
['429',23],
['430',31],
['431',29],
['433',27],
['434',14],
['435',22],
['436',48],
['437',30],
['438',17],
['439',12],
['442',18],
['443',32],
['444',26],
['445',14],
['446',17],
['447',13],
['450',20],
['451',25],
['452',24],
['454',14],
['455',19],
['456',23],
['457',15],
['458',20],
['459',23],
['460',21],
['461',30],
['462',15],
['463',26],
['464',16],
['465',22],
['466',20],
['467',28],
['468',22],
['469',27],
['470',15],
['476',8],
['478',7],
['479',14],
['481',14],
['482',8],
['483',17],
['484',16],
['485',10],
['487',10],
['488',17],
['492',12],
['493',18],
['496',22],
['497',14],
['498',19],
['500',17],
['501',13],
['503',9],
['504',16],
['505',19],
['506',19],
['507',25],
['508',27],
['510',15],
['512',12],
['514',8],
['515',18],
['517',20],
['518',14],
['519',19],
['520',16],
['522',15],
['523',18],
['525',20],
['526',21],
['527',21],
['528',21],
['529',26],
['531',21],
['533',4],
['535',16],
['536',0],
['537',16],
['538',16],
['539',19],
['540',24],
['541',17],
['542',12],
['543',16],
['545',16],
['546',15],
['547',11],
['549',8],
['550',13],
['551',26],
['552',35],
['553',20],
['554',17],
['556',0],
['557',13],
['558',14],
['559',13],
['561',13],
['563',18],
['564',19],
['566',10],
['567',23],
['568',8],
['570',49],
['571',20],
['572',36],
['573',27],
['574',0],
['575',24],
['576',13],
['577',51],
['578',0],
['579',16],
['582',13],
['583',16],
['584',17],
['585',15],
['586',19],
['589',13],
['590',20],
['591',18],
['593',21],
['594',28],
['595',35],
['596',20],
['597',9],
['598',5],
['599',12],
['600',21],
['601',16],
['602',7],
['604',22],
['605',44],
['607',40],
['608',27],
['609',16],
['610',17],
['612',15],
['613',14],
['614',39],
['615',13],
['618',7],
['620',13],
['621',13],
['623',27],
['624',13],
['625',13],
['628',16],
['629',15],
['630',28],
['631',10],
['633',18],
['634',12],
['636',14],
['638',35],
['639',6],
['640',14],
['641',14],
['642',14],
['643',28],
['644',29],
['645',21],
['649',15],
['650',21],
['651',22],
['652',20],
['653',24],
['654',19],
['655',17],
['656',15],
['657',14],
['659',11],
['660',12],
['663',29],
['664',14],
['666',6],
['667',30],
['669',7],
['670',9],
['671',29],
['672',19],
['676',19],
['679',23],
['680',16],
['681',19],
['682',16],
['683',35],
['684',17],
['685',29],
['687',35],
['688',21],
['689',22],
['691',20],
['692',19],
['693',34],
['694',26],
['695',21],
['697',25],
['698',20],
['700',24],
['701',24],
['702',25],
['703',24],
['704',18],
['706',20],
['707',15],
['708',26],
['711',9],
['712',30],
['713',28],
['714',49],
['716',23],
['717',21],
['718',33],
['719',22],
['720',22],
['722',19],
['723',47],
['725',16],
['726',12],
['727',23],
['728',18],
['730',36],
['731',17],
['732',18],
['733',31],
['735',31],
['737',17],
['738',15],
['739',18],
['741',28],
['742',28],
['743',26],
['744',24],
['745',0],
['746',25],
['747',22],
['748',24],
['753',26],
['755',35],
['756',26],
['757',36],
['758',25],
['759',23],
['760',23],
['761',13],
['762',18],
['763',22],
['764',29],
['765',20],
['766',25],
['767',20],
['769',18],
['770',21],
['773',14],
['774',21],
['781',38],
['783',29],
['784',24],
['785',31],
['786',33],
['790',30],
['791',13],
['792',19],
['793',20],
['794',20],
['796',15],
['797',23],
['798',20],
['799',16],
['801',36],
['802',40],
['803',29],
['805',33],
['809',27],
['810',23],
['811',28],
['812',22],
['813',25],
['815',4],
['816',19],
['817',30],
['818',34],
['819',20],
['820',19],
['821',20],
['822',14],
['823',20],
['824',23],
['827',14],
['829',31],
['830',14],
['831',32],
['832',38],
['834',17],
['835',32],
['841',21],
['845',40],
['847',14],
['848',13],
['849',15],
['850',10],
['851',13],
['852',14],
['854',23],
['855',22],
['857',18],
['858',16],
['859',25],
['860',15],
['862',15],
['863',13],
['864',25],
['865',22],
['867',19],
['868',19],
['869',20],
['870',18],
['872',19],
['873',7],
['875',19],
['876',19],
['877',13],
['878',19],
['879',25],
['880',26],
['882',33],
['883',21],
['884',36],
['888',27],
['889',14],
['891',22],
['893',13],
['894',14],
['895',21],
['898',6],
['900',21],
['901',31],
['902',21],
['903',15],
['904',11],
['913',21],
['915',13],
['916',14],
['917',32],
['918',32],
['922',28],
['923',19],
['924',18],
['926',26],
['930',13],
['931',10],
['933',19],
['934',27],
['935',6],
['937',4],
['938',13],
['940',27],
['941',16],
['945',16],
['946',14],
['948',0],
['949',22],
['952',17],
['953',21],
['954',25],
['955',21],
['956',21],
['957',6],
['958',8],
['959',24],
['960',28],
['961',45],
['962',23],
['963',19],
['964',13],
['965',14],
['966',40],
['967',9],
['968',22],
['969',18],
['970',24],
['971',18],
['973',37],
['974',52],
['976',17],
['977',24],
['978',14],
['979',28],
['980',32],
['982',23],
['983',24],
['985',30],
['986',13],
['989',19],
['990',23],
['992',21],
['993',22],
['995',31],
['996',27],
['997',24],
['999',25],
['1000',27],
['1002',10],
['1003',19],
['1004',29],
['1005',6],
['1006',10]
]);
var options = {
title: 'Distribution of Bus Speeds on Beer Sheva PT Segments 7-10AM',
hAxis: {
title: 'Bus Speeds (kph)',
titleTextStyle: {
italic: false
}
},
vAxis: {
title: 'PT Segments Count',
titleTextStyle: {
italic: false
}
},
legend: {
position: 'none'
},
histogram: {
bucketSize: 5
},
colors:['red', 'yellow']
};
var chart = new google.visualization.Histogram(document.getElementById('chart_div'));
google.visualization.events.addListener(chart, 'select', function () {
var selection = chart.getSelection();
if (selection.length > 0) {
// get position of selected bar
var chartLayout = chart.getChartLayoutInterface();
var barBounds = chartLayout.getBoundingBox('bar#' + (selection[0].column - 1) + '#' + selection[0].row);
// get rows for selected bar
var rows = data.getFilteredRows([{
column: selection[0].column,
test: function (value) {
return ((value >= Math.ceil(chartLayout.getHAxisValue(barBounds.left))) && (value < Math.floor(chartLayout.getHAxisValue(barBounds.left + barBounds.width))));
}
}]);
// create data view for selected rows
var view = new google.visualization.DataView(data);
view.setRows(rows);
// get ids of selected bar
var ids = view.getDistinctValues(0);
console.log(ids.length);
}
});
chart.draw(data, options);
});<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>