Nth level Poll drill down control
<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/>
,The author is parasaniasandip

Loading...