"Report Link"
Bootstrap 3.3.0 Snippet by coupej

<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 ----------> <!-- Snippet inspired by https://demo.baremetrics.com/dashboard I really like the style of the site and I wanted to see if I could do something similar with flot.js + bootstrap --> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css"> <script language="javascript" type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.js"></script> </head> <body> <div class="container"> <div class="row-fluid"> <div class="col-md-4"> </div> <div class="col-md-4"> <a href='https://github.com/flot/flot'> <div class="graph-box"> <h1 class="primary">$1,234</h1> <span class="green"><h1 class="secondary"><i class="icon-arrow-up"></i>12%</h1></span> <div id="placeholder" class="graph" style="opacity: 0.8;"></div> <h1 class="link" href='https://github.com/flot'>Report title</h1> </div> </a> </div> </div> </div> </body> </html>
.graph{ width: 400px; height: 100px; font-size: 14px; line-height: 1.2em; } .link { text-align: center; font-size: 20px; font-weight: normal; margin: 0; width: 100%; } .graph-box { position: relative; min-height: 144px; padding: 30px 25px 0px; margin-bottom: 1em; } .graph-box .graph { position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index:-1; } .graph-box .primary { color: #2693d5; font-size: 40px; font-weight: bold; padding-bottom: 1em; line-height: 1; margin: 0; width: 100%; z-index:1; } .graph-box .secondary { position: absolute; z-index: 1; right: 10px; top: 10px; text-align: center; font-size: 36px; font-weight: bold; } a { color: inherit; text-decoration: none !important; } .green { color: #26b548; }
$(function() { var data = [[0, 3], [1, 7], [2, 4], [3, 5], [4, 5], [6, 6], [7, 5], [8, 6], [9,10]]; $.plot("#placeholder", [ data ], { xaxis: { show:false, }, yaxis: { show:false, }, grid: { show: false, }, lines: { lineWidth: 4, fill: true, fillColor: { colors: [ { opacity: 0.2 }, { opacity: 0.1 } ] } }, colors: ["#A7C6D9"], } ); });

Related: See More


Questions / Comments: