CODEWITHSUNDEEP
javascriptgoogle-visualization
php-b-grader
php-b-grader

Reputation: 3325

Google Charts API: Incorrect date being displayed

I have a strange issue that I'm baffled with but I'm sure someone in here will know what I'm doing wrong. All my dates are displaying incorrectly (i.e. June is displaying July, July is displaying August)

My code here:

// Load the Visualization API and the piechart package.
google.load('visualization', '1.0', {'packages':['corechart']});

// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawVisualization);

// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it.
function drawVisualization() {

    var chartTable = new google.visualization.DataTable();
    chartTable.addColumn('date', 'Date');
    chartTable.addColumn('number', 'Sell');
    chartTable.addColumn('number', 'GP');
    chartTable.addRows(6);

    chartTable.setValue(0, 0, new Date( 2011, 06, 22 ));
    chartTable.setValue(0, 1, 1316.90);
    chartTable.setValue(0, 2, 456.05);
    chartTable.setValue(1, 0, new Date( 2011, 06, 21 ));
    chartTable.setValue(1, 1, 1793.70);
    chartTable.setValue(1, 2, 531.10);
    chartTable.setValue(2, 0, new Date( 2011, 06, 20 ));
    chartTable.setValue(2, 1, 13559.25);
    chartTable.setValue(2, 2, 1337.75);
    chartTable.setValue(3, 0, new Date( 2011, 06, 17 ));
    chartTable.setValue(3, 1, 3034.15);
    chartTable.setValue(3, 2, 892.30);
    chartTable.setValue(4, 0, new Date( 2011, 06, 16 ));
    chartTable.setValue(4, 1, 568.45);
    chartTable.setValue(4, 2, 175.05);
    chartTable.setValue(5, 0, new Date( 2011, 06, 15 ));
    chartTable.setValue(5, 1, 7203.85);
    chartTable.setValue(5, 2, 1343.45);

    var date_formatter = new google.visualization.DateFormat({pattern: 'EEE, MMM-d'});
    date_formatter.format(chartTable, 0); // Apply format to first column of table

    var currency_formatter = new google.visualization.NumberFormat({prefix: '$'});
    currency_formatter.format(chartTable, 1); // Apply format to second column of chart
    currency_formatter.format(chartTable, 2); // Apply format to third column of chart

    // Create and draw the visualization.
    chart = new google.visualization.LineChart(document.getElementById('chart'));
    chart.draw(chartTable, {width: 900, height: 400, title: 'Sales Summary',
        vAxis: {maxValue: 20000, format: '$##,###', viewWindowMode: 'maximized'},
        hAxis: {direction: -1}
    });

Is displaying all data correctly EXCEPT the date - instead of displaying on the chart June it is displaying July??? Same days of the month but the month is wrong?

Upvotes: 8

Views: 5876

Answers (3)

Becalecca
Becalecca

Reputation: 203

I had the same issue, this thread helped me, thank you! I know this post is very old, but it was relevant to me, so in case it helps someone else in the future:

My fix for SQL Server was:SELECT cast(DATEADD(month,-1,[mydate]) as newdate And actually, for the format for the google annotation chart I was using, I had to format like this: replace(cast(DATEADD(month,-1,[mydate]) as date),'-', ',') as dateforJSON

Upvotes: 0

Justin Huss
Justin Huss

Reputation: 45

To build on wolv2012 response, I just ran into this problem: JS month-counting system is zero-based while MySQL returns months numbers between 1 and 12.

My date being formatted in SQL before it goes in the Javascript new Date(...), I compensate for this by appending a "-1" to my month number while still in SQL:

SELECT DATE_FORMAT(jobs.date, '%Y, %m-1, %d') ...

While this looks a little DIY to me, it definitely works.

Upvotes: 2

wolv2012
wolv2012

Reputation: 429

The javascript Date object begins counting months at 00, so 00 = January, 01 = February, etc... So when you construct your dates using '06' in the month field, it's actually the 7th month, or July

Upvotes: 18

Related Questions