<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>
.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;
}
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'
}
}
};
var chart = new google.visualization.LineChart(document.getElementById('linechart_material'));
chart.draw(data, options);
}
$(document).ready(function() {
reloadupdate();
setInterval(function(){
reloadupdate()
}, 25000);
// ajusta a regua
setInterval(function(){
var comprimento = $('circle')[5].getAttribute('cx');
$('.regua').css('width', comprimento);
}, 1500);
});
