获取 Google 个图表直方图柱状图或柱状图范围的数据项
Get the data items of a Google Charts histogram bar or range of the bar
我正在尝试使用 Google 图表创建交互式直方图。
可以找到我生成直方图的代码 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>
在屏幕的另一部分，我有一张单独显示数据点的地图。
我想使用所选栏的每个数据点的 ID 来过滤地图。也就是说，如果用户在直方图中选择了一个条，我需要获取该条中所有数据点的ID。
我一直在网上四处寻找，但大多是找到使用 chart.getSelection() 获取特定项目的解决方案。
我也尝试获取列范围，但 min=0 和 max=999 的结果不明确。
感谢任何帮助！
对于直方图，getSelection() 仅 return 所选柱的索引，
它不 return 来自数据 table、
的行索引
就像其他图表一样。
在这种情况下，我们需要使用 --> getChartLayoutInterface()
布局界面是我们可以用来查找各种图表元素位置的对象。
首先，我们使用 getSelection() 来确定选择了哪个柱和/或系列。
getSelection() 将 return 类似于 --> [{"row":3,"column":1}]
其中 row 是选定的柱，column 是数据 table 列，
column - 1 是系列索引。
接下来我们使用布局界面的方法-->getBoundingBox(id)
其中 id 是图表元素的 ID，对于柱形图，它采用以下格式。
bar#series#row -- bar#0#3
因此，getBoundingBox('bar#0#3') 将为我们提供第四个柱的尺寸。
类似 --> {"left":381,"top":60.5,"width":89,"height":103}
那我们就可以使用布局界面的方法了 --> getHAxisValue(position)
这将 return 给定位置的 x 轴上的值
通过提供条的左右坐标，
我们可以确定范围
的最小值和最大值
有了范围，我们就可以过滤数据 table 以确定哪些行组成了条形图。
这是片段...
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));
}
});
编辑
上面代码段中的项目数不对。
而不是使用 minValue & maxValue,
我们需要使用 test 函数。
每行的值是...
>= min value of the range
< max value of the range
以上是>= & <=
我们可能还需要在最小值上使用Math.ceil，
和 Math.floor 的最大值。
以下代码段似乎与图表同步...
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);
}
});
请参阅以下工作示例...
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>
我正在尝试使用 Google 图表创建交互式直方图。 可以找到我生成直方图的代码 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>
在屏幕的另一部分，我有一张单独显示数据点的地图。 我想使用所选栏的每个数据点的 ID 来过滤地图。也就是说，如果用户在直方图中选择了一个条，我需要获取该条中所有数据点的ID。
我一直在网上四处寻找，但大多是找到使用 chart.getSelection() 获取特定项目的解决方案。
我也尝试获取列范围，但 min=0 和 max=999 的结果不明确。
感谢任何帮助！
对于直方图，getSelection() 仅 return 所选柱的索引，
它不 return 来自数据 table、
的行索引
就像其他图表一样。
在这种情况下，我们需要使用 --> getChartLayoutInterface()
布局界面是我们可以用来查找各种图表元素位置的对象。
首先，我们使用 getSelection() 来确定选择了哪个柱和/或系列。
getSelection() 将 return 类似于 --> [{"row":3,"column":1}]
其中 row 是选定的柱，column 是数据 table 列，
column - 1 是系列索引。
接下来我们使用布局界面的方法-->getBoundingBox(id)
其中 id 是图表元素的 ID，对于柱形图，它采用以下格式。
bar#series#row -- bar#0#3
因此，getBoundingBox('bar#0#3') 将为我们提供第四个柱的尺寸。
类似 --> {"left":381,"top":60.5,"width":89,"height":103}
那我们就可以使用布局界面的方法了 --> getHAxisValue(position)
这将 return 给定位置的 x 轴上的值
通过提供条的左右坐标，
我们可以确定范围
有了范围，我们就可以过滤数据 table 以确定哪些行组成了条形图。
这是片段...
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));
}
});
编辑
上面代码段中的项目数不对。
而不是使用 minValue & maxValue,
我们需要使用 test 函数。
每行的值是...
>= min value of the range
< max value of the range
以上是>= & <=
我们可能还需要在最小值上使用Math.ceil，
和 Math.floor 的最大值。
以下代码段似乎与图表同步...
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);
}
});
请参阅以下工作示例...
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>