"Awesome UI Kit"
Bootstrap 3.3.0 Snippet by kallias

<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 ----------> <link href="//netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"> <!-- Docs at http://simpleweatherjs.com --> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery.simpleWeather/3.0.2/jquery.simpleWeather.min.js"></script> <!-- Docs at http://www.chartjs.org --> <script src="//www.chartjs.org/assets/Chart.min.js"></script> <div class="container"> <div class="row"> <!-- COLUMN TWO --> <div> <!-- ****** CHART WIDGET ******* --> <div class="panel"> <div class="panel-heading text-center"> <h5 class="text-uppercase"><strong>Data Transfer</strong></h5> </div> <div class="panel-body"> <canvas id="myPieChart"></canvas> </div> <div class="panel-footer"> <div class="list-block"> <ul class="text-center legend"> <li class="video" style="margin-right: 1px;"> video <h2>62%</h2> </li> <li class="photo"> photo <h2>21%</h2> </li> <li class="audio" style="margin-left: 1px;"> audio <h2>10%</h2> </li> </ul> </div> </div> </div> </div> </div> </div> </div>
.panel { border: none; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25); border-radius: 5px; } .panel-body { padding: 20px; } .panel-footer { border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; } .list-block { display: table; width: 100%; border-collapse: collapse; border: none; } .list-block ul { display: table-row; } .list-block li { display: table-cell; margin: 0; } .panel-footer .btn:hover { background-color: #62584C; border-color: #52483F; } .legend li:not(:first-child) { border-left: 1px solid #fff; } .legend .video { border-top: 4px solid #4DAF7C; } .legend .audio { border-top: 4px solid #EAC85D; } .legend .photo { border-top: 4px solid #E25331; }
$(document).ready(function() { var pie_data = [ { value: 300, color:"#4DAF7C", highlight: "#55BC75", label: "Video" }, { value: 50, color: "#EAC85D", highlight: "#f9d463", label: "Audio" }, { value: 100, color: "#E25331", highlight: "#f45e3d", label: "Photos" }, { value: 35, color: "#F4EDE7", highlight: "#e0dcd9", label: "Remaining" } ] var ctx = document.getElementById("myPieChart").getContext("2d"); var myDoughnutChart = new Chart(ctx).Doughnut(pie_data, { responsive:true, tooltipTemplate: "<%if (label){%><%=label%>: <%}%><%= value %> Gb" }); });

Related: See More


Questions / Comments: