How to adjust the entire screen according to monitor resolution?
See the image below:
MydashboardisgettingasintheBimageasIcouldtostaylikeA.
I'musingphp+mysql+bootstrap+html.
Followthecodebelow:
<!DOCTYPEhtml><htmllang="pt">
<head>
<link rel="shortcut icon" href="../img/favicon.ico"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="refresh" content="30">
<title>PAINEL DE MONITORAMENTO</title>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script><linkrel="stylesheet" href="bootstrap/style.css">
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="bootstrap/css/datatables.css">
<script src="bootstrap/js/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="bootstrap/js/jquery.dataTables.min.js"></script>
<script src="bootstrap/js/datatables.js"></script>
<style type="text/css">
.size-x {
height: 300px;
width: 300px;
}
.circle {
background: #008000;
color: #fff;
border-radius: 100%;
font-size: 10em;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
justify-content: center;
}
</style>
</head>
<body>
<div class="container-fluid">
<br />
<a href="#" class="btn btn-default btn-lg btn-block">PAINEL DE MONITORAMENTO - TI</a>
<br />
<div class="row">
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading"><center>CHAMADOS FECHADOS HOJE:</center></div>
<div class="panel-body">
<center><div class='size-x circle' style="height: 300px;"><?php echo"$fechados";?></div></center>
</div>
</div>
</div>
<div class="col-md-8">
<div class="panel panel-default">
<div class="panel-heading"><center>AGUARDANDO ATENDIMENTO</center></div>
<div class="panel-body">
<div id="abertos" style="width: 90%; height: 300px;"></div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading"><center>EM ATENDIMENTO</center></div>
<div class="panel-body">
<center>
<div id="analitico" style="width: 90%; height: 300px;"></div>
</center>
</div>
</div>
</div>
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading"><center>EM ATRASO</center></div>
<div class="panel-body">
<center>
<div id="geral" style="width: 90%; height: 300px;"></div>
</center>
</div>
</div>
</div>
</div>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart','bar']});
google.charts.setOnLoadCallback(abertos);
google.charts.setOnLoadCallback(analitico);
google.charts.setOnLoadCallback(geral);
function abertos() {
var data = google.visualization.arrayToDataTable([
['Effort', 'Amount given'],
['EM ABERTOS', <?php echo"$abertos"; ?>],
['AGUARDANDO ATENDIMENTO', <?php echo"$aguardandoat"; ?>],
]);
var options = {
pieHole: 0.5,
pieSliceText : 'value',
pieSliceTextStyle: {
color: 'black',
},
colors: ['#1E90FF', '#FFA500', '#FFA500', '#FF0000','#FF0000'],
is3D:true
};
var chart = new google.visualization.PieChart(document.getElementById('abertos'));
chart.draw(data, options);
}
function analitico() {
var data = google.visualization.arrayToDataTable([
["PERIODO", "VALOR", { role: "style" } ],
["1 DIA", 8.94, "#008000"],
["3 DIAS", 10.49, "#FFFF00"],
["5 DIAS", 19.30, "#FF0000"]
]);
var view = new google.visualization.DataView(data);
view.setColumns([0, 1,
{ calc: "stringify",
sourceColumn: 1,
type: "string",
role: "annotation" },
2]);
var options = {
title: "CHAMADOS EM ATENDIMENTO A:",
is3D:true,
bar: {groupWidth: "80%"},
legend: { position: "none" },
};
var chart = new google.visualization.ColumnChart(document.getElementById("analitico"));
chart.draw(view, options);
}
function geral() {
var data = google.visualization.arrayToDataTable([
["PERIODO", "VALOR", { role: "style" } ],
["1 DIA", 8.94, "#008000"],
["5 DIAS", 10.49, "#7FFF00"],
["7 DIA", 8.94, "#FFFF00"],
["30 DIAS", 10.49, "#FF8C00"],
["ACIMA DE 30 DIAS", 19.30, "#FF0000"]
]);
var view = new google.visualization.DataView(data);
view.setColumns([0, 1,
{ calc: "stringify",
sourceColumn: 1,
type: "string",
role: "annotation" },
2]);
var options = {
title: "CHAMADOS EM ATENDIMENTO A:",
bar: {groupWidth: "80%"},
legend: { position: "none" },
is3D:true,
};
var chart = new google.visualization.ColumnChart(document.getElementById("geral"));
chart.draw(view, options);
}
</script>
</body>
</html>