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

A helpful guide on presenting chart data in HTML table format using Chart.js

Is there a way to convert chart data into an HTML table upon button click using Chart.js? I have successfully created a line chart with Chart.js, with the x-axis representing colors and the y-axis representing votes and points. Here is a link to a workin ...

Using webpack to access a bundled React class in an HTML file

Is there a way to access pre-built components directly within the HTML file that links to the build? I've been attempting the following - Inside bundle.js var React = require('react'); var ReactDOM = require('react-dom'); ...

Controller method remains inaccessible despite multiple attempts with Javascript ajax Get call

I've tried numerous solutions for this issue, but I'm still unable to make it work. My goal is to invoke a controller method that accepts a parameter and returns a string based on that parameter. Despite using an ajax GET request, the outcome is ...

What is the best way to transfer the $http response value to another function?

I currently have these two functions set up. One function, $scope.submit, handles posting data to the server and capturing the response value. The other function, $scope.addTeams, is responsible for adding teams based on the response from $scope.submit. ...

How to pass a method from a child component to a parent component in Vue.js

Does anyone know how to pass a function from the child component to the parent component? I have a modal in the parent component with cancel and submit buttons. When either button is clicked, I want to close the child component. I tried setting "show" in t ...

I need help on correctly retrieving the ng-model value in a controller when using it with the contenteditable directive

I've attempted using ng-change, ng-keypress, ng-keyup, and ng-keydown for this issue. Using ng-change, the ng-model value is being updated in the controller but not reflecting on the front end. However, with the other three methods, the value displa ...

How come the likes are not being refreshed when the button is clicked in my mongoose schema?

I am currently working on an express app using nodejs and mongoose. My main goal is to implement a JavaScript function that can update the number of likes on a post in a database directly from my ejs file. However, I have encountered troubles with this tas ...

The most basic method for monitoring changes in an object

An application needs to immediately update all clients with a large object when it changes. What is the most basic method to monitor changes in a Node.js object? Consider the following object: var obj = { num: 3, deep: { num: 5 } } A functi ...

Determine which file to load based on the size of the browser

I have a quick question regarding the correct syntax. I am trying to only load the jQuery file if the browser screen width is less than 1100px. <script type="text/javascript"> $(document).ready(function() { if ($(window).width() < 1100) { ...

Difficulty adding extra arguments to a function

I am currently working on a function in d3 that aims to evaluate the "time" of my data and determine if it falls within specific time intervals. This will then allow me to filter the data accordingly. //begin with a function that checks if the time for eac ...

Expand and Collapse Button for Customizing Table Height Individually

I trust everything is going smoothly. A challenge I'm facing involves implementing a button to expand a specific row within a table. Currently, clicking the "show more/show less" button extends all rows when the goal is to do it for each individual ta ...

When the button is not clicked, the function method gets invoked in React

When I call the initiateVideoCall method first and have a button called turnOff, it seems to load first without clicking the button. I'm having trouble understanding the issue here. Can someone please help me? Thanks in advance. const constraints = {& ...

Tips on programmatically filtering angular lists

Is there a way to programmatically filter an Angular list? I'm currently working on a project where I need to filter subcategories by clicking on categories. For example, when clicking on "Drinks," I want to display items like Coke, Fanta, Pepsi... ...

The integration between Javascript, PHP, and SQL Server does not display the retrieved data

I am a beginner in PHP and have limited knowledge of Javascript. I am attempting to create a chronometer where the time limit is retrieved from a SQL SERVER database. However, when I assign the value obtained in PHP to a Javascript variable, it returns -1. ...

I'm getting a "module not found" error - what's the solution?

const { getIo } = require('services/socketio'); const restful = require('utils/restful'); const publicApiService = require('services/publicApi'); const accessTokenMiddleware = require('middleware/accessToken'); const ...

Automatically append version number to requests to avoid browser caching with Gulp

When deploying my project, I utilize gulp to build the source files directly on the server. In order to avoid caching issues, a common practice is to add a unique number to the request URL as explained in this article: Preventing browser caching on web app ...

Tips for creating a TypeScript-compatible redux state tree with static typing and immutability:

One remarkable feature of TypeScript + Redux is the ability to define a statically typed immutable state tree in the following manner: interface StateTree { readonly subState1: SubState1; readonly subState2: SubState2; ...

Adding as HTML in Angular

I am looking to insert HTML content dynamically in Angular <div class="storycontent" ng-class="{show: show}"> <a href="#/profile?{{review.id}}">{{review.name}}</a>: {{review.story}} </div> Within the {{review.story}}, there ...

Error: Firebase has encountered a network AuthError, which could be due to a timeout, interrupted connection, or an unreachable host. Please try again later. (auth/network-request-failed

I have set up my Angular app to utilize Firebase's emulators by following the instructions provided in this helpful guide. In my app.module.ts, I made the necessary configurations as shown below: import { USE_EMULATOR as USE_AUTH_EMULATOR } from &apos ...

Displaying JSON data from user posts in a React Native app

Hey there, I'm currently facing an issue while working on my React Native project where the data fetched from my Rails API is displaying in the log but showing up as blank in React Native. Not quite sure what mistake I might be making. Can anyone prov ...