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
rowis the selected bar, andcolumnis the data table column,and
column - 1is the series index.next, we use the layout interface method -->
getBoundingBox(id)where
idis the id of the chart element, for a bar it takes the following format.bar#series#row--bar#0#3as 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...
EDIT
the number of items in the above snippet was off.
instead of using
minValue&maxValue,we need to use the
testfunction.where the value of each row is...
the above was
>=&<=and we may also need to use
Math.ceilon the min value,and
Math.flooron the max value.the following snippet appears to sync with the chart...
see following working example...