Código HTML:
<!DOCTYPE html>
<html lang="en">
<body id="page-top">
<div id="overlay">
<div id="progstat"></div>
<div id="progress"></div>
</div>
<!-- Page Wrapper -->
<div id="wrapper">
<!-- Content Wrapper -->
<div id="content-wrapper" class="d-flex flex-column">
<!-- Main Content -->
<div id="content">
<!-- Begin Page Content -->
<div class="container-fluid">
<!-- /.container-fluid -->
</div>
<div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">
<div class="row">
<div class="col-md-12" align="center">
<h2>Descriptivos</h2>
</div>
</div>
<br>
<br>
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-1"></div>
</div>
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-10" id="testing" style="padding-top:15">
<center>
<div id="chart_div"></div>
</center>
</div>
<div class="col-md-1"></div>
</div>
<br>
<br>
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-10" style="padding-top:15">
<img class="content" style="display: none;">
<canvas id="canvas"></canvas>
</div>
<div class="col-md-1"></div>
</div>
<br>
<br>
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-10" style="padding-top:15">
<img class="content" style="display: none;">
<canvas id="canvas2"></canvas>
</div>
<div class="col-md-1"></div>
</div>
<br>
<br>
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-10" style="padding-top:15">
<img class="content" style="display: none;">
<canvas id="canvas3"></canvas>
</div>
<div class="col-md-1"></div>
</div>
<br>
<br>
</div>
<div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">
<div class="row">
</div>
<script type="text/javascript">
//grafico de cajas
google.charts.load('current', {
'packages': ['corechart']
});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Todas las instituciones',
<?php echo $TP_1 ?>,
<?php
$r1 = get_percentile(25, ${"Array_TP"});
echo $r1 ?>,
<?php
$r3 = get_percentile(75, ${"Array_TP"});
echo $r3 ?>,
<?php
$english_format_number = number_format($TP_2, 1, '.', '');
echo $english_format_number ?>
],
['Mi institución',
<?php echo ${"Min_CI"} ?>,
<?php
$r1 = get_percentile(25, ${"Array_CI"});
echo $r1 ?>,
<?php
$r3 = get_percentile(75, ${"Array_CI"});
echo $r3 ?>,
<?php
$english_format_number = number_format(${"Max_CI"}, 1, '.', '');
echo $english_format_number ?>
],
<?php
$query2 = ("SELECT DISTINCT(r.Carrera), c.descripcion FROM Respuestas as r
JOIN tbl_carrera as c
ON r.Carrera = c.id_interno
WHERE `Univ`='$Univ' && `Fecha_Respuesta`='$periodo' ORDER BY r.Carrera ASC");
$resultado2 = mysql_query($query2);
while ($mostrar = mysql_fetch_array($resultado2)) {?>
['<?php echo $mostrar['descripcion'] ?>',
<?php echo ${"Min_C" . $mostrar['Carrera']} ?>,
<?php
$r1 = get_percentile(25, ${"Array_C" . $mostrar['Carrera']});
echo $r1 ?>,
<?php
$r3 = get_percentile(75, ${"Array_C" . $mostrar['Carrera']});
echo $r3 ?>,
<?php
$english_format_number = number_format(${"Max_C" . $mostrar['Carrera']}, 1, '.', '');
echo $english_format_number ?>],
<?php } ?>
// Treat first row as data as well.
], true);
var options = {
backgroundColor: "transparent",
legend: 'none',
'width': 1350,
'height': 450,
vAxis: {
viewWindow: {
min: 0,
max: 9
},
ticks: [0, 3, 6, 9]
}
};
var chart = new google.visualization.CandlestickChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</div>
<!-- Footer -->
<footer class="sticky-footer bg-white">
<div class="container my-auto">
<div class="copyright text-center my-auto">
<span>Contacto: <i class="fas fa-envelope"></i> [email protected]</span>
</div>
</div>
</footer>
<!-- End of Footer -->
</div>
<!-- End of Content Wrapper -->
</div>
<!-- End of Page Wrapper -->
</div>
<!-- Scroll to Top Button-->
<a class="scroll-to-top rounded" href="#page-top">
<i class="fas fa-angle-up"></i>
</a>
<!-- Bootstrap core JavaScript-->
<script src="../vendor/jquery/jquery.min.js"></script>
<script src="../vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- Core plugin JavaScript-->
<script src="../vendor/jquery-easing/jquery.easing.min.js"></script>
<!-- Custom scripts for all pages-->
<script src="../js/sb-admin-2.min.js"></script>
<!-- Estilo botones definicion de variables -->
<style TYPE="text/css" MEDIA=screen>
.modalDialog {
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, 0.8);
z-index: 99999;
opacity: 0;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
}
.modalDialog:target {
opacity: 1;
pointer-events: auto;
}
.modalDialog>div {
width: 600px;
position: relative;
margin: 10% auto;
padding: 5px 20px 13px 20px;
border-radius: 10px;
background: #fff;
background: -moz-linear-gradient(#fff, #fff);
background: -webkit-linear-gradient(#fff, #fff);
background: -o-linear-gradient(#fff, #fff);
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
}
.close {
background: #00d9ff;
color: #000000;
line-height: 30px;
position: absolute;
right: -12px;
text-align: center;
top: -10px;
width: 35px;
text-decoration: none;
font-weight: bold;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
opacity: .8;
}
.close:hover {
background: #1B33B0;
}
.center {
margin-left: 35%;
}
.chart {
width: 100%;
min-height: 450px;
}
.row {
margin: 0 !important;
}
</style>
</body>
</html>