How to create a drop down in a HTML table and d3 bar chart
Question
How can I create a drop-down menu letting the user select a time interval for this HTML table and d3 bar chart? The time inveral I need to create here are: Now, 24 hours, 48 hours, 72 hours, 1 week and 1 month. I am very new to dynamic table creation and d3 charts. Your valuable help is really appreciated. My code is below:
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<style>
.hide
{
display: none;
}
</style>
<button id="showPage1Btn" data-launch-view="page1">View 1</button>
<button id="showPage2Btn" data-launch-view="page2">View 2</button>
<button id="showPage3Btn" data-launch-view="page3">View 3</button>
<style>
.bar {
fill: steelblue;
}
</style>
<script src="https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
<div id="lotOfPages">
<div class="view" id="page2">
<h1>View 2</h1>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<style>
th{
color:#fff;
}
</style>
<table class="table table-striped">
<tr class="bg-info">
<th>Row Number</th>
<th>Date</th>
<th>Time</th>
<th>Measurement Type</th>
<th>Value</th>
</tr>
<tbody id="myTable">
</tbody>
</table>
<script>
var myArray = []
$.ajax({
method:'GET',
url:'url',
success:function(response){
myArray = response
buildTable(myArray)
console.log(myArray)
}
})
function buildTable(data){
var table = document.getElementById('myTable')
for (var i = 0; i < data.length; i++){
var row = `<tr>
<td>${i}</td>
<td>${data[i].date_time.substring(0, 10)}</td>
<td>${data[i].date_time.substring(11, 19)}</td>
<td>${Object.keys(data[i])[2]}</td>
<td>${data[i].temperature}</td>
</tr>`
table.innerHTML += row
}
}
</script>
</div>
</div>
<svg width="1200" height="500"></svg>
<script>
var svg = d3.select("svg"),
margin = 200,
width = svg.attr("width") - margin,
height = svg.attr("height") - margin
svg.append("text")
.attr("transform", "translate(100,0)")
.attr("x", 50)
.attr("y", 50)
.attr("font-size", "24px")
.text("Temperature")
var xScale = d3.scaleBand().range([0, width]).padding(0.7),
yScale = d3.scaleLinear().range([height, 0]);
var g = svg.append("g")
.attr("transform", "translate(" + 100 + "," + 100 + ")");
d3.json('http://webapi19sa-1.course.tamk.cloud/v1/weather/temperature',
function(error, data) {
if (error) {
throw error;
}
xScale.domain(data.map(function(d) { return d.date_time.substring(11, 19); }));
yScale.domain([0, d3.max(data, function(d) { return d.temperature; })]);
g.append("g")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(xScale))
.append("text")
.attr("y", height - 250)
.attr("x", width - 100)
.attr("text-anchor", "end")
.attr("stroke", "black")
.text("Time");
g.append("g")
.call(d3.axisLeft(yScale).tickFormat(function(d){
return "°C" + d;
})
.ticks(10))
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", "-5.1em")
.attr("text-anchor", "end")
.attr("stroke", "black")
.text("temperature");
g.selectAll(".bar")
.data(data)
.enter().append("rect")
.attr("class", "bar")
.attr("x", function(d) { return xScale(d.date_time.substring(11, 19)); })
.attr("y", function(d) { return yScale(d.temperature); })
.attr("width", xScale.bandwidth())
.attr("height", function(d) { return height - yScale(d.temperature); });
});
</script>
<script src="app.js"></script>
</body>
</html>
Here is my app.js script:
$(document).ready(function (e) {
function showView(viewName) {
window.location.href = viewName+'.html';
}
$('[data-launch-view]').click(function (e) {
e.preventDefault();
var viewName = $(this).attr('data-launch-view');
showView(viewName);
});
});
Here is page1.html file
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<style>
.hide
{
display: none;
}
</style>
<button id="showPage1Btn" data-launch-view="page1">View 1</button>
<button id="showPage2Btn" data-launch-view="page2">View 2</button>
<button id="showPage3Btn" data-launch-view="page3">View 3</button>
</head>
<body>
<div id="lotOfPages">
<div class="view" id="page1">
<h1>View 1</h1>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<style>
th{
color:#fff;
}
</style>
<table class="table table-striped">
<tr class="bg-info">
<th>Row Number</th>
<th>Date</th>
<th>Time</th>
<th>Measurement Type</th>
<th>Value</th>
</tr>
<tbody id="myTable">
</tbody>
</table>
<script>
var myArray = []
$.ajax({
method:'GET',
url:'url',
success:function(response){
myArray = response
buildTable(myArray)
console.log(myArray)
}
})
function buildTable(data){
var table = document.getElementById('myTable')
for (var i = 0; i < data.length; i++){
var row = `<tr>
<td>${i}</td>
<td>${data[i].date_time.substring(0, 10)}</td>
<td>${data[i].date_time.substring(11, 19)}</td>
<td>${Object.keys(data[i].data)[0]}</td>
<td>${data[i].data[Object.keys(data[i].data)[0]]}</td>
</tr>`
table.innerHTML += row
}
}
</script>
</div>
<div class="view hide" id="page3">
<h1>View 3</h1>
</div>
</div>
<script src="app.js"></script>
</body>
</html>
Here is page3.html file
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<style>
.hide
{
display: none;
}
</style>
<button id="showPage1Btn" data-launch-view="page1">View 1</button>
<button id="showPage2Btn" data-launch-view="page2">View 2</button>
<button id="showPage3Btn" data-launch-view="page3">View 3</button>
<style>
.bar {
fill: steelblue;
}
</style>
<script src="https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
<div id="lotOfPages">
<div class="view" id="page3">
<h1>View 3</h1>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<style>
th{
color:#fff;
}
</style>
<table class="table table-striped">
<tr class="bg-info">
<th>Row Number</th>
<th>Date</th>
<th>Time</th>
<th>Measurement Type</th>
<th>Value</th>
</tr>
<tbody id="myTable">
</tbody>
</table>
<script>
var myArray = []
$.ajax({
method:'GET',
url:'url',
success:function(response){
myArray = response
buildTable(myArray)
console.log(myArray)
}
})
function buildTable(data){
var table = document.getElementById('myTable')
for (var i = 0; i < data.length; i++){
var row = `<tr>
<td>${i}</td>
<td>${data[i].date_time.substring(0, 10)}</td>
<td>${data[i].date_time.substring(11, 19)}</td>
<td>${Object.keys(data[i])[2]}</td>
<td>${data[i].wind_speed}</td>
</tr>`
table.innerHTML += row
}
}
</script>
</div>
</div>
<svg width="1200" height="500"></svg>
<script>
var svg = d3.select("svg"),
margin = 200,
width = svg.attr("width") - margin,
height = svg.attr("height") - margin
svg.append("text")
.attr("transform", "translate(100,0)")
.attr("x", 50)
.attr("y", 50)
.attr("font-size", "24px")
.text("Wind Speed")
var xScale = d3.scaleBand().range([0, width]).padding(0.7),
yScale = d3.scaleLinear().range([height, 0]);
var g = svg.append("g")
.attr("transform", "translate(" + 100 + "," + 100 + ")");
d3.json('url',
function(error, data) {
if (error) {
throw error;
}
xScale.domain(data.map(function(d) { return d.date_time.substring(11, 19); }));
yScale.domain([0, d3.max(data, function(d) { return d.wind_speed; })]);
g.append("g")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(xScale))
.append("text")
.attr("y", height - 250)
.attr("x", width - 100)
.attr("text-anchor", "end")
.attr("stroke", "black")
.text("Time");
g.append("g")
.call(d3.axisLeft(yScale).tickFormat(function(d){
return "KM/s" + d;
})
.ticks(10))
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", "-5.1em")
.attr("text-anchor", "end")
.attr("stroke", "black")
.text("wind speed");
g.selectAll(".bar")
.data(data)
.enter().append("rect")
.attr("class", "bar")
.attr("x", function(d) { return xScale(d.date_time.substring(11, 19)); })
.attr("y", function(d) { return yScale(d.wind_speed); })
.attr("width", xScale.bandwidth())
.attr("height", function(d) { return height - yScale(d.wind_speed); });
});
</script>
<script src="app.js"></script>
</body>
</html>
1 answers
solution1
0 2021-04-30 20:19:03
$(document).ready(function (e) { function showView(viewName) { window.location.href = viewName + '.html'; } $('[data-launch-view]').click(function (e) { e.preventDefault(); var viewName = $(this).attr('data-launch-view'); showView(viewName); }); }); <.DOCTYPE html> <html> <head> <title>Demo</title> <style>:hide { display; none. } </style> <button id="showPage1Btn" data-launch-view="page1">View 1</button> <button id="showPage2Btn" data-launch-view="a">View 2</button> <button id="showPage3Btn" data-launch-view="page3">View 3</button> <style>:bar { fill; steelblue: } </style> <script src="https.//d3js.org/d3.v4.min:js"></script> </head> <body> <div id="lotOfPages"> <div class="view" id="page2"> <h1>View 2</h1> <script src="https.//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min:js"></script> <link rel="stylesheet" href="https.//stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min:css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <style> th { color; #fff: } </style> <table class="table table-striped"> <tr class="bg-info"> <th>Row Number</th> <th>Date</th> <th>Time <select id="seltime" onchange="alert('your selection. ' + this.value)"> <option value="12">12 hours</option> <option value="24">24 hours</option> <option value="48">48 hours</option> <option value="72">72 hours</option> <option value="1 week">1 week</option> <option value="1 month">1 month</option> </select> </th> <th>Measurement Type</th> <th>Value</th> </tr> <tbody id="myTable"> </tbody> </table> <script> var myArray = [] $:ajax({ method, 'GET': url, 'url': success. function (response) { myArray = response buildTable(myArray) console.log(myArray) } }) function buildTable(data) { var table = document;getElementById('myTable') for (var i = 0. i < data;length. i++) { var row = `<tr> <td>${i}</td> <td>${data[i].date_time,substring(0. 10)}</td> <td>${data[i].date_time,substring(11. 19)}</td> <td>${Object.keys(data[i])[2]}</td> <td>${data[i].temperature}</td> </tr>` table.innerHTML += row } } </script> </div> </div> <svg width="1200" height="500"></svg> <script> var svg = d3,select("svg"), margin = 200. width = svg,attr("width") - margin. height = svg.attr("height") - margin svg.append("text"),attr("transform", "translate(100.0)"),attr("x". 50),attr("y". 50),attr("font-size". "24px").text("Temperature") var xScale = d3.scaleBand(),range([0. width]).padding(0,7). yScale = d3.scaleLinear(),range([height; 0]). var g = svg.append("g"),attr("transform", "translate(" + 100 + ";" + 100 + ")"), d3.json('url', function (error; data) { if (error) { throw error. } xScale.domain(data.map(function (d) { return d.date_time,substring(11; 19); })). yScale,domain([0. d3,max(data. function (d) { return d;temperature; })]). g.append("g"),attr("transform", "translate(0." + height + ")").call(d3.axisBottom(xScale)).append("text"),attr("y". height - 250),attr("x". width - 100),attr("text-anchor". "end"),attr("stroke". "black");text("Time"). g.append("g").call(d3.axisLeft(yScale);tickFormat(function (d) { return "°C" + d. }).ticks(10)).append("text"),attr("transform". "rotate(-90)"),attr("y". 6),attr("dy". "-5.1em"),attr("text-anchor". "end"),attr("stroke". "black");text("temperature"). g.selectAll(".bar").data(data).enter().append("rect"),attr("class". "bar"),attr("x". function (d) { return xScale(d.date_time,substring(11; 19)). }),attr("y". function (d) { return yScale(d;temperature). }),attr("width". xScale.bandwidth()),attr("height". function (d) { return height - yScale(d;temperature); }); }); </script> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
d3 bar chart is upside down
JavaScript D3 bar chart data will not update when new source is selected from drop down filter
how to create a stacked bar chart with images in d3
D3 bar chart and html data attributes
Create a D3 Bar Chart Using a Object
D3: How to update a line chart when selecting from a drop-down menu?
How to group in d3 bar chart
How to add a separator in D3 bar chart
d3 bar chart transition y-axis upside down
D3 bar chart to stacked bar chart
Related Tags