Generate a c3 chart illustrating a bar graph incorporating offset and duration

How can I accurately display daily working hours for a person, using input data of date and duration worked in seconds?

I am facing difficulty determining the offset for the duration displayed on the graph. For instance, if a person starts work at 9:30 am and finishes at 6pm, is there a method to show the bar from 9:30 until 6pm?

Furthermore, I am unsure if my current approach to the issue is correct.

Below is the code snippet I am currently using.

var chart = c3.generate({
  data: {
    x: 'x',
    columns: [
      ['x', '2018-01-01', '2018-01-02', '2018-01-03', '2018-01-04', '2018-01-05', '2018-01-06'],
      ['Hours Worked', 35000, 37000, 29000, 32000, 33500, 0]
    ],
    type:'bar'
  },
  axis: {
    x: {
      type: 'timeseries'
    },
    y: {
      tick : {
            format : function (y) {
                var format = d3.time.format("%H:%M");
                return format(new Date(new Date('01-01-2016 00:00:00').getTime() + (y * 1000)));
            }
        },
    min:25200,
    max:75600,

    }
  }
});

You can access the full code here https://jsfiddle.net/s66amhvv/3/.

Answer №1

Realizing I was on the wrong path, I discovered that a Range Column chart was exactly what I needed.

Since c3 does not currently offer support for range Column charts, I turned to canvasjs to create the desired chart.

Although there are still some issues with the chart, I believe it provides a good starting point in the right direction for me.

Below is the Canvas Js Code required to implement range column charts:

var chart = new CanvasJS.Chart("chartContainer", {
    theme : "light2", // "light1", "light2", "dark1", "dark2"
    animationEnabled : true,
    title : {
        text : "Attendance Log"
    },
    dataPointWidth : 5,
    toolTip : {
        shared : true,
        contentFormatter : function (e) {
            console.log(e)
            var content = " ";
            var format = d3.time.format("%I:%M %p");
            var inTime = format(new Date(new Date('01-01-2016 00:00:00').getTime() + (e.entries[0].dataPoint.y[0] * 1000)));
            var outTime = format(new Date(new Date('01-01-2016 00:00:00').getTime() + (e.entries[0].dataPoint.y[1] * 1000));

            content += "Out Time: " + outTime + "</br> In Time: " + inTime;

            return content;
        }
    },
    axisY : {
        title : "Time",
        labelFormatter : function (e) {

            var format = d3.time.format("%I:%M %p");
            return format(new Date(new Date('01-01-2016 00:00:00').getTime() + (e.value * 1000)));
        }

    },
    axisX : {
        valueFormatString : "DD-MMM",
        labelAngle : -50
    },
    data : [{
            type : "rangeColumn",
            /* yValueFormatString: function (y) {
            console.log(y)
            var format = d3.time.format("%H:%M");
            return format(new Date(new Date('01-01-2016 00:00:00').getTime() + (y * 1000)));
            } */
            xValueFormatString : "DD MMM",
            color : "LightSeaGreen",
            dataPoints : [{
                    x : new Date(2012, 01, 01),
                    y : [35000, 50000]
                }, {
                    x : new Date(2012, 01, 01),
                    y : [54000, 60000]
                }, {
                    x : new Date(2012, 01, 02),
                    y : [30000, 60000]
                }, {
                    x : new Date(2012, 01, 03),
                    y : [40000, 80000]
                }, {
                    x : new Date(2012, 01, 04),
                    y : [40000, 70000]
                }

            ]
        }
    ]
});
chart.render();

https://jsfiddle.net/s66amhvv/9/

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

Unable to forward with POST request in Node.js

I have a button on the front end that allows users to update their profile photo using the Cloudinary API. When the button is clicked, a Node.js POST request is sent with the user's data to query the database and update the profile photo URL. The func ...

What's the process for creating a synchronous function in AngularJS?

Is there a way to make storyboard.getAdressTimeLine run synchronously? I need storyboard.drawTimeLine to continue executing only after storyboard.getAdressTimeLine is done for (var i = 0; i < response.data.length; i++) { var obj=response.data[i]; var d ...

What methods can I use to sort content by its rating?

I am embarking on my inaugural project and attempting to construct a product filtering system. So far, I have successfully implemented search and category filters; however, configuring the rating filter has proven to be challenging. Here is an excerpt of ...

How can I notify an error in CoffeeScript/JavaScript when a parameter is not provided?

Initially, I believed that my code was clever for accomplishing this task: someFunction = (arg1, arg2, arg3) -> if _.some(arguments, (a) -> a is undefined) throw new Error "undefined parameter" My goal was to throw an error if any of the para ...

Mocking a Promise-returning dependency for a React Component in Jest

There's a React component I'm working on that has a dependency like so: import { fetchUsers } from '../../api/'; This function is a utility that returns a Promise. My challenge lies in trying to mock this dependency using Jest. I&apo ...

Dealing with images on my live React application

For managing static images in my react app, I have integrated cloudinary as a CDN service. Can anyone suggest a seamless way to switch between using local image folders during development and switching to the CDN URL for production efficiently? ...

Safari's Failure to Execute Ajax Requests

My HTML page includes an ajax request that is functioning properly on Firefox, but does not work on Safari. While debugging, I noticed that the readystate is undefined and the status is "". Can anyone suggest why it might not be working on Safari? Javascr ...

Guide on saving an Express session into a MongoDB database through a controller handling

I'm experiencing a problem with my controller where the session is not being stored properly even after implementing the necessary express session code app.use(session({ secret: 'keyboard cat', resave: false, saveUninitialized: true, ...

How to retrieve the first option selected in Material-UI React?

Hey there! I am currently working with React Material UI select. I have a question - how can I set the first option of items as selected without triggering the onChange method? When I change an option, it triggers the onChange method and adds an attribut ...

React does not trigger a re-render when dynamically generated buttons are created

I am encountering an issue with displaying social media buttons on my website. I have implemented a tweet button and a Facebook like button to appear on every page, but they only load correctly on the initial page visit. Upon navigating to another page and ...

Invisible Thinglink image revealed upon resizing browser

I am currently repurposing a pre-existing theme that has a drop-down menu showcasing an image. I am attempting to integrate a Thinglink into the content section of this drop-down, but unfortunately, the image does not appear until I adjust the size of the ...

A guide on how to efficiently retrieve a string within a function in a native module in a React Native

I'm currently tackling a function related to the native elements of iOS that is coded in Objective-C, My goal is to create a method that will output a string in Objective-C, However, I've hit a roadblock while trying to implement this method: T ...

Error message: Angular 7 - Running out of memory due to JavaScript heap

When attempting to run the ng serve command in my Angular 7 application, I encountered an error message stating "JavaScript heap out of memory." After researching various responses on Stack Overflow, it became clear that this issue stems from inadequate m ...

Exploring Vue and Nuxt JS: What Causes the Issue of Unable to Create the Property 'display' on the String 'bottom:30px;right:30px;'

this piece of code is designed for a component that allows users to jump back to the top of the page. However, after refreshing the page, it stops working and throws an error. The project uses the Nuxt and Vue framework. Can anyone identify the reason behi ...

Using curly braces when invoking a function from HTML within a Vue.js application

When I call a function, for example on click, it works whether or not I use curly braces. However, I have created a function that triggers a custom event from a child component. I then await this event in a parent component and update the state with my par ...

Accessing values from an array within a JSON object using jqGrid

Here is an example of my JSON data: [{"codDiretor":"123", "nomeDiretor":"Nome do Diretor", "data":"29/01/2014", "documentos":[{"codDocumento":"1", "nomeDocumento":"Primeiro Doc"}, {"codDocumento":"2","nomeDocumento":"Segundo Doc"}] ...

Printing HTML to a VueJS page is simple and efficient

I have a situation where one of my attributes in a property contains an HTML string. Instead of rendering the HTML as expected, when I output it within my template, the browser displays the raw HTML code with tags intact. It doesn't interpret it as a ...

Error [ERR_UNSUPPORTED_DIR_IMPORT]: Nodejs App cannot be started locally due to a directory import issue

My journey to deploy my app on Heroku has hit a roadblock. The import statements, like import cors from 'cors', are causing the app to fail in production with the "Cannot Load ES6 Modules in Common JS" error. Interestingly, everything runs smooth ...

Should I use Mongoose schema methods or prototype functions?

I am curious about the functionality of functions and ES6 classes in relation to new objects created from a mongoose schema. I wonder if the functions are duplicated for each new object and what the best approach is when utilizing ES6 classes. To illustrat ...

Redux actions do not cooperate with functions, preferring to be implemented inline instead

I am a beginner in Redux and JavaScript and just came across this issue, When I use the line dispatch({type: 'REQUEST_START'}); it works fine, but when I write it like this: dispatch(requestStart); No actions are being fired! Any suggestions ...