Is there a way to create a search bar for this API?
11 views
Skip to first unread message
Yves De Jesus
Nov 27, 2019, 1:17:09 AM11/27/19
to Google Chart API
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?
here is my data viz:
<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>
Daniel LaLiberte
Nov 27, 2019, 11:39:42 AM11/27/19
to google-c...@googlegroups.com
Hi Yves,
Have you found the StringFilter at https://developers.google.com/chart/interactive/docs/gallery/controls#stringfilter_1
Sounds like what you want.
--
You received this message because you are subscribed to the Google Groups "Google Chart API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-chart-a...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-chart-api/cf16a56d-1e48-478e-aeaa-485f498edfad%40googlegroups.com.
dlaliberte@Google.com Cambridge MA
Reply all
Reply to author
Forward
0 new messages