The AreaChart in Google is displaying incorrect dates on the axis

I have encountered an issue that I am struggling to resolve. I am in the process of creating a Google Area Chart using a JSON response from a server, specifically with date type columns.

Below is the JSON data obtained from the server (copy/paste), organized by date:

{
    "cols": [
        {"id":"1", "label":"Dates", "pattern":"", "type":"date"},
        {"id":"2", "label":"Rate", "pattern":"", "type":"number"}
    ],
    "rows": [
        {
            "c": [
                {"v":"Date(2016,01,23)"},
                {"v":1}
            ]
        },
       (additional rows included)
    ]
}

Despite no apparent errors in the data, the final graph displays some unexpected behavior as certain dates, like Date(2016,1,23) and those in February, are being incorrectly transformed into March.

Strangely enough, when I adjust all the dates by shifting them one month forward, the graph reacts appropriately.

{
    "cols": [
       (updated list of cols)
    ],
    "rows": [
       (updated rows mapping)
    ]
}

A graph depicting the correct behavior can be found here: https://i.stack.imgur.com/BVqzP.png

Any insights on what might be causing this discrepancy? I have verified the order of the dates and tried different browsers, yet the problem persists even when using LineChart instead of AreaCharts.

EDIT

Upon further investigation, I discovered that the issue lies not with the graph itself but with how the JSON response is being parsed.

Utilizing AngularJS, I noticed that all the Date values are automatically parsed but with incorrect months.

To address this, I took a temporary solution by modifying the parsing method as follows:

$http({
            method: 'GET',
            url: url_to_server,
            transformResponse: [function (data) {
            return data; \\ returning unparsed response
        }]
        }).success(function (data) {

            data = JSON.parse(data, dateTimeReviver);


        });

The `dateTimeReviver` function used for parsing is defined as:

var dateTimeReviver = function (key, value) {

if (typeof value === 'string') {

    if(value.indexOf('Date(') > -1){

        return eval(value);

    }

}
return value;

}

In order to make this workaround effective, I had to alter the server's response to follow the "new Date(2016,01,23)" format. While this solution works for now, it may not be the most elegant or optimal approach. Any suggestions on improving this would be greatly appreciated.

Answer №1

Can you provide more information? What specific options are being used?
It seems to be working well here, added a point size for better visibility

Date(2016,01,23) is displaying correctly...

