"myyyy graphwaaaaa"
Bootstrap 4.1.1 Snippet by ravic9089

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<main>
<h2>Beautiful Google Charts</h2>
<h5>Daily Page Hits</h5>
<div id="bar-chart"></div>
<h5>Traffic Over Time</h5>
<div id="line-chart"></div>
<h5>Page Hits per Country</h5>
<div id="pie-chart"></div>
<p>Google Charts can be <a href="https://google-developers.appspot.com/chart/">found here</a>.</p>
<p>An original pen by <a href="https://codepen.io/ejsado/">Eric</a>.</p>
</main>
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
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700);
body {
font-family: "Open Sans", Arial;
background: #EDEDED;
}
main {
width: 500px;
margin: 10px auto;
padding: 10px 20px 30px;
background: #FFF;
box-shadow: 0 3px 5px rgba(0,0,0,0.2);
}
p {
margin-top: 2rem;
font-size: 13px;
}
#bar-chart {
width: 500px;
height: 300px;
position: relative;
}
#line-chart {
width: 500px;
height: 300px;
position: relative;
}
#bar-chart::before, #line-chart::before {
content: "";
position: absolute;
display: block;
width: 240px;
height: 30px;
left: 155px;
top: 254px;
background: #FAFAFA;
box-shadow: 1px 1px 0 0 #DDD;
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
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawCharts);
function drawCharts() {
// BEGIN BAR CHART
/*
// create zero data so the bars will 'grow'
var barZeroData = google.visualization.arrayToDataTable([
['Day', 'Page Views', 'Unique Views'],
['Sun', 0, 0],
['Mon', 0, 0],
['Tue', 0, 0],
['Wed', 0, 0],
['Thu', 0, 0],
['Fri', 0, 0],
['Sat', 0, 0]
]);
*/
// actual bar chart data
var barData = google.visualization.arrayToDataTable([
['Day', 'Page Views', 'Unique Views'],
['Sun', 1050, 600],
['Mon', 1370, 910],
['Tue', 660, 400],
['Wed', 1030, 540],
['Thu', 1000, 480],
['Fri', 1170, 960],
['Sat', 660, 320]
]);
// set bar chart options
var barOptions = {
focusTarget: 'category',
backgroundColor: 'transparent',
colors: ['cornflowerblue', 'tomato'],
fontName: 'Open Sans',
chartArea: {
left: 50,
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Light Bootstrap Dashboard

Questions / Comments: