Creating a drop-down menu within an HTML table along with a D3 bar chart

How can I implement a drop-down menu allowing the user to choose a time interval for this HTML table and d3 bar chart? The time intervals needed are: Now, 24 hours, 48 hours, 72 hours, 1 week, and 1 month. I am relatively new to creating dynamic tables and d3 charts, so any assistance would be greatly appreciated. Below is my code:

<!DOCTYPE html>
<html>
<head>
    <title>Demo</title>
    <style>
        .hide
        {
            display: none;
        }
    </style>

... (The rest of the code continues as it is)

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>

... (The rest of the code continues as it is)

Here is page3.html file

<!DOCTYPE html>
<html>
<head>
    <title>Demo</title>
    <style>
        .hide
        {
            display: none;
        }
    </style>

... (The rest of the code continues as it is)
javascripthtmlcssd3.js

Answer №1

        $(document).ready(function (e) {

            function navigateToPage(pageName) {
                window.location.href = pageName + '.html';
            }

            $('[data-launch-page]').click(function (e) {
                e.preventDefault();
                var pageName = $(this).attr('data-launch-page');
                navigateToPage(pageName);
            });

        });
   
<!DOCTYPE html>
<html>

<head>
    <title>Demo</title>
    <style>
        .hide {
            display: none;
        }
    </style>
    <button id="showPage1Btn" data-launch-page="page1">View 1</button>
    <button id="showPage2Btn" data-launch-page="a">View 2</button>
    <button id="showPage3Btn" data-launch-page="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
                        createTable(myArray)
                        console.log(myArray)
                    }
                })

                function createTable(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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Switching from the .html extension to the absence of .html in Angular

I currently have this htaccess file set up: <IfModule mod_rewrite.c> RewriteEngine on RewriteCond %{REQUEST_FILENAME} -s [OR] RewriteCond %{REQUEST_FILENAME} -l [OR] RewriteCond %{REQUEST_FILENAME} -d RewriteRule ^.*$ - [NC,L] #R ...

htmlangularjs.htaccessmod-rewrite

Launching a URL in a pop-up window with customized title and address bar

I am seeking to implement a feature similar to the following: <a href="post/23">post 23</a> When a user clicks on this element, I want a popup div to fade in and load the HTML from page post/23 into it. Additionally, I would like the title an ...

javascriptjqueryhtml

Having trouble with regex failing to capture newlines in sed or perl?

I am currently working on cleaning a CSV file, which involves removing HTML tags within some of the values. I recently found a solution for this issue: by using the following command sed -e 's/<[^>]*>//g' file.html, as suggested in this ...

htmlregexperlcsvsed

Retain selected choices even after refreshing the page using PHP

Working on a smaller project using PHP, I encountered a problem that has left me feeling lost. Let me break it down into two parts. Part 1: In my project, I have an index.php file and a getitem.php file. The index file contains a form with multiple select ...

javascriptphpjquerymysql

Managing error responses while fetching a blob through AJAX

Is it possible to execute an AJAX call that has the potential to return either a blob or a text string based on the server's response? My current task involves using AJAX to transform a user-provided video into an audio blob that can be utilized with ...

javascriptajax

changing the elements' classes by using a carousel

Having trouble with a custom carousel and unable to use the standard Bootstrap carousel. This is how my code is structured: Images: <img src="1.img"/> <img src="2.img"/> <img src="3.img"/> Prev / Next buttons: <div class="left ...

javascriptjqueryhtmlcss

Unable to access path for children through buttons in parent path

As a data scientist entering the world of frontend development, I find myself faced with the task of creating a UI at the request of my boss. Please bear with me as I attempt to explain my issue in layman's terms. Currently, I am using Vue.js and hav ...

javascriptuser-interfacevue.jsroutesfrontend

What is the best way to extract the JSON data from a client-side GET request response?

Here is my request from the client side to the server in order to retrieve JSON data. fetch("/" + "?foo=bar", { method: "GET", }).then(response => { console.log(" ...

javascriptnode.jsjsonajaxexpress

Maintaining the format of forms input in Rails and HTML: Tips and tricks

Hey there! I'm working on a Rails app that has a simple HTML form. One of the fields is called description, which is a text_area. I want to be able to display its input exactly as it was entered on the index page. For instance: If someone enters a l ...

htmlruby-on-railsruby-on-rails-3forms

I am looking to create a split div with a diagonal line running through

Is there a way I can create this Mockup using html5 and css3, but also add diagonal lines to divide the div? Any suggestions on how to achieve this? ...

htmlcss

Error message: "Reactjs - TypeError: The property 'map' cannot be read as it is undefined in the table"

I have encountered an issue while using the material-ui table. I am able to map the items and display them successfully, but when trying to map the orders.items in the table, I get the following error: TypeError: Cannot read property 'map' of u ...

javascriptreactjsmaterial-ui

Having Trouble with Font Awesome Icon Loading in Search Box

Currently, I am working on a website located at . However, I am facing an issue where the font awesome icon is not loading properly and is only displaying a square. I have thoroughly reviewed the CSS and cannot identify any conflicting elements. Any assis ...

htmlcsswordpressfontsicons

Using setInterval with Internet Explorer 10

In Internet Explorer 10, the setInterval function does not work properly. I have a web page where, upon form submission, a lengthy process is triggered on the server to download a file. To keep users updated on the progress, I utilize setInterval to repeat ...

javascriptajaxinternet-explorer-10

Error Received While Attempting to Log in using Ajax

Having an issue with logging in using ajax and php. I am able to log in successfully, but when trying to display an alert message and refresh the page upon login, it gives me an error without refreshing. However, upon manually refreshing the page, I can se ...

javascriptphpjqueryajax

Looking to optimize this code? I have three specific tags that require reselection within a given list

for (var i=0; i<vm.tags.length; i++) { if (selectedTags[0]) { if (vm.tags[i].term_id === selectedTags[0].term_id) { vm.tags[i].border1 = true; } } if (selectedTags[1]) { if (vm.tags[i].term_id === selecte ...

javascriptloopsfor-loop

The JSON.stringify method may not accurately reflect the original object that was converted into a string

Working on a Connect Four app for my school project has been an interesting challenge. At the moment, I am grappling with JSON.stringify and trying to encode an object that holds a two-dimensional array of "hole" objects to eventually send it to the server ...

javascriptjsonnode.jsstringify

Modifying a Sass variable using a Knockout binding or alternative method

Is it feasible to dynamically alter a sass variable using data-binding? For instance, I am seeking a way to modify the color of a variable through a button click. I am considering alternative approaches apart from relying on Knockout.js. $color: red; ...

javascriptjqueryhtmlknockout.jssass

What is the reason for requiring both a promise and a callback in order to store JSON data in a global variable?

In order to expose fetched JSON data to a global variable, it is necessary to use either a promise or a callback function. However, my current code is utilizing both methods... Currently, I am creating a promise using the .done function in jQuery. Within ...

javascriptjsonajaxcallbackpromise

Tips on verifying the count with sequelize and generating a Boolean outcome if the count is greater than zero

I'm currently working with Nodejs and I have a query that retrieves a count. I need to check if the count > 0 in order to return true, otherwise false. However, I am facing difficulties handling this in Nodejs. Below is the code snippet I am strugg ...

javascriptnode.jssequelize.js

Regular Expression: Identify specific characters at the start or end of a string

I am in need of a regular expression (regex) that can precisely match the char set 'AB' only if it is at the beginning or end of a string, and then replace it with an empty string. It is important to note that the regex should not match parts of ...

javascriptregex