google.charts.load('current', {
  callback: function () {
    var data = new google.visualization.DataTable({
        "cols": [
            {"id":"1", "label":"Dates", "pattern":"", "type":"date"},
            {"id":"2", "label":"Rate", "pattern":"", "type":"number"}
        ],
        "rows": [
            {
                "c": [
                    {"v":"Date(2016,01,23)"},
                    {"v":1}
                ]
            },
            {
                "c": [
                    {"v":"Date(2016,01,24)"},
                    {"v":1}
                ]
            },
            {
                "c": [
                    {"v":"Date(2016,01,26)"},
                    {"v":1}
                ]
            },
            {
                "c": [
                    {"v":"Date(2016,02,06)"},
                    {"v":1}
                ]
            },
            {
                "c": [
                    {"v":"Date(2016,02,09)"},
                    {"v":2}
                ]
            },
            {
                "c": [
                    {"v":"Date(2016,02,11)"},
                    {"v":1}
                ]
            },
            {
                "c": [
                    {"v":"Date(2016,02,15)"},
                    {"v":1}
                ]
            },
            {
                "c": [
                    {"v":"Date(2016,02,17)"},
                    {"v":1}
                ]
            },
            {
                "c": [
                    {"v":"Date(2016,02,19)"},
                    {"v":2}
                ]
            },
            {
                "c": [
                    {"v":"Date(2016,02,27)"},
                    {"v":4}
                ]
            },
            {
                "c": [
                    {"v":"Date(2016,02,28)"},
                    {"v":2}
                ]
            },
            {
                "c": [
                    {"v":"Date(2016,03,02)"},
                    {"v":1}
                ]
            },
            {
                "c": [
                    {"v":"Date(2016,03,03)"},
                    {"v":2}
                ]
            },
            {
                "c": [
                    {"v":"Date(2016,03,09)"},
                    {"v":1}
                ]
            },
            {
                "c": [
                    {"v":"Date(2016,03,13)"},
                    {"v":1}
                ]
            },
            {
                "c": [
                    {"v":"Date(2016,03,14)"},
                    {"v":1}
                ]
            },
            {
                "c": [
                    {"v":"Date(2016,03,17)"},
                    {"v":5}
                ]
            },
            {
                "c": [
                    {"v":"Date(2016,03,21)"},
                    {"v":2}
                ]
            },
            {
                "c": [
                    {"v":"Date(2016,03,28)"},
                    {"v":2}
                ]
            },
            {
                "c": [
                    {"v":"Date(2016,03,29)"},
                    {"v":1}
                ]
            },
            {
                "c": [
                    {"v":"Date(2016,04,01)"},
                    {"v":1}
                ]
            },
            {
                "c": [
                    {"v":"Date(2016,04,03)"},
                    {"v":1}
                ]
            },
            {
                "c": [
                    {"v":"Date(2016,04,05)"},
                    {"v":1}
                ]
            },
            {
                "c": [
                    {"v":"Date(2016,04,29)"},
                    {"v":1}
                ]
            },
            {
                "c": [
                    {"v":"Date(2016,04,30)"},
                    {"v":4}
                ]
            }
        ]
    });

    var container = document.getElementById('chart_div');
    var chart = new google.visualization.AreaChart(container);
    chart.draw(data, {pointSize: 5});
  },
  packages: ['corechart']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

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

Shorten a string once a particular word is found in either Smarty or JavaScript/jQuery

I'm currently working on a website and encountering a minor bug related to the addition of content at the end of some strings. For instance: style="background-image:url({$sub.image});" displays style="background-image:url(http://blablalba.fr/phoenix ...

Ways to showcase JSON data with jQuery

My code displays movie data from a JSON variable and populates it on a dropdown list based on the selected city. I aim to include show timings along with other details from the JSON content. The code snippet is as follows: $(document).ready(function() ...

TinyMCE - Optimal Approach for Saving Changes: keyup vs onChange vs blur

In the context of my Filemaker file, I am utilizing the TinyMCE editor. My goal is to automatically save any changes made by the user, whether it's typing, applying formatting, inserting an image, or making any other modifications. I have a function ...

Creating dynamic components in Vue.js using VueJS and jQuery synergistically

New to Vue.js and in the process of building a Vue component inspired by this custom select menu. I want to include an ionicon with each list item. Typically, I can add the icon in Vue.js using: <component class="icon" :is="name-of-icon& ...

"Implementing a column template in jqgrid post-creation: A step-by-step

Can't apply column template with Free jqgrid once it's been created. I've attempted: var newOrderPriceTemplate = { align: "center", formatter: "showlink", formatoptions: { onClick: function() { alert('clicked&apos ...

Obtaining the mouse position in JavaScript in relation to the website, preferably without relying on jQuery

I came across this code snippet on Ajaxian, but I am having trouble using cursor.y (or cursor.x) as a variable. When I call the function with it that way, it doesn't seem to work. Could there be a syntax issue or something else causing the problem? f ...

The accordion seems to be stuck in the open position

Working on a website, I encountered a frustrating bug with an accordion feature. When clicking on the arrow, the accordion opens and closes smoothly. However, when attempting to close it by clicking on the title, the accordion bounces instead of closing p ...

The visibility of the AmCharts' OLHC chart is compromised

Here is my unique StockGraph object: "stockGraphs": [ { "id": "g5", "title": "anotherText", "precision": 4, "openField": "open2", "closeField": "close2", "highField": "high2", "lowField": "low2", ...

What is the most efficient way to calculate the current percentage of time that has elapsed today

Is there a way to calculate the current time elapsed percentage of today's time using either JavaScript or PHP? Any tips on how to achieve this? ...

Suggested Id Best Practices for JSON API Resources

According to JsonAPI, the recommended type for "id" is a string. identification Every resource object MUST contain an id member and a type member. The values of the id and type members MUST be strings. Why is it important to keep the "id" as a string? S ...

How to center items within a Toolbar using React's material-ui

I need help with implementing a toolbar on a page that contains three ToolbarGroup components: <Toolbar> <ToolbarGroup firstChild={true} float="left"> {prevButton} </ToolbarGro ...

Pressing the reset button will restore the table to its original

As a new React developer with experience mainly in hooks, I have been struggling to find a good example involving hooks. Currently, I am working on implementing an antd table with search functionality. My question is, when a user types something into the ...

Holding off on completing a task until the outcomes of two parallel API requests are received

Upon page load, I have two asynchronous API calls that need to be completed before I can calculate the percentage change of their returned values. To ensure both APIs have been called successfully and the total variables are populated, I am currently using ...

Despite setting allowHalfOpen to True, Node.js: Client still disconnects from Server

I've been working on a Node.js script that involves creating a server if a specific port is available, or connecting to an existing server if the port is already in use. To achieve this, I am using a recursive approach based on a reference from this l ...

Why won't the div move when I click it?

Could you please explain why my JavaScript code isn't functioning as expected? The intended behavior is for the 'mark' div to move to the current mouse coordinates upon clicking within the map. ...

Transfer information from the client to the server using AJAX and PHP by

When attempting to post a JavaScript variable called posY to a PHP file, an error occurred with the message: Notice: Undefined index: data in C:\xampp\htdocs\Heads_in_the_clouds\submitposY.php The posY variable is defined in the JavaSc ...

Display Material checkbox based on a condition

I have integrated Material UI into my React application to dynamically display text and other information by using JSON data. { "included": [{ "name": "someName", "price": "0", "required": true } ...

What is the best way to create a mirrored effect for either a card or text using CSS

Can anyone assist me with this CSS issue? When I hover over to view the movie details, the entire word flips along with it. Is there a way to make only the word flip initially, and then have it return to normal when hovered? The HTML code is included belo ...

Updating the progress bar without the need to refresh the entire page is

Currently, I have two PHP pages: page.php and loader.php. Loader.php retrieves data from MySQL to populate a progress bar, while page.php contains a function that refreshes loader.php every second. This setup gets the job done, but it's not visually a ...

What is the best way to establish a default selection in Angular?

After retrieving JSON data from the server, it looks something like this: $scope.StateList = {"States": [ { "Id": 1, "Code": "AL", "Name": "Alabama" }, { "Id": 2, "Code": "AK", "Name": "Alask ...