"Nth level Poll drill down control"
Bootstrap 3.3.0 Snippet by Siraj

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="panel panel-primary" style="width:30%; margin:20px" > <div class="panel-heading"> <h3 class="panel-title"> Poll: Browser Statistics </h3> </div> <div class="panel-body" style="margin:0px; width:115%;"> <div id="Main"> <a name="poll_bar">Chrome </a> <span name="poll_val">60.1% </span><br/> <a name="poll_bar">Firefox</a> <span name="poll_val">23.4% </span><br/> <a name="poll_bar">IE </a> <span name="poll_val">9.8% </span><br/> <a name="poll_bar">Safari </a> <span name="poll_val">3.7% </span><br/> <a name="poll_bar">Opera </a> <span name="poll_val">1.6% </span><br/> </div> <!-- Chrome yearly usages detail --> <div id="Chrome"> <a name="poll_bar">chrome-2014</a> <span name="poll_val">60% </span><br/> <a name="poll_bar">chrome-2013</a> <span name="poll_val">55% </span><br/> <a name="poll_bar">chrome-2012</a> <span name="poll_val">46% </span><br/> <a name="poll_bar">chrome-2011</a> <span name="poll_val">34% </span><br/> </div> <!-- Chrome monthly usages detail --> <div id="chrome-2014"> <a name="poll_bar">November </a> <span name="poll_val">60.1% </span><br/> <a name="poll_bar">October </a> <span name="poll_val">40.4% </span><br/> <a name="poll_bar">September</a> <span name="poll_val">59.6% </span><br/> </div> <!-- Firefox yearly usages detail --> <div id="Firefox"> <a name="poll_bar">Firefox-2014</a> <span name="poll_val">60% </span><br/> <a name="poll_bar">Firefox-2013</a> <span name="poll_val">40% </span><br/> <a name="poll_bar">Firefox-2012</a> <span name="poll_val">15% </span><br/> <a name="poll_bar">Firefox-2011</a> <span name="poll_val">3% </span><br/> </div> </div> </div> <br/><br/> Nth level Poll drill down control.<br/><br/> Below is the list of functionality.<br/><br/> [1] You can define any number of drill down detail.<br/> [2] Set Bar color as per rules.<br/> [2.1] value >= 50 bar color green.<br/> [2.2] value < 50 bar color orange.<br/> [2.3] value <= 10 bar color red.<br/><br/> How to test control.<br/><br/> [1] First level : Just click on Chrome <br/> [2] Second level : click on chrome-2014 <br/> [3] click on "November" so you will back to browser main statistic.<br/>
$(document).ready(function(){ // add button style $("[name='poll_bar'").addClass("btn btn-default"); // Add button style with alignment to left with margin. $("[name='poll_bar'").css({"text-align":"left","margin":"5px"}); //loop $("[name='poll_bar'").each( function(i){ //get poll value var bar_width = (parseFloat($("[name='poll_val'").eq(i).text())/2).toString(); bar_width = bar_width + "%"; //add percentage sign. //set bar button width as per poll value mention in span. $("[name='poll_bar'").eq(i).width(bar_width); //Define rules. var bar_width_rule = parseFloat($("[name='poll_val'").eq(i).text()); if(bar_width_rule >= 50){$("[name='poll_bar'").eq(i).addClass("btn btn-sm btn-success")} if(bar_width_rule < 50){$("[name='poll_bar'").eq(i).addClass("btn btn-sm btn-warning")} if(bar_width_rule <= 10){$("[name='poll_bar'").eq(i).addClass("btn btn-sm btn-danger")} //Hide dril down divs $("#" + $("[name='poll_bar'").eq(i).text()).hide(); }); //On click main menu bar show its particular detail div. $("[name='poll_bar'").click(function() { //Hide all $(".panel-body").children().hide(); //Display only selected bar texted div sub chart. $("#" + $(this).text()).show(); //If not inner drill down sub detail found then move to main menu. if($("#" + $(this).text()).length == 0) { $("#Main").show(); } }); });

Related: See More

Questions / Comments: