Javascript-форум - Гаджет-виджет для Windows. Содержимое HTML не полностью отображается

Здравствуйте, уважаемые.
Помогите, пожалуйста, разобраться.
Написал код на HTML с вставками из библиотеки d3 на JS. Файл называется HelloWorld.html. Сама веб-страница работает корректно. С помощью d3 создаю динамичный график.

Далее пытаюсь всё это упаковать в гаджет и тут возникает проблема: в виджете отображается только текст, а график, нарисованный с помощью d3 ну никак.

Не знаю, как быть. GIMAGE Protocol попробовать может внедрить. Но разве к графику применимо сие?

File1 "HelloWorld.html"

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        
        <title>Тест</title>
	<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />

        <style type="text/css">
        body
        {
            margin: 0;
            width: 500px;
            height: 500px;
            font-family: verdana;
            font-weight: bold;
            font-size: 10px;
        }
        #gadgetContent
        {
            margin-top: 10px;
            width: 500px;
            vertical-align: middle;
            text-align: center;
            overflow: hidden;
        }
        </style>

<script src="http://d3js.org/d3.v3.min.js" charset="UTF-8"></script>

 </head>


<script type="text/jscript" language="jscript">
            function init()
            {
                var oBackground = document.getElementById("imgBackground");
                oBackground.src = "url(images/background.png)";
                var chart_area =	d3
	                    .select("body") 
	                    .append('div') 
	                    .classed('chart_area', true) 
	               ;

                var RANDOM_MIN = 0, RANDOM_MAX = 100;
                 function irand(lo, up) { return Math.floor(Math.random()*(up-lo+1)+lo); }
                var data = []; for (var i=0; i<10; i++) { data.push(irand(RANDOM_MIN, RANDOM_MAX)); }

                chart_area.selectAll('div')
	                      .data(data)
	                      .enter()
	                      .append('div')
	                      .classed('stolbiki', true)
                        .style('background-color', function(d, i) { return 'hsl(1800,50%,'+ (90-d/3) + '%)'; })
                        .style('height',20 + 'px' )
                        .style('margin', '10px 20px')
                        .style('width', '0PX') 
                        .transition()
                        .duration(1250) 
                        .style('width', function(d,i) { return d + 'px'; } ) 	
                        .text(String)						
;
            }
  
</script>
	
    <body onload="init()">
        <g:background id="imgBackground" style="position:absolute; z-index:-1; top:0; left:0;" opacity="80">
            <span id="gadgetContent">Text</span>
        </g:background>

    </body>
  <br></br>
  <br></br>
</html>

File2 "gadget.xml"

Код:

<?xml version="1.0" encoding="utf-8" ?>

<gadget>

  <name>А</name>

  <version>1.0</version>

  <author name="Д">

    <info url="msdn.microsoft.com" />

  </author>

  <copyright>© Microsoft Corporation.</copyright>

  <description>Т.</description>

  <hosts>

    <host name="sidebar">

      <base type="HTML" apiVersion="1.0.0" src="HelloWorld.html" />

      <permissions>Full</permissions>

      <platform minPlatformVersion="1.0" />

    </host>

  </hosts>

</gadget>