Is there a way to create a stacked bar chart through iterative steps?

I am currently working with time series data stored in an array structured like this:

var data = [

[{date: 2016-01-01 00:00:00, value: 52}, 
{date: 2016-01-02 00:00:00, value: 23},
{date: 2016-01-03 00:00:00, value: 42},
{date: 2016-01-04 00:00:00, value: 12,
...
],
[{date: 2016-01-01 00:00:00, value: 12}, 
{date: 2016-01-02 00:00:00, value: 42},
{date: 2016-01-03 00:00:00, value: 35},
{date: 2016-01-04 00:00:00, value: 11},
...
],
...
]

In this structure, each data[i] corresponds to a daily time series dataset for a specific component.

My objective is to generate a stacked bar chart for each {date, value} entry, where different sections of the bars represent data[0], data[1], and so on up to data[data.length-1].

What would be the most efficient approach to achieve this using d3? Appreciate your insights!

Answer №1

Consider this unique approach that utilizes only javascript and svg:

  1. Start by shifting all date values based on a specific reference point, like Jan 1, 1970 for Unix systems, converting them into integers representing a time difference in days.

  2. In your HTML code, define a div element as follows:

    <div id="data_display"></div>
    
  3. In your script (example snippet provided below):

    var dd = document.getElementByID("data_display");
    dd.innerHTML = "<svg width='" + data.length + "' height='100'>"
    for (i = 0; i < data.length; i++) {
       dd.innerHTML += "<rect x='" + data[i] + "' y='...
    }
    dd.innerHTML += "</svg>"
    

    You can customize the dimensions and appearance of each svg rectangle using parameters from your data structure. Additionally, you have the flexibility to adjust fill colors, stroke colors, and incorporate other svg elements like text and lines to enhance your chart.

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

Updating state using the react `setState()` function will automatically trigger a re-render

I am currently working on a large form using React and material-ui. The form implements two-way binding to update the state when input changes occur. Interestingly, changing any input field triggers updates in all components (as observed through TraceRea ...

Automatically update div content using AJAX in a different approach

In my situation, I am facing a unique challenge compared to other queries. I have a div element with the following code <div id="ondiv"><?php ?></div> Within this PHP section are details of people who are currently online. Ideally, when ...

Node and Express Fundamentals: Delivering Static Resources

const express = require('express'); const app = express(); app.use(express.static('public')); I've been attempting to complete the "Basic Node and Express: Serve Static Assets" challenge on freecodecamp, but it keeps showing as " ...

Directive unable to recognize ng-pattern functionality

I am attempting to encapsulate an <input> within a directive in order to manage date validation, conversion from string to Date object, and keep the Date version in the original scope. The functionality seems to be working as intended. However, the n ...

What is the correct way to express an object in an array?

I've encountered an issue: I'm working with an array called _daysConfig<DayConfig> When I manually populate it like this, everything functions correctly: _daysConfig: DayConfig[] = [ { date: new Date('Wed Jul 22 2020 21:06:00 GMT+02 ...

Leveraging Axios for form data submission

Is it possible to serialize data from an HTML form element and then post the data using a Post request with Axios? Below is the event code triggered when a button click occurs to submit the post: function form_submission(e) { var data = document.getEleme ...

What is the best way to execute multiple controller functions for a single route?

I have a specific route set up for users to submit loan applications. What I want to achieve is to call different controller functions based on the amount of the loan that the user is applying for. app.use('/submitLoanRequest50kMore', mw1, mw2, ...

What is the best way to display the HTML content being received from the database in the DOM?

I have received an object in this format [ { "BET": 57630343, "CUSTOMER": 181645, "SPORT": "MLB", "XX_FILL OPEN": "<button class=\"btn\" onclick=\"fillOpen(57630343)\">Fill Open</button>", "XX_VIEW": n ...

What is the best way to integrate JQuery URL in Joomla components?

Can anyone show me how to load a jquery URL in Joomla (Component)? I have a button that, when clicked, will reload the page and use the GET method to display a value from a variable. JavaScript: jQuery("#btnclickme").click(function(){ jQuery("#divpro").l ...

Transmitting information securely and remotely between two online platforms

I own two websites and another at When a user clicks on something on example1.com, I want it to trigger a popup from example2.com. Then, I need to send some data back to example1.com using GET parameters and be able to detect it using jQuery or JavaScrip ...

Identifying the position of an element as the first, nth, or last child within its parent using ReactJS

I'm currently experimenting with dynamic functionality in ReactJS and I need to determine the position of a child relative to its parent. How can I achieve this in ReactJS? I have come across this post which discusses detecting relationships between ...

Issue with Bootstrap 4: Dropdowns not functioning properly

Trying to create a dropdown menu using Bootstrap 4 in my Spring MVC Application, along with Thymeleaf template engine. I've included popper.js and jQuery on my HTML page and also added Bootstrap's CSS and JavaScript files to the static directory. ...

Exploring Javascript's Timing Functions: SetInterval() and ClearInterval()

Hi there, I am currently working on developing an interval timer that allows users to set the number of rounds, working interval length, and resting interval duration. For instance, if a user inputs 30 seconds for work, 10 seconds for rest, and decides on ...

Guide on NodeJS: Harnessing the power of nested functions to ensure synchronous execution

Imagine two functions, A and B, both interacting with a MySQL database using connection.query(...) methods. Function A utilizes a while loop to navigate through the response it receives. Subsequently, function B is invoked with the response from function ...

AngularJS: default radio button selection

I'm currently working on creating a color configurator using AngularJS with radio buttons. Everything seems to be functioning properly - the data binds correctly, etc., but I'm encountering an issue setting the default color radio button as check ...

Holding off on completing a task until the outcomes of two parallel API requests are received

Upon page load, I have two asynchronous API calls that need to be completed before I can calculate the percentage change of their returned values. To ensure both APIs have been called successfully and the total variables are populated, I am currently using ...

Troubleshooting: AngularJS routing issue

I'm facing an issue with my AngularJS routing code. Here is the code snippet: /// <reference path="C:\Users\elwany\documents\visual studio 2015\Projects\spaapplication\spaapplication\scripts/angular.js" /& ...

Guidelines for Naming Data Attribute Values in JavaScript

When it comes to the Data Attribute Value, should one use hyphens or camelCase as a convention? Hyphen Example: <input type="text" name="some_input" data-target="to-grab-input-via-javascript"> Camel Case Example <input type="text" name="some_ ...

Utilize React to Effectively Control Multiple Audio Files on a Single Page, Ensuring Only One Plays at a Time with Function

I am currently working on a new React app that includes multiple music cards on the same page. I am looking to modify the state of the previous card before updating the state of the new card. Essentially, I aim to pause the audio playing in the previous ca ...

JavaScript bundling encountered an unexpected token for 'else', causing an exception

After successfully running my JavaScript files individually, I encountered an issue when bundling them using the SquishIt Framework. An error regarding an unexpected token 'else' appeared in a new file where all the files were combined. To addre ...