Formatting a date string to be suitable for Google calendar as argument

I have a string that represent a data like 2014-July-2014. I am formatting this date in javacript so that I can use it as an argument for Google calendar chart.


var x = "2014-July-12";

var splitted = x.spilt('-');
// to get "2014" at index [0], "July" at index [1] and "12" at index [2].

I then use a key value array to get the months in number. Then I populate Google calendar data table with..

data.addRow([new Date(ParseInt("splitted[0]"),months.splitted[1], ParseInt("splitted[2]")), dataValues[i].Value]);

I use ParseInt() to convert from string to numbers since new Date(yyy,mm,dd) taks only integers as arguments. I cannot get this calendar working. I searched a lot on the net but cannot find a good example of how to populate Google calendar calendar chart from json file.

Can you guys take a look and guide me how to do this task and explain were i'm wrong. Thanks in advance.

Draw Calendar Chart Function

function drawCalendarChart(jsonObj) {

    var dataValues = eval(jsonObj)
       var data = new google.visualization.DataTable(dataValues);
       data.addColumn({ type: 'date', id: 'Date' });
       data.addColumn({ type: 'number', id: 'Reports' });

       for (var i = 0; i < dataValues.length; i++) {

           var date = new Date(dataValues[i].Date);
           var year = date.getFullYear(), month = (date.getMonth() + 1), day = date.getDate();
           if (month < 10) month = "0" + month;
           if (day < 10) day = "0" + day;
           var Formatted = "" + year + "," + month + "," + day;
           //           data.addRow([new Date(dataValues[i].Date), dataValues[i].Frequencies]);
           data.addRow([new Date(Formatted), dataValues[i].Frequencies]);
       var options = {
         title: "Calendar Chart",
         height: 350
       var chart = new google.visualization.Calendar(document.getElementById('chart'));

       chart.draw(data, options);
       var table = new google.visualization.Table(document.getElementById('table'));
       table.draw(data, { showRowNumber: true });

I added the function i'm using to draw the chart. The data is giving a NaN,NaN error. The frequency is getting the right values. So it must be related to date formatting. This is the test string i'm using.

        "Date": "2014-January-15",
        "Frequencies": 11
        "Date": "2014-January-8",
        "Frequencies": 22
        "Date": "2014-January-10",
        "Frequencies": 11



Keep it simple, this should work:

data.addRow([ new Date(dataValues[i].Date), dataValues[i].Frequencies ]);


It worked for me, here you have a working fiddle with the code.


Here is how you can convert your string date values to numbered date.

var date = new Date("12-January-2014");
var year = date.getFullYear(), month = (date.getMonth() + 1), day = date.getDate();
if (month < 10) month = "0" + month;
if (day < 10) day = "0" + day;

var Formatted = "" + year+"," + month+"," + day;


  var vt=  new Date(year, month, day);


Now you can use this variables in data function as needed.

Here is code

Hope it helps..!!!


Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.