Unable to convert date data for display on D3 line graph

I am attempting to replicate a line graph similar to the one in the following fiddle link: http://jsfiddle.net/wRDXt/2/

In the example, the date is used as new Date(2013, 17, 1).

The JSON data I have is structured as shown below,

[{
    "_id": "bb68d8a2-8778-4c85-8616-ed1e96a61ea6",
    "FLAG": "public",
    "STATUS": "active",
    "DESCRIPTION": "df",
    "DATE_TIME": "04-10-2016 16:39:39",
    "TOKEN": "bge2jb",
    "LAST_UPDATED": "Tue Oct 04 16:39:39 IST 2016"
},
{
    "_id": "556ae8ad-7291-4303-a9e4-618a82694600",
    "FLAG": "public",
    "STATUS": "active",
    "DESCRIPTION": "d",
    "DATE_TIME": "04-10-2016 16:52:20",
    "TOKEN": "16l4jal",
    "LAST_UPDATED": "Tue Oct 04 16:52:20 IST 2016"
},
{
    "_id": "98db36ba-392d-4df2-ac6c-820eaf582a11",
    "FLAG": "public",
    "STATUS": "active",
    "DESCRIPTION": "uyk",
    "DATE_TIME": "07-10-2016 12:13:10",
    "TOKEN": "dfl5ja",
    "LAST_UPDATED": "Fri Oct 07 12:13:10 IST 2016"
}]

The date format from the API call appears like 07-10-2016 12:13:10 or Fri Oct 07 12:13:10 IST 2016.

When trying to pass this date, an error message is displayed in the console:

Uncaught TypeError: minDate.getDate is not a function

I need assistance on how to properly pass the date and generate the graph.

You can find my updated fiddle here: http://jsfiddle.net/wRDXt/190/

javascriptjsond3.js

Answer №1

The date field in your dataset is currently stored as a string, not a date object. This results in an error since strings do not have the getDate() function.

To resolve this issue, you can iterate through each entry in the dataset after it is declared and convert the date string into a proper date object using the following code snippet:

dataset.forEach(function(d) {
    d.date = d3.time.format("%d-%m-%Y %H:%M:%S").parse(d.date);
});

For further assistance or examples, you can refer to this JSFiddle: http://jsfiddle.net/wRDXt/204/

More information on d3.time.format can be found in the documentation here: Reference for d3.time.format

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

Update the text content in the specific span element when the class attribute matches the selected option in the

How can I dynamically update text inside a span based on matching classes and attributes without hardcoding them all? An ideal solution would involve a JavaScript function that searches for matches between span classes and select field options, updating t ...

javascriptjqueryhtmldrop-down-menu

Breaking down a URL based on one of two distinct components

Currently, I have a piece of code that splits the URL and removes everything after &7. Is there a way to modify it so that it also checks for |relevance simultaneously and splits based on whichever one is found? $(document).ready(($) => { const pa ...

javascriptjquery

Currently, I am encountering a problem as I attempt to iterate through a dynamic table

I have a table containing various elements. An example row is Jack Smith with multiple rows like this: col1 col2 col3 col4 col5 col6 col7 col8 jack smith 23 Y Y error error_code error_desc The table is ...

javascripthtml

Wookmark js isn't designed to generate columns from scratch

I am attempting to utilize the Wookmark jQuery plugin in order to create a layout similar to Pinterest. However, I am encountering an issue where Wookmark is not creating columns within the li elements, instead it is simply stacking images on top of each o ...

javascriptjqueryhtmlcss

Implementing user authentication on a separate domain using a RESTful web service in asp.net

My goal is to connect with a web service on a separate domain for user authentication. The web service is RESTful and written in Java, exchanging data in JSON format. I attempted to establish a connection using jQuery as shown below: function Log ...

asp.netjsonrestful-authentication

When attempting to insert data retrieved from axios into a table within a React component, the data is coming back as

Hi there! Currently, I'm in the process of developing an application that retrieves data from an API and my goal is to display it in a Material UI Table within a React environment. Strange issue I'm encountering: when I use console.log to check ...

javascriptreactjsaxiosmaterial-ui

I am having trouble retrieving a JsonResult from an asp.net mvc controller using $resource in angular

I am new to Angularjs and trying to integrate it with asp.net mvc. I am facing an issue where I am unable to access an asp.net mvc controller to return a JsonResult using $resource in angular. Strangely, when I use $.getJson in JavaScript directly, it work ...

javascriptasp.netangularjsasp.net-mvc

How can I locate a Forum or Node using a JWT Token as a reference point?

Could someone please guide me on locating my forum using my JWT token? exports.getByOwnerID = function (req, res, next) { Forum.find({createdBy: req.body.createdBy}) .then(doc => { if(!doc) { return res.status(400).end();} return res.sta ...

javascriptnode.jsmongodbexpressjwt

Chrome Extension: Sending Data from Panel Window to Popup - A Step-by-Step Guide

I've been developing a Chrome extension that displays a window (popup.html) containing a button for playing videos when the extension icon is clicked. Upon clicking the play button, another window created using window.create of type panel opens up. Th ...

javascriptjqueryajaxgoogle-chromegoogle-chrome-extension

Accessing QML Functions from JavaScript

Currently, I am faced with a challenge in my app development using Qt. I need to trigger a QML function from JavaScript when a specific event is triggered from my HTML page. I attempted the following method: app.html <html> <head><title& ...

javascripthtmlfunctionqml

How do RxJS collection keys compare?

Is there a more efficient way to compare two arrays in RxJS? Let's say we have two separate arrays of objects. For example: A1: [{ name: 'Sue', age: 25 }, { name: 'Joe', age: 30 }, { name: 'Frank', age: 25 }, { name: & ...

javascriptnode.jstypescriptrxjs

Having difficulty extracting information from a Json string stored in the SQL Server database

I need to extract the fileDisplayNames from a specific data set column that contains JSON strings. select id_ref id, JSON_VALUE(cast(data_map as varchar(max)),'$.dataMap."4805".fileDisplayName') Attachments, data_map dataa from action_data wher ...

jsonsql-serversql-server-2017-express

Pause until the existence of document.body is confirmed

Recently, I developed a Chrome extension that runs before the page fully loads by setting the attribute "run_at": "document_start". One issue I encountered is that I need to insert a div tag into the body of the webpage as soon as it is created. However, a ...

javascripthtmlcssevent-handlingdom-events

Having difficulty creating a custom user registration field in Services 3.0 for Drupal

On attempting to submit data to my custom zip code field on the user registration form, I encounter the following issue: Sending post data to endpoint/user/register.json { "name":"testuser123", "pass":"testuser123", "mail":"<a href="/cdn-cgi/l/email-p ...

jsonrestdrupal-7

Tips for sending PHP variables together with a Typeahead variable

I have simplified this code as much as possible. I have a typeahead variable that is functioning correctly. However, I also need to pass two unrelated variables $php_var1 and $php_var2 along with the typeahead variable. These PHP variables are initialized ...

javascriptphphtmlajax

Importing images with relative paths from a JSON file does not work as expected in Next.js

JSON file data portion: { "categories": [ { "id": 1, "category_slug": "food_supplements", "title": "Food Supplements", "image": "/../../public/images/foodSupplements.png", } ] } Component data portion that displays the ...

javascriptreactjsnext.js

A quicker method for setting the emitted value to data

Is there a way to pass data from child to parent without creating a method for assigning the value? I want to be able to assign it directly in the template. This is my current code: Child <h1 @click="$emit('title', 'Home')&quo ...

javascriptvue.jsvuejs2vuejs3

Problems arising from the implementation of CSS modules in React applications

As a beginner in React, I recently started learning how to utilize CSS modules within my React projects. However, I encountered an error that read: Failed to compile. ./src/components/Header/Header.js Module not found: Can't resolve './Header.mo ...

javascriptreactjs

How can one create a hidden color box?

$.colorbox({ href:"/check.html", transition:"elastic", speed: 150, innerWidth:"910", iframe:true, fastIframe:false, fixedPosition:fixedPos, onComplete:function(){ var $ ...

javascriptjquerycolorbox

The initialization of the R Shiny HTML canvas does not occur until the page is resized

I am currently facing an issue while integrating an HTML page with a canvas into my shiny R application using includeHTML(). The packages I am using are shiny, shinydashboard, shinycssloaders, dplyr, and DT. Everything is working perfectly fine except for ...

javascripthtmlcssshinyhtml5-canvas