i have a lot of building data that I want my users to filter using a search bar. is there a way to create one?
<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([
['Building', 'EUI'],
['Telecommunications Building', 705.6],
['Kolthoff Hall', 431.9],
['SE Steam Plant', 418.1],
['Center For Magnetic Resonance Research', 409.1],
['Physics and Nanotechnology', 371.9],
['Lions Research/McGuire Translational Research Facility', 357.5],
['Cancer & Cardiovascular Research Building', 353.9],
['Jackson Hall', 350.6],
['Medical Biosciences Building', 350.0],
['Aquatic Center', 340.6],
['Dwan Variety Club Cardio Research Center', 338.7],
['Smith Hall', 322.3],
['Phillips-Wangensteen Building', 319.6],
['Molecular and Cellular Biology', 299.6],
['Thompson Center for Environmental Management', 293.2],
['Amundson Hall', 290.5],
['Walter Library', 280.5],
['Bierman Field Athletic Building', 249.2],
['Shepherd Laboratories', 249.0],
['Transportation & Safety Building', 244.8],
['Moos Health Sciences Tower', 235.4],
['Weaver-Densford Hall', 235.1],
['Diehl Hall', 228.5],
['Hasselmo Hall', 226.8],
['Tate Laboratory Of Physics', 224.5],
['Keller Hall', 224.1],
['Microbiology Research Facility', 224.0],
['Clinics and Surgery Center', 213.2],
['Bierman Field Clubhouse', 187.8],
['Mechanical Engineering', 187.3],
['Mayo Building & Additions', 177.3],
['Boynton Health Service', 172.2],
['Variety Club Research Center', 161.2],
['717 Delaware St. SE (MN Dept. of Health)', 160.1],
['Cooke Hall', 159.6],
['Office of Information Technology Bldg', 158.4],
['MAST Laboratory', 158.3],
['Recreation Center', 148.7],
['Student Recreational Sports Field', 143.7],
['Elliott Hall', 141.9],
['Centennial Hall', 137.1],
['Childrens Rehabilitation Center', 133.9],
['Siebert Stadium', 128.7],
['Pattee Hall', 127.7],
['Comstock Hall', 122.6],
['Sanford Hall', 120.2],
['Territorial Hall', 117.2],
['Frontier Hall', 116.6],
['Ridder Arena & Tennis Facility', 114.2],
['17th Avenue Residence Hall', 110.3],
['Akerman Hall', 106.7],
['Coffman Memorial Union', 104.7],
['Child Development', 104.4],
['Rapson Hall', 102.9],
['Yudof Hall', 100.6],
['Civil Engineering Building', 99.9],
['Peik Hall', 99.6],
['Murphy Hall', 98.9],
['Mariucci Arena', 97.7],
['Campus Substation', 90.8],
['Northrop Memorial Auditorium', 90.5],
['Landcare & Facilities Operations', 89.9],
['Appleby Hall', 89.6],
['Vincent Hall', 89.1],
['TCF Bank Stadium', 88.3],
['Ford Hall', 87.2],
['Morrill Hall', 85.6],
['Jones Hall', 84.7],
['Peik Gymnasium', 83.9],
['Gibson/Nagurski Football Practice Facility', 83.9],
['Scott Hall', 82.7],
['1901 University Avenue SE', 79.6],
['Weisman Art Museum', 78.3],
['Williamson Hall', 77.1],
['Johnston Hall', 75.5],
['Education Sciences', 71.9],
['Roy Wilkins Hall', 70.4],
['Boathouse', 69.8],
['Fraser Hall', 68.4],
['Recreation Center Expansion', 66.8],
['Armory', 66.0],
['Shevlin Hall', 63.6],
['MN Geological Survey', 62.8],
['Bruininks Hall', 62.3],
['Folwell Hall', 60.8],
['Lind Hall', 60.4],
['University Office Plaza', 60.3],
['Williams Arena and Sports Pavilion', 59.6],
['Burton Hall', 59.3],
['McNamara Alumni Center', 59.1],
['10 Church Street Building', 57.0],
['Nicholson Hall', 55.0],
['Nolte Center', 50.5],
['Donhowe Building', 47.5],
['Pillsbury Hall', 44.6],
['Field House', 43.3],
['Wulling Hall', 35.0],
['1425 University Avenue SE', 29.3],
['Pioneer Hall', 28.8],
['Keeler Apartments', 17.7],
['University Avenue Parking Ramp', 11.3],
['Church Street Garage', 11.1],
['Washington Avenue Pedestrian Bridge', 9.1],
['Fourth Street Parking Ramp', 6.6],
['East River Parkway Garage', 5.9],
['Eddy Hall', 4.6],
['Oak Street Parking Ramp', 1.7],
['Washington Avenue Parking Ramp', 1.4]
]);
var options = {
title: 'Efficiency of East Bank Buildings, in Energy-Use Index (EUI)',
legend: { position: 'none' },
colors: ['gold'],
fontName: 'PT Sans',
fontSize: 18,
hAxis: {
title: 'EUI (kBTU/ft squared)',
textStyle: {
color: 'black',
fontSize: 14,
fontName: 'PT Sans',
bold: false,
italic: false
},
titleTextStyle: {
color: '#black',
fontSize: 18,
fontName: 'PT Sans',
bold: false,
italic: false
}
},
vAxis: {
title: 'Count of buildings',
textStyle: {
color: 'black',
fontSize: 14,
fontName: 'PT Sans',
bold: false
},
titleTextStyle: {
color: 'black',
fontSize: 20,
fontName: 'PT sans',
bold: false,
italic: false
}
},
};
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>