Formatting date and time in Google Chart

Question

Formatting date and time in Google Chart

I am trying to utilize the Google Chart API to create a line chart. I need to retrieve data through an AJAX method and then set this data to the chart using a JavaScript JSON array. However, I am encountering difficulties with the datetime format within this process. Furthermore, the data obtained from AJAX is in string format that is generated from PHP. I am parsing this returned string into a JSON array which will be used as the chart data.

 v1 = '{"Date(2023, 1, 1, 20, 00, 00)", ... }'; # returned string from AJAX
 v1 = jQuery.parseJSON(v1);

 data = new google.visualization.DataTable();
 data.addColumn('datetime', 'Time');
 data.addColumn({...something else...});
 data.addRows(v1);

 options = { ... };
 chart = new google.visualization.LineChart(document.getElementById('linechart_material'));
 chart.draw(data, options);

When attempting to use the

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

constructor (referencing theGoogle "Date String Representation" method) as the first element of the v1 array, I encounter the following error message in the console:

Unhandled Promise Rejection: Error: Type mismatch. Value Date(2023, 1, 1, 20, 00, 00) does not match type datetime in column index 0

What is the correct way to prepare datetime values in a JSON array for use with the Google Chart API?

javascript json google-visualization

Answer 1

Answer №1

In order for google's "Date String Representation" method to work effectively, the JSON format must be structured correctly when passing it to the data table constructor.

Check out the following snippet to see a working example:

The JSON data needs to adhere to a specific format, which is outlined below,
You can also find more information here: Format of the Constructor's JavaScript Literal data Parameter

It should be noted that there is a misleading example on their page where they unnecessarily use the new keyword before the date value.

Essentially, your JSON should have keys for rows and columns to ensure proper formatting...

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {

  var jsonData = {
      "cols": [
        {"label": "datetime", "type": "date"},
        {"label": "value", "type": "number"}
      ],
      "rows": [
        {"c":[{"v": "Date(2023, 1, 1, 0, 0, 0)"}, {"v": 1}]},  // = Feb 1, 2023 (month number index is zero-based)
        {"c":[{"v": "Date(2023, 1, 2, 0, 0, 0)"}, {"v": 2}]},
        {"c":[{"v": "Date(2023, 1, 3, 0, 0, 0)"}, {"v": 3}]},
      ]
  };
  
  var dataTable = new google.visualization.DataTable(jsonData);
  
  console.log('data table rows', dataTable.getNumberOfRows());  
  console.log('row 1 date', dataTable.getValue(0, 0));  
});

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

Find more details here: https://developers.google.com/chart/interactive/docs/datesandtimes#dates-and-times-using-the-date-string-representation

When using the JavaScript DataTable object literal notation to serialize data for creating your DataTable, avoid using the new Date() constructor. Instead, Google Charts offers a Date string representation that enables proper serialization and parsing of dates or datetimes during DataTable creation. This Date string format excludes the new keyword and encloses the expression in quotation marks:

"Date(Year, Month, Day, Hours, Minutes, Seconds, Milliseconds)"

Answer 2

In order for google's "Date String Representation" method to work effectively, the JSON format must be structured correctly when passing it to the data table constructor.

Check out the following snippet to see a working example:

The JSON data needs to adhere to a specific format, which is outlined below,
You can also find more information here: Format of the Constructor's JavaScript Literal data Parameter

It should be noted that there is a misleading example on their page where they unnecessarily use the new keyword before the date value.

Essentially, your JSON should have keys for rows and columns to ensure proper formatting...

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {

  var jsonData = {
      "cols": [
        {"label": "datetime", "type": "date"},
        {"label": "value", "type": "number"}
      ],
      "rows": [
        {"c":[{"v": "Date(2023, 1, 1, 0, 0, 0)"}, {"v": 1}]},  // = Feb 1, 2023 (month number index is zero-based)
        {"c":[{"v": "Date(2023, 1, 2, 0, 0, 0)"}, {"v": 2}]},
        {"c":[{"v": "Date(2023, 1, 3, 0, 0, 0)"}, {"v": 3}]},
      ]
  };
  
  var dataTable = new google.visualization.DataTable(jsonData);
  
  console.log('data table rows', dataTable.getNumberOfRows());  
  console.log('row 1 date', dataTable.getValue(0, 0));  
});

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

Find more details here: https://developers.google.com/chart/interactive/docs/datesandtimes#dates-and-times-using-the-date-string-representation

When using the JavaScript DataTable object literal notation to serialize data for creating your DataTable, avoid using the new Date() constructor. Instead, Google Charts offers a Date string representation that enables proper serialization and parsing of dates or datetimes during DataTable creation. This Date string format excludes the new keyword and encloses the expression in quotation marks:

"Date(Year, Month, Day, Hours, Minutes, Seconds, Milliseconds)"

Formatting date and time in Google Chart

Answer №1

Similar questions

Struggles with loading order in Knockout.JS

Vue component lifecycle hook to fetch data from Firebase

What's the best way to transform a dictionary into a unicode JSON string?

The easiest way to set Access-Control-Allow-Origin in ASP.Net MVC

Create a specific website link for searching on YouTube

Employing jq to transfer the value of a child property to the parent dictionary

Instructions for passing the chosen value to Django

Performing a PHP loop to concatenate the latest database entries

Feeling uncertain about how to utilize AJAX using the XMLHttpRequest object

Service Worker's fetch event is not triggered upon registering the service worker

Creating dynamic elements in JavaScript utilizing Bootstrap cards

Setting the button value to a textbox and refreshing the status information (Codeigniter)

Transform JSON into SOAP XML format using specific namespaces already provided

Showing dummy data in demo mode with an AngularJS table

React Hook Form: When Submitting, Transform Date Object into String Date within an Array

How can you use Knex to order the results for each WHERE clause in a SELECT query?

What is the process for customizing the default animation in the Dialog component?

Changing text content of an element with dynamic formatting

Constructor-generated element doesn't reflect changes upon component re-rendering

What steps should I take to resolve the "You do not have authorization to access this directory or page" error in Azure App Services?