Getting "Container height is zero. Expecting a valid height." error trying to use annotated time line
769 views
Skip to first unread message
Marc
May 14, 2012, 8:38:21 AM5/14/12
to Google Visualization API
I'm trying to use the annotated timeline to display some results from
a performance test. I have done this one other time with good
results. That time, I used a php script on the server to generate all
the addColumn, addRow, and setCell methods for the DataTable. Since
there was a lot of data, that generated a multiple thousand line
javascript function. Looking at the documentation for DataTable, it
seemed like I would be better off to have a php script that got
called, and returned a JSON string to use to load the argument for the
DataTable constructor. However, when I did that, I got the error
listed in the subject. That error occurred when I tried to execute
the draw method of the AnnotatedTimeLine class.
I wrote a php script that would return a small subset of the data, so
I would have something I could work with a bit easier. It does
generate the same error.
So, here's the original html file:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://
www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=ISO-8859-1">
<title>Detail Performance Charts</title>
<script type="text/javascript" src="jquery.js"></script>
<script type='text/javascript' src='http://www.google.com/jsapi'></
script>
<script type="text/javascript" >
google.load('visualization', '1', {'packages':['annotatedtimeline']});
</script>
<script type='text/javascript' src='PerfMultiTestChart.js'></script>
</head>
<body>
<div id="chart_div" style="width: 800; height: 600"></div>
</body>
</html>
Here's the PerfMultiTestChart.js file it loads:
$(document).ready(function()
{
$.extend({
getUrlVars: function(){
var vars = [], hash;
var hashes =
window.location.href.slice(window.location.href.indexOf('?') +
1).split('&');
for(var i = 0; i < hashes.length; i++)
{
hash = hashes[i].split('=');
vars.push(hash[0]);
vars[hash[0]] = hash[1];
}
return vars;
},
getUrlVar: function(name){
return $.getUrlVars()[name];
}
});
google.setOnLoadCallback(getChartData);
});
function getChartData()
{
var reqURL = "helpers/getMultiTestData.php?stats=" +
$.getUrlVar('stats');
$.getJSON(reqURL, chartData);
}
function chartData(data)
{
var options =
{ 'displayAnnotations':false,'displayLegendValues':false,'legendPosition':'newRow','scaleType':'maximized' };
var chartData = new google.visualization.DataTable(data);
var chart = new
google.visualization.AnnotatedTimeLine(document.getElementById("chart_div"));
chart.draw( chartData,options);
}
Finally, I copied the JSON string returned from getMultiTestData.php,
and ran it through jsonlint.com. That indicated the JSON was valid,
and reformatted it so that it was more readable. Here it is:
{
"cols": [
{
"type": "datetime"
},
{
"type": "number",
"label": "1268"
},
{
"type": "number",
"label": "1213"
}
],
"rows": [
{
"c": [
"14 May 2012 12:19:04",
12.6900498,
{}
]
},
{
"c": [
"14 May 2012 12:19:12",
{},
19.2097511
]
},
{
"c": [
"14 May 2012 12:19:15",
0.802081,
{}
]
},
{
"c": [
"14 May 2012 12:19:23",
{},
0.7648078
]
},
{
"c": [
"14 May 2012 12:19:26",
0.7456392,
{}
]
},
{
"c": [
"14 May 2012 12:19:34",
{},
0.6042936
]
},
{
"c": [
"14 May 2012 12:19:37",
0.6983837,
{}
]
},
{
"c": [
"14 May 2012 12:19:39",
{},
0.8682235
]
},
{
"c": [
"14 May 2012 12:19:39",
0.8991349,
{}
]
},
{
"c": [
"14 May 2012 12:19:44",
{},
0.727205
]
},
{
"c": [
"14 May 2012 12:19:47",
0.6937866,
{}
]
}
]
}
I'm fairly sure I'm making some stupid mistake, just don't see what it
is.
Marc Robertson
a performance test. I have done this one other time with good
results. That time, I used a php script on the server to generate all
the addColumn, addRow, and setCell methods for the DataTable. Since
there was a lot of data, that generated a multiple thousand line
javascript function. Looking at the documentation for DataTable, it
seemed like I would be better off to have a php script that got
called, and returned a JSON string to use to load the argument for the
DataTable constructor. However, when I did that, I got the error
listed in the subject. That error occurred when I tried to execute
the draw method of the AnnotatedTimeLine class.
I wrote a php script that would return a small subset of the data, so
I would have something I could work with a bit easier. It does
generate the same error.
So, here's the original html file:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://
www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=ISO-8859-1">
<title>Detail Performance Charts</title>
<script type="text/javascript" src="jquery.js"></script>
<script type='text/javascript' src='http://www.google.com/jsapi'></
script>
<script type="text/javascript" >
google.load('visualization', '1', {'packages':['annotatedtimeline']});
</script>
<script type='text/javascript' src='PerfMultiTestChart.js'></script>
</head>
<body>
<div id="chart_div" style="width: 800; height: 600"></div>
</body>
</html>
Here's the PerfMultiTestChart.js file it loads:
$(document).ready(function()
{
$.extend({
getUrlVars: function(){
var vars = [], hash;
var hashes =
window.location.href.slice(window.location.href.indexOf('?') +
1).split('&');
for(var i = 0; i < hashes.length; i++)
{
hash = hashes[i].split('=');
vars.push(hash[0]);
vars[hash[0]] = hash[1];
}
return vars;
},
getUrlVar: function(name){
return $.getUrlVars()[name];
}
});
google.setOnLoadCallback(getChartData);
});
function getChartData()
{
var reqURL = "helpers/getMultiTestData.php?stats=" +
$.getUrlVar('stats');
$.getJSON(reqURL, chartData);
}
function chartData(data)
{
var options =
{ 'displayAnnotations':false,'displayLegendValues':false,'legendPosition':'newRow','scaleType':'maximized' };
var chartData = new google.visualization.DataTable(data);
var chart = new
google.visualization.AnnotatedTimeLine(document.getElementById("chart_div"));
chart.draw( chartData,options);
}
Finally, I copied the JSON string returned from getMultiTestData.php,
and ran it through jsonlint.com. That indicated the JSON was valid,
and reformatted it so that it was more readable. Here it is:
{
"cols": [
{
"type": "datetime"
},
{
"type": "number",
"label": "1268"
},
{
"type": "number",
"label": "1213"
}
],
"rows": [
{
"c": [
"14 May 2012 12:19:04",
12.6900498,
{}
]
},
{
"c": [
"14 May 2012 12:19:12",
{},
19.2097511
]
},
{
"c": [
"14 May 2012 12:19:15",
0.802081,
{}
]
},
{
"c": [
"14 May 2012 12:19:23",
{},
0.7648078
]
},
{
"c": [
"14 May 2012 12:19:26",
0.7456392,
{}
]
},
{
"c": [
"14 May 2012 12:19:34",
{},
0.6042936
]
},
{
"c": [
"14 May 2012 12:19:37",
0.6983837,
{}
]
},
{
"c": [
"14 May 2012 12:19:39",
{},
0.8682235
]
},
{
"c": [
"14 May 2012 12:19:39",
0.8991349,
{}
]
},
{
"c": [
"14 May 2012 12:19:44",
{},
0.727205
]
},
{
"c": [
"14 May 2012 12:19:47",
0.6937866,
{}
]
}
]
}
I'm fairly sure I'm making some stupid mistake, just don't see what it
is.
Marc Robertson
asgallant
May 14, 2012, 10:38:36 AM5/14/12
to google-visua...@googlegroups.com
I suspect the problem is in the style attribute of your container div:
<div id="chart_div" style="width: 800; height: 600"></div>
You are missing the 'px' after the height and width parameters. Try it with this:
<div id="chart_div" style="width: 800px; height: 600px"></div>
Marc
May 14, 2012, 11:07:07 AM5/14/12
to google-visua...@googlegroups.com
Thanks for the quick reply.
The good news is that, making the change you suggested eliminated that problem.
The bad news is, now I have another problem. :(
Now I'm getting a "No Data Available" message. I'm thinking the json string I'm sending from my php script is not correct.
Here's the raw string( I've got a limited subset coming from the server for testing. Normally, there would be thousands ):
{"cols":[{"type":"datetime"},{"type":"number","label":"1268"},{"type":"number","label":"1213"}],"rows":[{"c":["14 May 2012 14:48:07",12.6900498,{}]},{"c":["14 May 2012 14:48:15",{},19.2097511]},{"c":["14 May 2012 14:48:18",0.802081,{}]},{"c":["14 May 2012 14:48:26",{},0.7648078]},{"c":["14 May 2012 14:48:29",0.7456392,{}]},{"c":["14 May 2012 14:48:37",{},0.6042936]},{"c":["14 May 2012 14:48:40",0.6983837,{}]},{"c":["14 May 2012 14:48:42",{},0.8682235]},{"c":["14 May 2012 14:48:42",0.8991349,{}]},{"c":["14 May 2012 14:48:47",{},0.727205]},{"c":["14 May 2012 14:48:50",0.6937866,{}]}]}
Here's a segment after I run it through jsonlint.com:
{
< "cols" deleted>
"rows": [
{
"c": [
"14 May 2012 14:48:07",
12.6900498,
{}
]
},
< remainder of "rows" deleted>
}
]
}
I suspect the issue is how I represent a missing value. In the JSON string, you can see the ",{},". In the documentation for DataTable, the example showed just two commas, ",,". However, when I tried that, and ran it past jsonlint, I got a syntax error at that point.
The good news is that, making the change you suggested eliminated that problem.
The bad news is, now I have another problem. :(
Now I'm getting a "No Data Available" message. I'm thinking the json string I'm sending from my php script is not correct.
Here's the raw string( I've got a limited subset coming from the server for testing. Normally, there would be thousands ):
{"cols":[{"type":"datetime"},{"type":"number","label":"1268"},{"type":"number","label":"1213"}],"rows":[{"c":["14 May 2012 14:48:07",12.6900498,{}]},{"c":["14 May 2012 14:48:15",{},19.2097511]},{"c":["14 May 2012 14:48:18",0.802081,{}]},{"c":["14 May 2012 14:48:26",{},0.7648078]},{"c":["14 May 2012 14:48:29",0.7456392,{}]},{"c":["14 May 2012 14:48:37",{},0.6042936]},{"c":["14 May 2012 14:48:40",0.6983837,{}]},{"c":["14 May 2012 14:48:42",{},0.8682235]},{"c":["14 May 2012 14:48:42",0.8991349,{}]},{"c":["14 May 2012 14:48:47",{},0.727205]},{"c":["14 May 2012 14:48:50",0.6937866,{}]}]}
Here's a segment after I run it through jsonlint.com:
{
< "cols" deleted>
"rows": [
{
"c": [
"14 May 2012 14:48:07",
12.6900498,
{}
]
},
< remainder of "rows" deleted>
}
]
}
I suspect the issue is how I represent a missing value. In the JSON string, you can see the ",{},". In the documentation for DataTable, the example showed just two commas, ",,". However, when I tried that, and ran it past jsonlint, I got a syntax error at that point.
asgallant
May 14, 2012, 12:01:36 PM5/14/12
to google-visua...@googlegroups.com
Use null instead of an empty braces, ie:
"rows": [
{
"c": [
"14 May 2012 14:48:07",
12.6900498,
{
"c": [
"14 May 2012 14:48:07",
12.6900498,
null
]
},
]
},
.....
Marc
May 14, 2012, 12:51:22 PM5/14/12
to google-visua...@googlegroups.com
Still no joy. I changed the php script, and got this in the response:
<"cols" section removed> "rows":[{"c":["14 May 2012 16:14:36",12.6900498,null]}
....
But still got the "No Data Available" message
I don't know if it matters, but I saw something that looked a bit strange when I looked at the DataTable object with Firebug right after the constructor was called:
![]()
Not really sure where the subscripts are coming from( 0, 1, 10, 2, 3, etc ).
They aren't in the json string. In case it wasn't painfully obvious, I'm new at
this.
<"cols" section removed> "rows":[{"c":["14 May 2012 16:14:36",12.6900498,null]}
....
But still got the "No Data Available" message
I don't know if it matters, but I saw something that looked a bit strange when I looked at the DataTable object with Firebug right after the constructor was called:
Not really sure where the subscripts are coming from( 0, 1, 10, 2, 3, etc ).
They aren't in the json string. In case it wasn't painfully obvious, I'm new at
this.
asgallant
May 14, 2012, 3:02:46 PM5/14/12
to google-visua...@googlegroups.com
Your firebug message didn't post.
What happens when you fill the nulls with dummy data?
Come to think of it (and I'm going to facepalm myself if this is it), you might need to have each data point returned as an object, so it should be:
"rows":[{"c":[{"v":"14 May 2012 16:14:36"},{"v":12.6900498},{"v":null}]}
Marc
May 14, 2012, 3:12:40 PM5/14/12
to google-visua...@googlegroups.com
Sorry about the image not showing up. I think it was because of my companies network security settings. I also tried to do another post where I attached a jpeg file. That at least gave me an obvious error, instead of striping out the image.
I think I've figured out what was going on. Since I couldn't get the constructor to accept the full object that was being sent down, I wrote the javascript to iterate through the object and contained arrays, and do specific addRow calls. It didn't work at first, but I at least got an error message, indicating that, my first column was defined to be a datetime, but the value passed in was a string. Which it was, a string representation of a date. So, I changed to doing specific setCell calls, constructing a Date object from the first entry in the "c" array, and taking the actual values for the rest of the entries, which seems to be working.
Thanks for your help.
marc
asgallant
May 14, 2012, 3:39:18 PM5/14/12
to google-visua...@googlegroups.com
I noticed that, but usually the charts throw a different error when a column's values are the wrong type. You can fix that by using a string representation of a Date object (this is unique to the Viz API as there is no "valid" JSON date structure), like this:
"rows":[{"c":["Date(2012, 4, 14, 16, 14, 36)",12.6900498,null]}
Notice there is no "new" keyword, otherwise it looks like a js Date object inside a string.
Notice there is no "new" keyword, otherwise it looks like a js Date object inside a string.
Marc Robertson
May 15, 2012, 10:18:23 AM5/15/12
to google-visua...@googlegroups.com
I changed the php code to write out the "Date(....)" format, and then was able to just pass the object created from the json string to the DataTable constructor. I used the object format, {"c":[{"v":"Date(2012, 4, 14, 16, 14, 36)"},{"v":12.6900498},{" v":null}]}. Not sure if that was necessary, but it worked.
One other thing. When I display the chart with Chrome or FF, it takes 2-3 seconds. With IE 8, it takes about 15 seconds. Anything I can do to speed up IE?
Marc
One other thing. When I display the chart with Chrome or FF, it takes 2-3 seconds. With IE 8, it takes about 15 seconds. Anything I can do to speed up IE?
Marc
From: asgallant <drew_g...@abtassoc.com>
To: google-visua...@googlegroups.com
Sent: Mon, May 14, 2012 2:39:22 PM
Subject: [visualization-api] Re: Getting "Container height is zero. Expecting a valid height." error trying to use annotated time line
--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To view this discussion on the web visit https://groups.google.com/d/msg/google-visualization-api/-/pqioLAbQZD0J.
To post to this group, send email to google-visua...@googlegroups.com.
To unsubscribe from this group, send email to google-visualizati...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-visualization-api?hl=en.
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To view this discussion on the web visit https://groups.google.com/d/msg/google-visualization-api/-/pqioLAbQZD0J.
To post to this group, send email to google-visua...@googlegroups.com.
To unsubscribe from this group, send email to google-visualizati...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-visualization-api?hl=en.
asgallant
May 15, 2012, 11:57:03 AM5/15/12
to google-visua...@googlegroups.com
In my experience, no, there is nothing you can do to speed up IE<9, except convince your users to use a modern browser.
On Tuesday, May 15, 2012 10:18:23 AM UTC-4, Marc wrote:
On Tuesday, May 15, 2012 10:18:23 AM UTC-4, Marc wrote:
I changed the php code to write out the "Date(....)" format, and then was able to just pass the object created from the json string to the DataTable constructor. I used the object format, {"c":[{"v":"Date(2012, 4, 14, 16, 14, 36)"},{"v":12.6900498},{" v":null}]}. Not sure if that was necessary, but it worked.
One other thing. When I display the chart with Chrome or FF, it takes 2-3 seconds. With IE 8, it takes about 15 seconds. Anything I can do to speed up IE?
Marc
To post to this group, send email to google-visualization-api@googlegroups.com.
To unsubscribe from this group, send email to google-visualization-api+unsub...@googlegroups.com.
Reply all
Reply to author
Forward
0 new messages