Jquery sparklines don't render properly within Jquery mobile collapsible set

Question

I would like to display some sparklines graphs within a Jquery mobile collapsible set, however those graphs were not rendered properly:

Majority of the html codes are built by jquery functions, including those which generate sparklines.

It won't display the "graphs" for the first moment, instead it displays the literal series of numbers drawing the sparklines, then if the function is executed once again, the sparklines are rendered correctly with graphs. that function to generate "li" elements for the "listview" ul is set at 10 secs interval.

Please see the attached code and screenshots below:

<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>

no graphs display, but a hole bunch of numbers correct display

Any suggestions appreciated!!!Thanks in advance!

Another two screenshots showing collapsible divs display numbers instead of graphs: enter image description here

score 0 · Answer 1 · answered Apr 19 '13 at 07:54

Your only problem is pageinit event.

jQuery Mobile has a problem running graphic jQuery plugins during page initialization. During the page initialization page height is usually 0 or some small value and that affects plugins. So usually only usable page event is pageshow.

Here's a working example of your code: http://jsfiddle.net/Gajotres/23ccn/

HTML :

<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <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/mobile/1.3.0-rc.1/jquery.mobile-1.3.0-rc.1.min.js"></script>
    <script src="http://omnipotent.net/jquery.sparkline/2.1.1/jquery.sparkline.min.js"></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>

Javascript :

$(document).on('pageshow', '#indexPage', function(){       
    //build the basic html structure
    buildHtml();
    populateList();  
});

//set repeating time
setInterval(populateList, 2000);


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).trigger("create");    
}

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;
}

Thanks Gajotres for answering my question! Appreciate it and it did solve part of my problem, but there was another half of it: if you click onto that "show all queues" collapsible span, the sparklines graphs inside this span still initially display as numbers.. please see my additional screenshots just added. Having examined the html code created by jquery mobile, the collapsible div which is collapsed at first has an attribute of "aria-hidden="true"" which I assume is invisible to jquery sparklines to create graphs. Thoughts please? Thanks again Gaj! — Grant, Apr 22 '13 at 00:47

Jquery sparklines don't render properly within Jquery mobile collapsible set

1 Answers1