简体   繁体   中英

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.

Eg

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 ]);

UPDATE

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;

EDIT

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

  alert(vt);

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

Here is code

Hope it helps..!!!

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM