R + googlevis - problem embedding on blogger

I am trying to embed a googlevis motion chart on to a blog, but am having some problems. I have been followin the instructions by takahashik.blogspot.com/2011/01/googlevis-example.html and Embedding googleVis charts into a web site, but cannot seem to view the chart on the blog when i copy my own code and use . However when i copy the code from the takahashik blog it works! Even if i recreate the motion chart from the data used in that blog i still can't get it to embed.

I can view the output using the local websever and the R.rsp package but am really struggling to go further with this and actually put the motion chart on the blog. I'm quite new to this and probably missing something really obvious, so i开发者_运维问答f anyone has any suggestions that will be greatly appreciated

Many thanks

Here is the (shortened) code i'm trying to put on to blogger:

<script type="text/javascript" src="http://www.google.com/jsapi">
</script>
<script type="text/javascript">
google.load("visualization", "1", { packages:["motionchart"] });
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
var datajson = [
 [
 "Adam/Gemma",
new Date(2010,4,25),
0,
0,
0 
],
[
 "Adam/Gemma",
new Date(2010,5,3),
1,
0,    
0 
],
[
 "Adam/Gemma",
new Date(2010,5,10),
2,
102,
102 
],
[
 "Adam/Gemma",
new Date(2010,5,17),
3,
195,
93 
],
[
 "Adam/Gemma",
new Date(2010,5,24),
5,
300,
105 
],
[
 "Adam/Gemma",
new Date(2010,6,15),
7,
640,
340 
],
[
 "Adam/Gemma",
new Date(2010,6,22),
8,
700,
60 
],
[
 "Adam/Gemma",
new Date(2010,6,29),
9,
800,
100 
],
[
 "Adam/Gemma",
new Date(2010,7,5),
10,
null,
null 
],
[
 "Adam/Gemma",
new Date(2010,7,12),
11,
1200,
null 
]...............
................
.............
];
data.addColumn('string','Name');
data.addColumn('date','datenew');
data.addColumn('number','Week');
data.addColumn('number','Height');
data.addColumn('number','Growth');
data.addRows(datajson);
var chart = new google.visualization.MotionChart(
   document.getElementById('MotionChart_2011-08-15-10-30-18')
);
var options ={};
options["width"] =    600;
options["height"] =    500;
chart.draw(data,options);
}
</script>
<div id="MotionChart_2011-08-15-10-30-18" style="width: 600px; height: 500px;">
</div>

Data: sunflower, Chart ID: MotionChart_2011-08-15-10-30-18

R version 2.11.1 (2010-05-31), Google Terms of Use

To use the googleVis output in blogger you have to create a Google Gadget first. So here is an example:

library(googleVis)

M=gvisMotionChart(Fruits,"Fruit", "Year")

cat(createGoogleGadget(M)) # <- function from googleVis

The content you see from createGoogleGadget is what is required for blogger. So copy the output into a file, say myMotionChart.xml, and upload it somewhere to the web, e.g. Google Docs or your public dropbox folder. Here is one example from the googleVis package: http://google-motion-charts-with-r.googlecode.com/svn/trunk/inst/gadgets/motionchart.xml

Now you can go back to blogger and navigate to the design tab, where you will find an area labelled Gadget. Click on 'Add Gadget', than 'Add your own' and paste in the link to your gadget.

Job done.

I hope this helps.

Regards,

Markus