Is it possible to convert JSON Date to a Date format using Angularjs and Google Charts?

I am trying to create a DataTable or DataArray on the server side (using spring/java) that can be used for google charts. The issue I'm facing is with the Date Format. Initially, I built a Data Array and serialized it to JSON, which looked like this:

{DataArray:[["Date","New York","Austin"],[100,200,300]]}

On the client side, parsing this DataArray to a DataTable was not a problem.

However, when I tried to add a Date, Angular threw an error because the json string was not well formatted in that case.

On the client side, I found a solution where I could convert an array into a DataTable using the following code:

data = new google.visualization.arrayToDataTable([ ['date','New York','Austin','San Francisco','Country','Popularity'], [new Date("8/6/1975"),2,3,15,'Germany',200], [new Date("8/6/1980"),5,6,19,'Brazil',400], [new Date("8/6/2000"),8,9,23,'United States',300], [new Date("8/6/2010"),11,12,35,'RU',700] ])

This method worked by using new Date(), but now I need to figure out how to create something like "new Date("8/6/1975")" on the server side and send it to the client so that it creates a Date Object on the client side.

Does anyone have any ideas on how I can achieve this? Can I use the json date format for this purpose? If so, how can I generate a json date on the server side that appears as "new Date("8/6/1975")" on the client side and converts into a Date object?

Answer №1

It is important to provide your dates in string format on the server-side, following this specific structure:

'Date(year, month, day, hour, minute, second, millisecond)'

Remember that month starts at 0 (meaning January is 0, not 1), and all other parameters like day, hour, minute, second, and millisecond are optional with certain default values (1 for day and 0 for others).

Additionally, make sure to indicate that the column containing dates is of type "date" in the header. If you don't specify this, the arrayToDataTable function may treat it as a string. Instead of using the word 'date' in the header row, use an object like this:

{label: 'date', type: 'date'}

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

The method window.getComputedStyle retrieves the CSS max-height property containing an unresolved calc() function

Has anyone encountered a challenge with a function related to Angular in their project? Here is a snippet of the code causing issues: console.log(window.getComputedStyle(this.frontLayer.nativeElement).maxHeight); And within the component template: <di ...

Utilize JSON FabricJS to incorporate image data seamlessly

Currently, I am working with the FabricJS canvas and my goal is to export the canvas as JSON. I have experimented with loading images using both new fabric.Image and fabric.Image.fromURL, and both methods have worked well for me. My next task is to obtai ...

How can I retrieve properties from a superclass in Typescript/Phaser?

Within my parent class, I have inherited from Phaser.GameObjects.Container. This parent class contains a property called InformationPanel which is of a custom class. The container also has multiple children of type Container. I am attempting to access the ...

Improving Javascript Arrays for Easier Reading

A dataset has been organized into a table format as shown below: +------+---------+----+----+----+----+-------+----------+ | Year | Subject | A | B | C | F | Total | PassRate | +------+---------+----+----+----+----+-------+----------+ | 2015 | Maths ...

Understanding Variables in Javascript Tutorial

After diving into the tutorials here, I find myself struggling to grasp some elements of this example. Why is the variable initialized as an empty string and what does the ,i signify? var x="",i; Furthermore, why the need for x=x at the start of the l ...

Experiencing issues with npm while debugging: Error code ELIFECYCLE and error number 1 have occurred

Seeking guidance on troubleshooting this compiler error: npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! ******@1.1.0 dev: `NODE_ENV=development ts-node ./src/server.ts` npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the ******@1.1.0 dev script. n ...

Learn how to keep sessionStorage state synchronized across ReactJS components

Within my application, there is a React component responsible for displaying a list of numbers while also keeping track of the total sum of these numbers using sessionStorage. Additionally, another component provides an <input /> element to enable u ...

"Emulate the social sharing capabilities of CNET with interactive share

I remember a while ago, CNET had these amazing Social Share buttons that, when clicked, would reveal a "dropdown box" with the social network share dialog. Does anyone know how they achieved that? I've searched but couldn't find any information ...

JavaScript is reliant on the presence of the alert() function to properly function

I have a JavaScript function that performs well, except for when I remove or comment out the alert() line. This function is designed to calculate the sum of values in up to 30 fields if they are present and contain a value. Here is an example of the HTML ...

Enhance the contrast of the fab button by incorporating a background color

Utilizing Angular's material implementation, I have incorporated the fab button with a tooltip function. While it functions well, my goal is to achieve a design similar to that of Google's calendar app on Android. Is there a way to customize the ...

Tips for modifying date format in Angular 8

My datepicker for a date column is displaying the incorrect date format after submission. I am looking to change this format to the correct one. I am working with bsConfig bootstrap in Angular 8, but I am unsure of how to modify the date format. The back ...

Make TR element vanish when an Ajax call is made

I have implemented bootbox to generate a modal window with the following code: $("a.delete").on("click", function() { var id = $(this).attr('id').replace('item_', ''); var parent = $(this).parent().parent(); var t ...

Struggling with customizing the style of react mui-datatables version 4

Currently, I am utilizing "mui-datatables": "^4.2.2", "@mui/material": "^5.6.1", and have attempted to customize the styling in the following manner: Refer to the Customize Styling official documentation for more details // CUSTOMIZING MUI DATATABLES imp ...

Tips for implementing cellRenderer in ag-grid table using React JS

Using the react js ag-grid method, I created a table and then passed my json data into the React table. The json file data is as follows: { "posts": [{ "cam1": "3 persons, 1 car, 1 bottle, 2 chairs, 1 tv", "cam ...

Converting a string into an array of objects using Angular TypeScript

Can anyone help me with converting the following string into an array of objects? {"Car": "[" {"Carid":234,"CompanyCode":null}"," {"Carid":134,"CompanyCode":"maruti"}"," {"Carid":145,"CompanyCode":"sedan"}"," "]" } I attempted using JSON.parse, ...

Executing keyboard event in JavaScript that is recognized by pynput

Currently, I am utilizing Python's Bottle framework to run a website and have implemented the keyboard listener from the pynput package. The listener halts when the delete key is pressed, but I am looking to add functionality that allows the listener ...

Retrieving a sentence from a document using the Stanford Open IE triplet and converting it into Json format

I have a JSON file containing Stanford OpenIE triplets and I am looking to extract a particular sentence from a text file based on these triplets. "openie": [ { "subject": "We", "subjectSpan": [0, 1], "relation": "drive back to", ...

Complete guide to resetting every component in Vue.js

I'm attempting to trigger a reset of my component whenever the route changes: beforeRouteUpdate (to, from, next) { Object.assign(this.$data, this.$options.data()) console.log(to.query); next(); } Unfortunately, my current imple ...

Converting JSON to PHP: Extracting a targeted value from a multidimensional array

I am currently implementing the use of TheMovieDatabase API to extract relevant information for my script. Successfully, I have decoded the output with: $data['moviecrew'] = json_decode($movie_crew); As a result, the $data['moviecrew' ...

Refresh the calendar to retrieve updated information

Utilizing the "events" elements of fullcalendar to retrieve data dynamically has been successful so far and I am satisfied with it. However, I am facing a challenge in passing a GET/POST parameter to the PHP page and refreshing the call to incorporate the ...