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.