Problem viewing graph in IE
5 views
Skip to first unread message
pooja
Nov 6, 2009, 12:34:19 AM11/6/09
to Google Visualization API, sma...@google.com
Hi,
I am using the gviz api to generate graphs. My graphs have a date
column having date format as
'yyyy-mm-dd'. When i view my graph in IE the date format seems to be
corrupted.
But when i view the same graph in google chrome, it works perfectly
fine.
Kindly let me know your comments and suggestions on the same.
Below is the sample code of my graph.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/
>
<title>Gviz Graph</title>
<script type="text/javascript" src="http://www.google.com/jsapi"></
script>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['barchart']});
</script>
<script type="text/javascript">
function drawVisualization() {
var formatter = new google.visualization.NumberFormat
({groupingSymbol: ',' , fractionDigits : '0'});
var data = new google.visualization.DataTable();
data.addColumn('date', 'EVENT_DATE');
data.addColumn('number', 'DFA_IMPS');
data.addColumn('number', 'DFP_IMPS');
data.addRows(1);
var date_val = new Date("2009-11-01");
data.setCell(0, 0, date_val);
data.setCell(0, 1,30481590492);
data.setCell(0, 2,49338888974);
data.addRows(1);
var date_val = new Date("2009-10-01");
data.setCell(1, 0, date_val);
data.setCell(1, 1,238928748407);
data.setCell(1, 2,377225113104);
data.addRows(1);
var date_val = new Date("2009-09-01");
data.setCell(2, 0, date_val);
data.setCell(2, 1,225369020679);
data.setCell(2, 2,357810183621);
data.addRows(1);
var date_val = new Date("2009-08-01");
data.setCell(3, 0, date_val);
data.setCell(3, 1,201064215060);
data.setCell(3, 2,343421832280);
data.addRows(1);
var date_val = new Date("2009-07-01");
data.setCell(4, 0, date_val);
data.setCell(4, 1,188644202988);
data.setCell(4, 2,346381410462);
data.addRows(1);
var date_val = new Date("2009-06-01");
data.setCell(5, 0, date_val);
data.setCell(5, 1,211154917361);
data.setCell(5, 2,342277890799);
data.addRows(1);
var date_val = new Date("2009-05-01");
data.setCell(6, 0, date_val);
data.setCell(6, 1,184517836451);
data.setCell(6, 2,330018766635);
data.addRows(1);
var date_val = new Date("2009-04-01");
data.setCell(7, 0, date_val);
data.setCell(7, 1,176049251133);
data.setCell(7, 2,309098980904);
data.addRows(1);
var date_val = new Date("2009-03-01");
data.setCell(8, 0, date_val);
data.setCell(8, 1,194999512543);
data.setCell(8, 2,328881674501);
data.addRows(1);
var date_val = new Date("2009-02-01");
data.setCell(9, 0, date_val);
data.setCell(9, 1,156026362040);
data.setCell(9, 2,298341118559);
formatter.format(data , 1);
formatter.format(data , 2);
new google.visualization.BarChart(document.getElementById
('visualization')).
draw(data, null);
}
google.setOnLoadCallback(drawVisualization);
</script>
</head>
<body style="font-family: Arial;border: 0 none;">
<div id="visualization" style="width: 1000px; height: 600px;"></
div>
</body>
</html>
I am using the gviz api to generate graphs. My graphs have a date
column having date format as
'yyyy-mm-dd'. When i view my graph in IE the date format seems to be
corrupted.
But when i view the same graph in google chrome, it works perfectly
fine.
Kindly let me know your comments and suggestions on the same.
Below is the sample code of my graph.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/
>
<title>Gviz Graph</title>
<script type="text/javascript" src="http://www.google.com/jsapi"></
script>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['barchart']});
</script>
<script type="text/javascript">
function drawVisualization() {
var formatter = new google.visualization.NumberFormat
({groupingSymbol: ',' , fractionDigits : '0'});
var data = new google.visualization.DataTable();
data.addColumn('date', 'EVENT_DATE');
data.addColumn('number', 'DFA_IMPS');
data.addColumn('number', 'DFP_IMPS');
data.addRows(1);
var date_val = new Date("2009-11-01");
data.setCell(0, 0, date_val);
data.setCell(0, 1,30481590492);
data.setCell(0, 2,49338888974);
data.addRows(1);
var date_val = new Date("2009-10-01");
data.setCell(1, 0, date_val);
data.setCell(1, 1,238928748407);
data.setCell(1, 2,377225113104);
data.addRows(1);
var date_val = new Date("2009-09-01");
data.setCell(2, 0, date_val);
data.setCell(2, 1,225369020679);
data.setCell(2, 2,357810183621);
data.addRows(1);
var date_val = new Date("2009-08-01");
data.setCell(3, 0, date_val);
data.setCell(3, 1,201064215060);
data.setCell(3, 2,343421832280);
data.addRows(1);
var date_val = new Date("2009-07-01");
data.setCell(4, 0, date_val);
data.setCell(4, 1,188644202988);
data.setCell(4, 2,346381410462);
data.addRows(1);
var date_val = new Date("2009-06-01");
data.setCell(5, 0, date_val);
data.setCell(5, 1,211154917361);
data.setCell(5, 2,342277890799);
data.addRows(1);
var date_val = new Date("2009-05-01");
data.setCell(6, 0, date_val);
data.setCell(6, 1,184517836451);
data.setCell(6, 2,330018766635);
data.addRows(1);
var date_val = new Date("2009-04-01");
data.setCell(7, 0, date_val);
data.setCell(7, 1,176049251133);
data.setCell(7, 2,309098980904);
data.addRows(1);
var date_val = new Date("2009-03-01");
data.setCell(8, 0, date_val);
data.setCell(8, 1,194999512543);
data.setCell(8, 2,328881674501);
data.addRows(1);
var date_val = new Date("2009-02-01");
data.setCell(9, 0, date_val);
data.setCell(9, 1,156026362040);
data.setCell(9, 2,298341118559);
formatter.format(data , 1);
formatter.format(data , 2);
new google.visualization.BarChart(document.getElementById
('visualization')).
draw(data, null);
}
google.setOnLoadCallback(drawVisualization);
</script>
</head>
<body style="font-family: Arial;border: 0 none;">
<div id="visualization" style="width: 1000px; height: 600px;"></
div>
</body>
</html>
Meera Bavadekar
Nov 6, 2009, 9:54:24 PM11/6/09
to Google Visualization API
Hi Pooja,
Try new Date(2009, 03, 01) instead of Date("2009-03-01")
This works.
-Meera Bavadekar
Try new Date(2009, 03, 01) instead of Date("2009-03-01")
This works.
-Meera Bavadekar
Pooja Sohni
Nov 9, 2009, 12:28:42 AM11/9/09
to google-visua...@googlegroups.com
It works
Thanks so much !!
--
"Impossible itself says - I'm Possible"
Regards
Pooja Sohnie
"Impossible itself says - I'm Possible"
Regards
Pooja Sohnie
Pooja Sohni
Nov 9, 2009, 8:07:37 AM11/9/09
to google-visua...@googlegroups.com
Hi ,
I fixed this but found another issue. The graph which i generated below seems to be having dates ahead by a month . Like for example the Date("2009-03-01") seems to be represented as
April 1, 2009 when it should be March 1,2009.
When i looked at the api i found that the month range to the Date function is between ( 0 and 11) when generally it is between 1 and 12.
Kindly let us know your comments on the same
Thanks in advance
Pooja.
Meera Bavadekar
Nov 10, 2009, 9:25:39 AM11/10/09
to Google Visualization API
It probably follows numbering style as C/C++ or Java. The index always
start from 0.
-Meera Bavadekar
start from 0.
-Meera Bavadekar
Reply all
Reply to author
Forward
0 new messages