Using Google Visualization API with Lift

131 views
Skip to first unread message

Shirren

unread,
Mar 1, 2011, 8:00:43 AM3/1/11
to Lift
Hi All,

I have been trying to incorporate the Google Visualization API into
our Lift
application with little success. To make things simple I created the
following
test page.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.google.com/
jsapi"></script>
<script type="text/javascript">

// Load the Visualization API and the piechart package.
google.load('visualization', '1', {'packages':['corechart']});

// Set a callback to run when the Google Visualization API is
loaded.
google.setOnLoadCallback(drawChart);

// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it.
function drawChart() {

// Create our data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Task');
data.addColumn('number', 'Hours per Day');
data.addRows([
['Work', 11],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 7]
]);

// Instantiate and draw our chart, passing in some options.
var chart = new
google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, {width: 400, height: 240, is3D: true,
title: 'My Daily Activities'});
}
</script>
</head>

<body>
<!--Div that will hold the pie chart-->
<div id="chart_div"></div>
</body>
</html>

If I serve this page up using either IIS or Apache the google chart
renders with
no problems. However if this page is served up through Lift using the
embeded
Jetty server with SBT the Javascript fails. To be precise a call in
https://www.google.com/jsapi fails when it tries to performs a write
on the DOM.
Interestingly enough if I get lift to change the DOCTYPE to HTML5 it
works.
However this just does not make sense as chart should render perfectly
using XHTML.

Any help would be greatly appreciated. The example javascript is
straight out of
the Google Visualization API help documentation.

David Pollak

unread,
Mar 1, 2011, 9:13:19 AM3/1/11
to lif...@googlegroups.com
Many Google JavaScript libraries use DOM manipulation operations that are illegal under XHTML.  For example, Google Maps widgets don't work under XHTML.

So, the answer to your question is serve the pages as HTML5 and all will work.
 

Any help would be greatly appreciated. The example javascript is
straight out of
the Google Visualization API help documentation.

--
You received this message because you are subscribed to the Google Groups "Lift" group.
To post to this group, send email to lif...@googlegroups.com.
To unsubscribe from this group, send email to liftweb+u...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/liftweb?hl=en.




--
Lift, the simply functional web framework http://liftweb.net
Beginning Scala http://www.apress.com/book/view/1430219890
Follow me: http://twitter.com/dpp
Blog: http://goodstuff.im
Surf the harmonics

Shirren

unread,
Mar 2, 2011, 1:51:44 AM3/2/11
to Lift
Hi David,

Thanks for your prompt reply. I have come across the Google Map API
issue to do with a lack of XHTML compliance. But from what
I can tell and have read the Google Charts API should be XHTML
compliant. Infact to test it out I wrote a test page in ASP.NET to
serve a similar page to that of Lift using the same javascript and it
worked with no errors (which I verified).

Using HTML5 in our application is a possibility but will take a bit of
work as we have a few pages which are not HTML5 compliant. I guess
I am just curious as to why it does not work in Lift with XHTML.

If I do manage to find an answer I will let you know. Once again
thanks for the reponse.

Kind Regards
Shirren

On Mar 2, 1:13 am, David Pollak <feeder.of.the.be...@gmail.com> wrote:
> >https://www.google.com/jsapifails when it tries to performs a write
> > on the DOM.
> > Interestingly enough if I get lift to change the DOCTYPE to HTML5 it
> > works.
> > However this just does not make sense as chart should render perfectly
> > using XHTML.
>
> Many Google JavaScript libraries use DOM manipulation operations that are
> illegal under XHTML.  For example, Google Maps widgets don't work under
> XHTML.
>
> So, the answer to your question is serve the pages as HTML5 and all will
> work.
>
>
>
> > Any help would be greatly appreciated. The example javascript is
> > straight out of
> > the Google Visualization API help documentation.
>
> > --
> > You received this message because you are subscribed to the Google Groups
> > "Lift" group.
> > To post to this group, send email to lif...@googlegroups.com.
> > To unsubscribe from this group, send email to
> > liftweb+u...@googlegroups.com.
> > For more options, visit this group at
> >http://groups.google.com/group/liftweb?hl=en.
>
> --
> Lift, the simply functional web frameworkhttp://liftweb.net
> Beginning Scalahttp://www.apress.com/book/view/1430219890

Jeppe Nejsum Madsen

unread,
Mar 2, 2011, 4:07:18 AM3/2/11
to lif...@googlegroups.com
Shirren <shirren.p...@gmail.com> writes:

> Hi David,
>
> Thanks for your prompt reply. I have come across the Google Map API
> issue to do with a lack of XHTML compliance. But from what
> I can tell and have read the Google Charts API should be XHTML
> compliant. Infact to test it out I wrote a test page in ASP.NET to
> serve a similar page to that of Lift using the same javascript and it
> worked with no errors (which I verified).

Are you sure the pages are served with the same mime types? You can have
a xhtml being parsed as html if the mime type is not correct

/Jeppe

David Pollak

unread,
Mar 2, 2011, 8:49:23 AM3/2/11
to lif...@googlegroups.com
On Tue, Mar 1, 2011 at 10:51 PM, Shirren <shirren.p...@gmail.com> wrote:
Hi David,

 Thanks for your prompt reply. I have come across the Google Map API
issue to do with a lack of XHTML compliance. But from what
I can tell and have read the Google Charts API should be XHTML
compliant. Infact to test it out I wrote a test page in ASP.NET to
serve a similar page to that of Lift using the same javascript and it
worked with no errors (which I verified).

By the time the bytes reach the browser, there is no such thing as a "Lift app", there is only HTML and headers.

Lift serves XHTML strictly... that means it gets the DOCTYPE right and it gets the HTTP headers right.  When the Content-Type is 'application/xhtml+xml' browsers get put into a particular state that disables certain features, including streaming into DOM elements.

When you did your ASP.NET test, did you insure that the Content-Type header was set to 'application/xhtml+xml' ?



--
Lift, the simply functional web framework http://liftweb.net
Beginning Scala http://www.apress.com/book/view/1430219890

Dominik Schmidt

unread,
Mar 2, 2011, 6:36:21 PM3/2/11
to lif...@googlegroups.com
Try

LiftRules.useXhtmlMimeType = false

in your Boot.scala. I had the same problem when I was testing the API.

http://stackoverflow.com/questions/2345536/uncaught-typeerror-object-a-document-has-no-method-write

Regards
Dominik

Reply all
Reply to author
Forward
0 new messages