"Google Charts Custom"
Bootstrap 3.3.0 Snippet by victorluissantos

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<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="//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.gstatic.com/charts/loader.js"></script>
<div class="col-lg-8 low-padding">
<div class="panel panel-primary">
<div class="panel-heading panel-primary">
<h3 class="text-center"><i class="fa fa-line-chart ico-dash" aria-hidden="true"></i> Volume Diário</h3>
</div>
<div class="panel-body">
<div style="text-align: left; font-size:12.5px; margin-left:2%;">Média dos últimos 6 meses</div>
<div class="regua" style="width: 192.711px;"></div>
<div id="linechart_material" style="width: 98%; height: 320px"></div>
</div>
</div>
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.regua {
position: absolute;
border-right: 1.2px dashed gray;
margin-left: 0;
z-index: 1;
width: 148px;
height: 71%;
background-color: rgba(195, 197, 202, 0.2);
}
.regua:hover {
border-right: 1.8px dashed gray;
cursor: pointer;
}
div svg g path, div svg g circle {
z-index: 10 !important;
}
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(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Data');
data.addColumn('number', 'Valor');
data.addColumn({type: 'number', role: 'annotation'});
data.addRows([
["09/18",95,95],["10/18",257,257],["11/18",1368,1368],["12/18",1574,1574],
["01/19",2437,2437],["02/19",3105,3105],["1/3",2096,2096],["2/3",1098,1098],
["4/3",361,361],["6/3",1993,1993],["7/3",2744,2744],["8/3",2891,2891],
["9/3",1797,1797],["11/3",3027,3027],["12/3",2996,2996],["13/3",2766,2766],
["14/3",3067,3067],["15/3",3043,3043],["16/3",2374,2374]]);
var options = {
width: 960,
height: 420,
pointSize: 6,
legend: {position: 'none'},
chartArea: {
left: 0,
top: 10},
hAxis: {
gridlines: {
count: -1
}
},
vAxis: {
baselineColor: '#fff',
gridlines: {color: 'black'},
ticks: [0]
},
tooltip: {trigger: 'none'},
annotation: {
1: {
style: 'none'
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: