The x-axis in c3.js is experiencing issues with plotting when there is interval data in DST time

Trying to create a graph using the c3.js library with an x-axis interval of time.

The intervals are determined by selecting a date range in the date picker. For example, if we select the dates 2016-03-13 00:00 to 2016-03-13 04:00, we add 15 minutes to the start date until it is less than or equal to the end date.

The data points I am using are as follows:

["x", "2016-03-13 00:00", "2016-03-13 00:15", "2016-03-13 00:30", "2016-03-13 00:45", "2016-03-13 01:00", "2016-03-13 01:15", "2016-03-13 01:30", "2016-03-13 01:45", "2016-03-13 02:00", "2016-03-13 02:15", "2016-03-13 02:30", "2016-03-13 02:45", "2016-03-13 03:00", "2016-03-13 03:15", "2016-03-13 03:30", "2016-03-13 03:45", "2016-03-13 04:00"]

These data points work well without any issues when there is no Daylight Saving Time (DST) adjustment in the timezone. However, during DST application, the point between 2 am and 3 am is missing on the graph, causing the scale to be 23 hours. It is essential to plot all data points on the graph regardless of whether DST is being observed or not. Here is the code snippet that is currently not functioning correctly:

var chart = c3.generate({
    data: {
        x: 'x',
         xFormat: '%Y-%m-%d %H:%M', // 'xFormat' can be used as custom format of 'x'
        columns: [
            ["x", "2016-03-13 00:00", "2016-03-13 00:15", "2016-03-13 00:30", "2016-03-13 00:45", "2016-03-13 01:00", "2016-03-13 01:15", "2016-03-13 01:30", "2016-03-13 01:45", "2016-03-13 02:00", "2016-03-13 02:15", "2016-03-13 02:30", "2016-03-13 02:45", "2016-03-13 03:00", "2016-03-13 03:15", "2016-03-13 03:30", "2016-03-13 03:45", "2016-03-13 04:00"],
            ['data1', 30, 200, 100, 400, 150, 250,30, 200, 100, 400, 150, 250.30, 200, 100, 400, 150]
        ]
    },
    axis: {
        x: {
            type: 'timeseries',

             fit: true,
            tick: {
                format: '%Y-%m-%d %H:%M:%S'
            }
        }
    }
});

Answer №1

A couple of options are available to switch between local and UTC time, one for the data and another for the axis. However, the data option is not officially exposed yet and must be set using c3's internal property.

c3.chart.internal.fn.additionalConfig.data_xLocaltime = false;

var chart = c3.generate({
    data: {
        x: 'x',
         xFormat: '%Y-%m-%d %H:%M', // 'xFormat' can be used as custom format of 'x'
        columns: [
            ["x", "2016-03-13 00:00", "2016-03-13 00:15", "2016-03-13 00:30", "2016-03-13 00:45", "2016-03-13 01:00", "2016-03-13 01:15", "2016-03-13 01:30", "2016-03-13 01:45", "2016-03-13 02:00", "2016-03-13 02:15", "2016-03-13 02:30", "2016-03-13 02:45", "2016-03-13 03:00", "2016-03-13 03:15", "2016-03-13 03:30", "2016-03-13 03:45", "2016-03-13 04:00"],
            /*["x", "2016-03-27 00:00", "2016-03-27 00:15", "2016-03-27 00:30", "2016-03-27 00:45", "2016-03-27 01:00", "2016-03-27 01:15", "2016-03-27 01:30", "2016-03-27 01:45", "2016-03-27 02:00", "2016-03-27 02:15", "2016-03-27 02:30", "2016-03-27 02:45", "2016-03-27 03:00", "2016-03-27 03:15", "2016-03-27 03:30", "2016-03-27 03:45", "2016-03-27 04:00"],*/
            ['data1', 30, 200, 100, 400, 150, 250,30, 200, 100, 400, 150, 250.30, 200, 100, 400, 150]
        ]
    },
    axis: {
        x: {
            type: 'timeseries',

             fit: true,
            tick: {
                format: '%Y-%m-%d %H:%M:%S'
            },
            localtime: false,
        }
    }
});

(I chose to test the data from 2016-03-27 in the UK locale, considering the daylight saving time change happening at that time)

Answer №2

Consider incorporating timezone offsets into your date strings.

var dateFormatter = d3.time.format("%Y-%m-%d %H:%M%Z");
columns[0].forEach(function(d, idx, theArray) {
    if (d !== 'x') {
        theArray[idx] = dateFormatter(new Date(d));
    }
});

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

What is causing the VueJS template ref to be undefined when dealing with multiple divs

I have been working on a simple Vue component and I am trying to access the DOM element from the template. The initial component works perfectly: <template> <div ref="cool">COOL!</div> </template> <script> export ...

The equation of jquery plus ie7 results in an undefined value

I am experiencing a strange issue in IE7 with a jQuery script. This problem seems to only occur in IE7. In summary, when I check the console window, it shows that jQuery is not defined - even though I have loaded jQuery (version 1.7.1) from my disk and can ...

What is the best way to target and focus on all class fields that have a blank value?

<input type ="text" class="searchskill" value=""> <input type ="text" class="searchskill" value="3"> <input type ="text" class="searchskill" value=""> <input type ="text" class="searchskill" value="4"> Is there a way to target o ...

The Stripe card element seems to be missing from the form

I'm a newcomer to angularjs and currently working on integrating version 3 of the stripe api into my angular application. I followed the steps provided on the stripe website, but faced an issue when trying to incorporate their code which is primarily ...

clicking on an element to get its div id

In my code snippet $('.startb').click(function() { var myId = $(this).attr("id"); });, I am already capturing the id "startb1". To also capture the id "test1" from the element with the class "flashObj", all within the same div container "audioCon ...

Error: Angular JS Service is undefined

I'm currently working on creating an array in my application that is universally accessible through services. Additionally, I have implemented ui-router in my application. In the app.js file, I define the service like this: myFamilyApp.service(&apos ...

Retrieving outcome of Solidity contract function using web3-1.0.0-beta.27

I am using web3 1.0.0-beta.27 and the pragma solidity is set to ^0.4.2. contract Charity{ function ping() public constant returns (uint) { return 200; } } Currently, I am compiling and calling it in typescript with: import * as fs ...

JQueryMobile 1.3.2 encounters issues with popups following the installation of Chrome version 43.0.2357.65 m update

Is anyone else experiencing issues with the latest version of Chrome "43.0.2357.65 m" causing problems with JQueryMobile 1.3.2? When I try to click on a popup, it suddenly jumps to the top of the page and the scroll bar disappears. This was not an issue in ...

Mapping an array using getServerSideProps in NextJS - the ultimate guide!

I'm facing an issue while trying to utilize data fetched from the Twitch API in order to generate a list of streamers. However, when attempting to map the props obtained from getServerSideProps, I end up with a blank page. Interestingly, upon using co ...

"Incorporating React with Redux using object-oriented programming principles

Coming from Angular, I was accustomed to having a separate class for each entity in my database, where all the entity's behavior was encapsulated. For example, a Users Class could look like this: export class User{ static notValid(u){ return ! ...

NextJs application displaying empty homepage and preventing redirection

After successfully deploying my nextjs app on netlify, I encountered a strange issue. When I visit the base url of my website, instead of seeing the homepage, all I get is a blank screen. Oddly enough, if I navigate to specific pages on my site, they load ...

ionic framework for seamless bar code scanning

$scope.scanBarcode = function(){ $cordovaBarcodeScanner.scan().then(function(imageData){ alert(imageData.text); console.log("Barcode format ->" + imageData.format); console.log("Cancelled ->" + imageData.cancelled); }, function(error) { ...

Disappearing Into the Background Excluding Specific Divs

I have a dilemma with fading in and out a background image using jQuery fadeIn and fadeOut. The issue arises because my wrapper div contains elements such as sidebar and navigation that are positioned absolutely within the wrapper div, causing them to also ...

How can I switch between different images using jQuery?

HTML <div class="image_rollover"> <img id="image_one" src=image_one.png"> <img id="image_two" src="image_two.png"> <img id="image_three" src="image_three.png"> <img id="image_four" src="image_four.png"> ...

Create a bookmark system on an HTML page by utilizing the existing heading tags and implementing Javascript

Looking to implement a bookmark system using the headings within my HTML document, based on heading hierarchy. Unfortunately, my attempts have not been successful so far. https://i.stack.imgur.com/CdXjw.png I envision my bookmarks looking something like t ...

Google's AJAX crawling scheme using the shebang syntax is failing to crawl pages

I have incorporated Google's shebang '#!' syntax for ajax crawling on my website. Both ends of the system have been set up as per the guidelines provided at https://developers.google.com/webmasters/ajax-crawling/docs/specification This mea ...

Extract the raw text content from nested elements

Working with highlight.js to include a custom CSS code, however, this library automatically adds span tags around the desired text For example: <pre> <code class="language-css hljs" contenteditable="true" id="css-code&quo ...

What is the proper way to invoke a child method after converting an object from a parent class to a child class?

When we have a subclass B that overrides a method from its superclass A in TypeScript, why does calling the method on an instance of A result in the parent class's implementation being called? In TypeScript, consider a class called Drug with properti ...

Watching a Computed Value in EmberJS

What causes the discrepancy between the two sets of code? Utilizing computed: computed: Ember.computed('selected', function() { console.log('computed'); return this.get('selected'); }), observer1: Ember.observer(&ap ...

Issue: Unidentified source / Utilizing controller within factory

Is there a way to access AuthenticationCtrl in this code snippet? Snippet: app.factory( 'AuthenticationInterceptor', function( $q, $injector ) { return { response: function (response) { // Skip the success. ...