Search code examples
javascriptsparklines

jquery sparklines.js will not display when I unhide/toggle a div

I can't get sparklines.js to unhide my sparklines. I've included the $.sparkline_display_visible() function in the function where I unhide the div. The official docs are pretty straightforward:

From http://omnipotent.net/jquery.sparkline/#hidden:

The solution is to call the $.sparkline_display_visible() function anytime a sparkline may have become visible so that it can be correctly rendered. This is the technique this site uses to handle the sparklines that are hidden in the different tabbed sections; the site calls the routine in the tab-changed callback.

<html>
        <script src="/s/js/jquery-1.8.0.min.js"></script>
        <script type="text/javascript" src="/s/js/jquery.sparkline.min.js"></script>
<body>

<button id="neighborhood_standards_button">Sort</button><br>

<div id="neighborhood_standards">
Q117 {{org}} listens and responds appropriately to our questions and concerns. <br><span style="font-size:small">
            (5.4 vs 8.2)</span></td><td>
            <div id="neigh_q117" style="display: inline-block;"></div>
</div>
<div id="smart_sort" style="display:none;">
Q117 {{org}} listens and responds appropriately to our questions and concerns. <br><span style="font-size:small">
            (8.6 vs 8.2)</span>
            <div id="smart_q117" style="display: inline-block;"></div>
</div>            
<script type="text/javascript"> 
$("#smart_q117").sparkline([8.2,8.6,10,8,6],
            {type: 'bullet', 
            rangeColors: ['#f189b1','#f4a0c0','#f9cede'],
            targetWidth: 10,
            targetColor: '#73913b',
            performanceColor: '#c9413f',
            width: '400px'
            });
$("#neigh_q117").sparkline([8.2,5.4,10,8,6],
            {type: 'bullet', 
            rangeColors: ['#f189b1','#f4a0c0','#f9cede'],
            targetWidth: 10,
            targetColor: '#73913b',
            performanceColor: '#c9413f',
            width: '400px'
            });
$(document).ready(function(){
    $("#neighborhood_standards_button").click(function(){
        $("#smart_sort").toggle();
        $("#neighborhood_standards").toggle();
        $.sparkline_display_visible();
    });
    });

    </script>
    </body>
   </html>

So after the usual head-banging and doc-rereading period, I'm asking you guys for suggestions on what I missed.

Solution

  • You have to have something inside the divs i.e. stick a nbsp; inside empty div

            <div id="smart_q117" style="display: inline-block;">&nbsp;</div> [see http://jsfiddle.net/WackyDad/utLsfyga/]

    PS You also appear to have some stray tags (e.g. closing td followed by opening that is not closed and neither inside a table)