Bootstrap Snippet Report Link using HTML CSS Bootstrap jQuery

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
.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;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
$(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"],
            }
        );
    });
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Report Link"
Bootstrap 3.3.0 Snippet by coupej

Related: See More

Questions / Comments:

"Report Link" Bootstrap 3.3.0 Snippet by coupej

Related: See More

Questions / Comments:

"Report Link"
Bootstrap 3.3.0 Snippet by coupej