jquery - Jquery モバイル折りたたみ可能セット内で Jquery スパークラインが正しくレンダリングされない

Question

Jquery モバイルの折りたたみ可能なセット内にいくつかのスパークライングラフを表示したいのですが、これらのグラフは適切にレンダリングされませんでした。

HTML コードの大部分は、スパークラインを生成するものを含め、jquery 関数によって構築されます。

最初は「グラフ」は表示されず、代わりにスパークラインを描画する一連の文字列が表示されます。関数がもう一度実行されると、スパークラインはグラフで正しくレンダリングされます。「listview」ulの「li」要素を生成する関数は、10秒間隔に設定されています。

以下の添付コードとスクリーンショットをご覧ください。

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0-rc.1/jquery.mobile-1.3.0-rc.1.min.css" />
    <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.3.0-rc.1/jquery.mobile-1.3.0-rc.1.min.js"></script>
    <script src="jquery.sparkline.min.js"></script>
    <script type="text/javascript">
        //set repeating time
        setInterval(populateList, 10000);

        $(document).on('pageinit',function(){ 
            //build the basic html structure
            buildHtml();
            $('#domain').trigger("create");
            populateList();
        });

        function buildHtml(){
            var domain_list = "";
            domain_list += "<div id=\""+ "this.domain" +"\" data-role=\"collapsible\" data-collapsed=\"false\" data-mini=\"true\" data-collapsed-icon=\"arrow-r\" data-expanded-icon=\"arrow-d\" data-theme=\"a\">";
            domain_list += "<h2>"+ "this.domain" +"</h2>";
            domain_list += "<div data-role=\"collapsible-set\" data-theme=\"d\">";
            domain_list += "<div data-role=\"collapsible\" data-collapsed=\"false\" data-mini=\"true\">";
            domain_list += "<h2>Queueing</h2>";
            domain_list += "<ul data-role=\"listview\"  id=\""+ "domainqueueing"+"\" data-inset=\"false\">";
            domain_list += "</ul></div>";

            var show_all_queues = "";
            show_all_queues +=  "<div data-role=\"collapsible\" data-mini=\"true\">";
            show_all_queues += "<h2>Show all queues</h2>";
            show_all_queues +=  "<ul data-role=\"listview\"  id=\"domainallqueues\" data-filter=\"true\" data-filter-theme=\"c\" data-divider-theme=\"d\" >";
            show_all_queues += "</ul></div>";

            domain_list += show_all_queues+ "</div></div>";

            $('#domain').html(domain_list);


        }

        function populateList(){

            //build "li"s
            var str = "<li data-theme = \"c\"><h3>" + "this.queue1" + "</h3><p>Last Enqueue Time: " + "this.timeOnQueue1" + " ago</p><p class=\"dynasparkline\">"+historyCounts()+"</p><span class=\"ui-li-count\">" + 123 + "</span></li>"
            var str1 = "<li data-theme = \"d\"><h3>" + "this.queue1" + "</h3><p>Last Enqueue Time: " + "this.timeOnQueue1" + " ago</p><p class=\"dynasparkline\">"+historyCounts()+"</p><span class=\"ui-li-count\">" + 123 + "</span></li>"
            //just for repetition
            var doubble = str+str1;//just for repetition
            var triple = str+str1+str;

            $('#domainqueueing').html(doubble);
            $('#domainallqueues').html(triple);
            //update jquery mobile listview
            $('#domainqueueing').listview('refresh');
            $('#domainallqueues').listview('refresh');
            //trigger the sparklines
            $('.dynasparkline').sparkline();
        }
        //random generate some numbers for hisotry graph
        function historyCounts(){
            var str = "";
            for(var i=0; i<60; i++){
                var num = Math.floor((Math.random()*100)+1); //Return a random number between 1 and 100

                str += num;
                if(i != 59){
                    str+=",";
                }
            }
            return str;
        }
    </script>
</head>
<body>
    <div data-role="page" id="indexPage">
        <div data-role="header" id="queueheader">
            <h1>Queues</h1>
        </div>
        <br/>
        <div data-role="content" id="domain">

        </div>
        <div data-role="footer" id="statusbar">
            <h4>Last Update: <span id="lastupdate"></span></h4>
        </div>
    </div>
</body>

グラフは表示されませんが、数字の穴がたくさんあります正しい表示