Hi,
Thanks for getting back to me. After some further testing I narrowed
my problem down to the fact I am displaying the chart inside a jQuery
UI tab. I tried it outside to prove it wouldn't work and quickly
realised it did!
I am using jQuery UI accordions and tabs to organise the layout and
the timeline chart doesn't render inside either of these but the
motion chart does. Perhaps it's because I need to specify the width
and height inline in the div but this code draws a motion chart
perfectly:
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
<div id="tabs-4">
<div id="motionchart_div"></div>
</div>
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
And this:
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
<!--Student Mark Deviation jQuery Tab-->
<div id="tabs-3">
<!--Student Mark Deviation jQuery Accordion -->
<div
id="StudentYearlyPerformance_accordion">
<div>
<h3><a href="#">Timeline</a></h3>
<div>
<div id="timeline_chart_div"
style="width: 800px; height: 400px;"></div>
</div>
</div>
</div>
<!--End Student Mark Deviation
Accordion -->
</div>
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Or this (jQuery tab):
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
<div id="tabs-13">
<div id="timeline_chart_div" style="width:800px;height:400px;"></
div>
</div>
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Won't display anything. But if I call it outside the tabs it displays
perfectly so it seems to be an issue with that rather than my original
thoughts. I'm not really sure how to set the capabilities as you
suggest. Here is my chart code:
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
<script type="text/javascript" src="http://www.google.com/jsapi";></
script>
<script type='text/javascript'>
google.load('visualization', '1', {'packages':
['annotatedtimeline']});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('number', 'CA Grade');
data.addColumn('string', 'title1');
data.addColumn('string', 'text1');
data.addColumn('number', 'Exam Mark');
data.addColumn('string', 'title2');
data.addColumn('string', 'text2');
data.addRows([
[new Date(2008, 1 ,1), 30, undefined, undefined, 40,
undefined, undefined],
[new Date(2008, 1 ,2), 14, undefined, undefined, 20,
undefined, undefined],
[new Date(2008, 1 ,3), 55, undefined, undefined, 50,
undefined, undefined],
[new Date(2008, 1 ,4), 75, undefined, undefined, 14, 'Failed
Exams','Failed 2 exams'],
[new Date(2008, 1 ,5), 41, 'Failed CA','Didnt Submit
Assignment', 66, undefined, undefined],
[new Date(2008, 1 ,6), 33, undefined, undefined, 39,
undefined, undefined]
]);
var chart = new
google.visualization.AnnotatedTimeLine(document.getElementById('timeline_chart_div'));
chart.draw(data, {displayAnnotations: false});
}
</script>
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
I'm not really sure where how to change the capabilities.I tried just
inside the script and no luck. Could you maybe point me in the right
direction? I am using sessionised JSON strings to plot my charts using
my own java servlets rather than the google data source request. Maybe
I should do some research in that area but if it works outside jQuery
UI I don't think the problem lies there.
Inside the tabs or accordion the div size for the visual is displayed
but nothing else just a blank white div and when I check in the source
everything is fine but just nothing displayed in the browser.
On Aug 12, 9:12 pm, akshay dange <[email protected]> wrote:
> try changing the Capabilities setting to "None" or "select"
>
> protected boolean isRestrictedAccessMode() {
> return false;
> }
>
> �...@override
> public Capabilities getCapabilities() {
> return Capabilities.NONE;
> }
>
> A simple sample from your side will help to determine problem!!!!
> I dont think its a bug , since it works for me.
>
>
>
> On Thu, Aug 12, 2010 at 10:49 AM, Peter <[email protected]> wrote:
> > Hi all,
>
> > I have been having a bizarre issue with the Google Annotated Timeline
> > and i was just checking to see if anyone else has encountered it.
>
> > I have developed a Timeline that works perfectly when I define the
> > whole page in my JSP so - <html> -> </html>.
>
> > However my application is quite large so I have split each
> > visualisation I am using into an individual JSP containing only the
> > Javascript code - <script> -> </script>.
>
> > The problem I am having is that the visual simply will not load at all
> > if I define it in this manner. I cannot understand the problem as my
> > code works if I don't call it from a seperate file or if I test it on
> > Google Playground.
>
> > I am really confused as all of the other visuals I use including
> > Motion Chart, Data tables etc. are set up and working using seperate
> > JSP files to contain the script itself.
>
> > If anyone has any idea how I am going wrong or if they have
> > experienced similar issues it would be great if you could help me out
> > or confirm my problem is a bug!
>
> > Thanks!
>
> > Peter
>
> > --
> > You received this message because you are subscribed to the Google Groups
> > "Google Visualization API" group.
> > To post to this group, send email to
> > [email protected].
> > To unsubscribe from this group, send email to
> > [email protected].
> > For more options, visit this group
> > athttp://groups.google.com/group/google-visualization-api?hl=en.
>
> --
> regards,
> Akshay .Y. Dange.
> MS in Computer Science
> State University of New York, Binghamton
--
You received this message because you are subscribed to the Google Groups
"Google Visualization API" group.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/google-visualization-api?hl=en.
