JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://www.gstatic.com/charts/loader.js"></script>
<!-- Some text -->
<div class="text">
Select a region below to know the annual rainfall in that region.
</div>
<!-- Create dropdown list -->
<div>
<select class="region">
<option selected="selected" disabled>Select a region</option>
<option>Andaman & Nicobar Islands</option>
<option>Arunachal Pradesh</option>
<option>Assam, Meghalaya</option>
<option>Bihar</option>
<option>Chattisgarh</option>
<option>Coastal Karnataka</option>
<option>Coastal Andhra Pradesh</option>
<option>East Rajasthan</option>
<option>East Madhya Pradesh</option>
<option>East Uttar Pradesh</option>
<option>Gangetic West Bengal</option>
<option>Gujarat Region, Dadra & Nagar Haveli</option>
<option>Haryana, Delhi, Chandigarh</option>
<option>Himachal Pradesh</option>
<option>Jammu, Kashmir</option>
<option>Jharkhand</option>
<option>Kerala</option>
<option>Kokan, Goa</option>
<option>Lakshadweep</option>
<option>Madhya Maharashtra</option>
<option>Maratwada</option>
<option>Nagaland, Manipur, Mizoram, Tripura</option>
<option>North Interior Karnataka</option>
<option>Orissa</option>
<option>Punjab</option>
<option>Rayalseema</option>
<option>Saurashtra, Kutch, Diu</option>
<option>South Interior Karnataka</option>
<option>Sub-Himalayan, West Bengal, Sikkim</option>
<option>Tamil Nadu, Pondicherry</option>
<option>Telengana</option>
<option>Uttaranchal</option>
<option>Vidarbha</option>
<option>West Madhya Pradesh</option>
<option>West Rajasthan</option>
<option>West Uttar Pradesh</option>
</select>
</div>
<!-- Create button to request data -->
<div>
<button type="button">Get data!</button>
</div>
<!-- Div in which the chart will be drawn -->
<div id="chart">
</div>
CSS
.text {
margin-bottom: 10px;
}
.region {
float: left;
}
button {
float: left;
margin-left: 10px;
}
#chart {
margin-top: 10px;
margin-bottom: 10px;
width: 100%;
}
JavaScript
// Get region text
var region = jQuery(".region").find(":selected").text();
//Create button variable
var button = jQuery("button");
//Detect change in region selection and store the selected region in the variable
jQuery(".region").change(function() {
region = jQuery(".region").find(":selected").text();
});
//When the data is requested (button is pressed)
button.click(function() {
google.charts.load('current', {
'packages': ['corechart']
});
google.charts.setOnLoadCallback(drawChart);
//Drawing the chart
function drawChart() {
var query;
//Tests to check which region is selected
if (region == "Andaman & Nicobar Islands") {
query = new google.visualization.Query("https://docs.google.com/spreadsheets/d/1wLbWMwwu_bXcpxm8TlkNtkR4gbeqz_o8CuRzdDQMUaM/gviz/tq?gid=799372846&range=A:B");
} else if (region == "Arunachal Pradesh") {
query = new google.visualization.Query("https://docs.google.com/spreadsheets/d/1wLbWMwwu_bXcpxm8TlkNtkR4gbeqz_o8CuRzdDQMUaM/gviz/tq?gid=799372846&range=A:C");
} else if (region == "Assam, Meghalaya") {
query = new google.visualization.Query("https://docs.google.com/spreadsheets/d/1wLbWMwwu_bXcpxm8TlkNtkR4gbeqz_o8CuRzdDQMUaM/gviz/tq?gid=799372846&range=A:D");
} else if (region == "Bihar") {
query = new google.visualization.Query("https://docs.google.com/spreadsheets/d/1wLbWMwwu_bXcpxm8TlkNtkR4gbeqz_o8CuRzdDQMUaM/gviz/tq?gid=799372846&range=A:E");
} else if (region == "Chattisgarh") {
query = new google.visualization.Query("https://docs.google.com/spreadsheets/d/1wLbWMwwu_bXcpxm8TlkNtkR4gbeqz_o8CuRzdDQMUaM/gviz/tq?gid=799372846&range=A:F");
} else if (region == "Coastal Karnataka") {
query = new google.visualization.Query("https://docs.google.com/spreadsheets/d/1wLbWMwwu_bXcpxm8TlkNtkR4gbeqz_o8CuRzdDQMUaM/gviz/tq?gid=799372846&range=A:G");
} else if (region ==...