<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"],
}
);
});
