Analyzing quarterly sub-grouped data on the X axis using d3js, sorted by year

I am facing a challenge in creating a line chart that includes two X axes with subgroupings for the year. For instance, if I have 4 quarters (Q3, Q4, Q1, Q2) and Q3, Q4 are part of the year 2014 while Q1, Q2 belong to the year 2015, I would like to represent this on the second X axis. I have included an example of what I am looking for in the imgur link provided below, as well as a somewhat similar example that uses months instead of quarters. Can anyone offer any advice or examples on how I can achieve this?

https://i.sstatic.net/1Hl6u.jpg

http://jsfiddle.net/bhyvn5hv/

var xAxis1 = d3.svg.axis()
.scale(x)
//.ticks(d3.time.months)
.tickFormat(monthformat)
.tickSize(5,0)
.orient("bottom");
var xAxis2 = d3.svg.axis()
.scale(x)
.ticks(d3.time.years, 1)
.tickFormat(yearformat)
.tickSize(5,0)
.orient("bottom");
javascriptangularjsd3.jsangularjs-directive

Answer №1

What do you think of this code snippet? JSFiddle

var quarter = function(date, i){
      if(i > 0){

        var date2 = new Date();
        date2.setMonth(date.getMonth() - 1);
        q = Math.ceil(( date2.getMonth()) / 3 );
        return "Q" + q;
      }
}

var xAxis3 = d3.svg.axis()
    .scale(x)
    .orient("bottom")
    .ticks(d3.time.months, 3)
    .tickSize(5, 0)
    .tickFormat(quarter);

svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + (height + 25) + ")")
    .call(xAxis3);

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

Retrieve all documents with a matching objectId field in MongoDB

I built an API that can fetch all data from a table, but within this table there is an object ID reference to a user. Table 1 - Story | Table 2 - User api.get('/all_stories', function(req, res) { Story.find({}, function(err, stories) { ...

javascriptangularjsmongodb

Modify the parent div's background color on mouseover of the child li

I want to update the background image of a parent div that contains a series of ul li elements. Here is the HTML code I am working with: <section class="list" id="services"> <div class="row"> <ul> <li>& ...

javascriptjqueryhtmlcss

Showing changes in state in real-time using ReactJS: A quick guide

Hello, I am currently facing an issue while trying to add a comment and display it immediately on the DOM. Whenever I type any word in the form box, it does not appear in the box. Additionally, pressing the enter key does not trigger a POST request. Could ...

javascriptpythonreactjs

Modify the Embed Audio Player in Google Drive

I am looking to integrate audio files from Google Drive into my website. While I have successfully embedded them, the issue lies in not being able to customize the player (as shown in the image below). Is there a way to modify the player? <iframe ...

javascripthtmlcssgoogle-drive-api

Verifying authentication on the server and redirecting if not authorized

I am working on my NEXTJS project and I want to implement a feature where the cookie headers (httponly) are checked and the JWT is validated server-side. In case the user is not logged in, I would like to respond with a 302 redirect to /login. I'm unc ...

javascriptreactjsnext.js

Modifying selections within a select box generated dynamically using JQuery

Looking for help on how to delegate to a static DOM element in my current situation. I need to create a dynamic select box .userDrop when .addNew is clicked, and then have the user select an option from #secDrop, triggering a change event that calls the da ...

javascriptjqueryhtmldom

What happens when 'grid' property is undefined in modal?

I encountered an issue with my modal where I wanted to display pre-selected rows, but kept getting a 'cannot read 'grid' of undefined' error. The UI Grids are defined within the modal, and I have declared two Grid APIs with different na ...

javascriptangularjstwitter-bootstrap

Is there a way to use an Angular expression inside an HTML document to determine if a variable is a boolean type?

I'm working with an element in my HTML where I need to determine the type of a variable, specifically whether it's a boolean or not. <button process-indicator="{{typeof(button.processIndicator) === 'boolean' ? 'modalProcess&apo ...

javascripthtmlangularjs

Looking for a JavaScript snippet to insert the word "Search" into an empty DIV element with the specified id attribute

I am trying to insert the word "Search" into an empty input field with the id "ReportQuery" using JavaScript. Unfortunately, I do not have access to the HTML code directly. How can I achieve this task through coding? Below is the snippet of code that nee ...

javascriptjqueryhtmlsearch

Displaying exclusively distinct values in the selection box/dropdown menu

My goal is to retrieve data from the SQL server database and populate the corresponding fields on the frontend. While I am able to fetch the data, some fields in the response contain duplicate values in the dropdown menu. Here is an example of how my Compo ...

javascriptangulartypescriptangular7

Styling Challenges with CSS/AngularJS Accordion in Footer

I want to create a page layout as shown below: +---------------------------+ | Auto-fill / v scrollable ^| | || | || | v| +---------------------------+ | Fixed [][][] ...

javascripthtmlcssangularjs

Generate selection choices by looping through a JSON document

I am attempting to develop a search box that will provide autocomplete suggestions based on user input from a key-value pair in a json file. I initially thought using datalist would be the most suitable approach for this task, however, upon running the cod ...

javascriptjqueryjsonhtml

Flashing bug in the outFunction of jquery hover()

My friends and I are working on a website for a class project, but we're running into a strange issue with the outFunction part of our hover function. Whenever the mouse hovers over an element, a grey square fades in using .fadeIn(), but then immediat ...

javascriptjqueryhtml

Integrating webpack with kafka-node for seamless communication between front

I am in the process of embedding a JavaScript code that I wrote into an HTML file. The script requires kafka-node to function properly, similar to the example provided on this link. To achieve this, I am using webpack to bundle everything together. I am fo ...

javascriptnode.jsnpmwebpack

Tips for displaying a tooltip when hovering over a label in a Material UI slider

I'm currently working on a slider quiz and my goal is to have the tooltip appear when hovering over the label on the slider. Currently, I can only see the tooltip when I hover directly on the thumb at the location of my mouse. Refer to the image belo ...

javascriptreactjsmaterial-uislider

Calculating the sum in a ng-repeat across several arrays

I would like to display the total points for each user in this scenario (cc1, cc2 etc). Here is the HTML code: <tr ng-repeat="month in months"> <td>{{$index+1}}</td> <td>{{month[0].cc_name}} ...

angularjsarrays

How can one effectively overcome the constraint in HTML5 canvas that prevents altering the positions of previously sketched elements?

I am currently working on creating a wind map that displays data from seven different weather stations. My goal is to develop a fluid and interactive map similar to the ones found in this animation or this animation. In my research, I came across an artic ...

javascripthtml5-canvasdrawmove

Improving Zen Coding to integrate with JavaScript files on Sublime Text2

Sublime Text2 is hands down my go-to editor, except for one minor hiccup - the Zen Coding plugin only works with CSS and HTML files. There are plenty of times where I'd love to use Zen Coding with JavaScript or other file types, like incorporating HTM ...

javascriptsublimetextemmet

Utilize JavaScript to iterate through two sets of numbers

I am currently working on a project that requires me to iterate through two continuous number ranges: 1 to 5 and 10 to 15. This is the code I'm using: var X = []; for (i = 1; i < 6; i++) { X.push(i); } for (i = 10; i < 16; i++) { X.push(i ...

javascriptnode.js

One Background Image Serving Multiple Divs

Can you use one image (PNG or SVG) as the background for multiple divs? Take a look at the images below to see how it could work. And if the screen width gets smaller and the divs stack up vertically, is there a way to change the background accordingly? D ...

javascripthtmlcsssvgpng