Google column chart showing incorrect date

Question

I am working on google column chart. I have created 3 columns while generating charts. Here are those columns.

var dtblData = new google.visualization.DataTable();
dtblData.addColumn('string', 'Names');
dtblData.addColumn('datetime', 'Intime');
dtblData.addColumn('datetime', 'Outtime');

I am using following data to show on graph.

[{"display_name":"Aditi Badurkar ","in_time":{"year":2017,"month":6,"day":22,"hours":11,"minutes":7,"seconds":8,"miliseconds":470},"out_time":{"year":2017,"month":6,"day":22,"hours":12,"minutes":45,"seconds":44,"miliseconds":237}}]

Here is my code :-

google.charts.load('current', { 'packages': ['corechart', 'bar'] });
google.charts.setOnLoadCallback(drawStuff);

function drawStuff() {
    var chartDiv = document.getElementById('chart_div');
    var dtblData = new google.visualization.DataTable();
    dtblData.addColumn('string', 'Names');
    dtblData.addColumn('datetime', 'Intime');
    dtblData.addColumn('datetime', 'Outtime');

    for (var i = 0; i < data.length; i++) {
        if (data[i].out_time.year == 0) {
            dtblData.addRow([data[i].display_name, new Date(data[i].in_time.year, data[i].in_time.month, data[i].in_time.day, data[i].in_time.hours, data[i].in_time.minutes, data[i].in_time.seconds, data[i].in_time.miliseconds), null]);
        }
        else {
            dtblData.addRow([data[i].display_name, new Date(data[i].in_time.year, data[i].in_time.month, data[i].in_time.day, data[i].in_time.hours, data[i].in_time.minutes, data[i].in_time.seconds, data[i].in_time.miliseconds), new Date(data[i].out_time.year, data[i].out_time.month, data[i].out_time.day, data[i].out_time.hours, data[i].out_time.minutes, data[i].out_time.seconds, data[i].out_time.miliseconds)]);                                        
        }
    }

    var dateinFormat = new google.visualization.DateFormat({ formatType: 'long', pattern: "dd/MM/yyyy HH:mm:ss ZZZZ" });
    dateinFormat.format(dtblData, 1);
    var dateOutFormat = new google.visualization.DateFormat({ formatType: 'long', pattern: "dd/MM/yyyy HH:mm:ss ZZZZ" });
    dateOutFormat.format(dtblData, 2);

    var materialOptions = {
        //width: 900,
        chart: {
            title: '',
            subtitle: 'Intime, Outime of your kids or staff'
        },
        series: {
            0: { axis: 'In Time' }, // Bind series 0 to an axis named 'In Time'.
            1: { axis: 'Out time' } // Bind series 1 to an axis named 'Out Time'.
        },
        axes: {
            y: {
                distance: { label: 'In Time' }, // Left y-axis.
                brightness: { side: 'right', label: 'Out Time' }, // Right y-axis.
            }
        },                                    
    };

    function drawMaterialChart() {
        var materialChart = new google.charts.Bar(chartDiv);
        materialChart.draw(dtblData, google.charts.Bar.convertOptions(materialOptions));
    }
    drawMaterialChart();
}

My problem is, on graph it is showing month as July but in data it is June. I am not getting why it is showing wrong month when I scroll mouse pointer on bar? Can someone help me to solve this? I think it might be time zone issue. Please see screenshot.

Possible duplicate of [Google gantt chart shows wrong year](https://stackoverflow.com/questions/38677163/google-gantt-chart-shows-wrong-year) — WhiteHat, Jun 22 '17 at 12:36

score 0 · Answer 1 · answered Jun 22 '17 at 10:14

The Month in JavaScript is Zero Based, so ranges from 0 to 11 (0 meaning January and 11 meaning December).

For your code, you may decrement the month value by 1 to solve this.

Something that may be useful:

Why does the month argument range from 0 to 11 in JavaScript's Date constructor?

Google column chart showing incorrect date

1 Answers1