Acomodar y Dimensionar Grafico bootstrap

max_mouse699 · #1 (**permalink**) 17/01/2023, 09:36

hola estimada comunidad. Espero que todos ustedes hayan tenido un feliz finde año y un positivo comienzo de año.

Por esta oportunidad vengo con un problema de la cual me ha vuelto loco, ya que me tiene muchas horas pensando en alguna solucion que no funciona. Por tal acudo a algun colega que sepa de esto y me pueda ayudar a entender mas que a hacer el trabajo.

Resulta que tengo un grafico de cajas con muchas carreras que se muestran por la parte del eje x, y al momento de cargar el grafico, en pantalla no se visualizan todas las carreras como corresponde, ya que muestra solo lo que se ve en la imagen:

https://ibb.co/F6zN1KQ

La idea es que, según la resolución y tamaño de mi pantalla de Laptop, pueda verse el grafico de manera completa en la pantalla. Por si acaso para el que pregunte, estas son las características de mi pantalla:

https://ibb.co/zNvtDz7

Y aquí va e tan anhelado y caótico código:
El codigo va en el siguiente post

max_mouse699 · #2 (**permalink**) 17/01/2023, 09:40

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>

max_mouse699 · #3 (**permalink**) 18/01/2023, 16:59

se me olvido mencionar que el grafico que quiero acomodar o quiero arreglar que se visualice todo es este:

<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>

se me olvido mencionar esto !!

danicasas · #4 (**permalink**) 04/04/2023, 14:57

Hola,
No se si ya lo has resuelto, pero yo probaría eso a ver si funciona.
Para saber el ancho de la pantalla:

Código Javascript:

Ver originalvar anchoPantalla = window.innerWidth;

Lo mismo si usas jQuery:

Código Javascript:

Ver originalvar anchoPantalla = $(window).width();

Para cambiar el ancho del gráfico con jQuery:

Código Javascript:

Ver original$(document).ready(function() {
  // Cambiar tamaño del div al 50% del ancho de la pantalla al cargar la página
  
    var anchoPantalla = $(window).width();
    var AnchoDiv = anchoPantalla;
var AltoDiv = AnchoDiv/2;
    $('#chart_div').css('width', AnchoDiv);
 $('#chart_div').css('height', AltoDiv);
 
//Aquí pones el código para dibujar el gráfico
 
// ...
 
var chart = new google.visualization.CandlestickChart(document.getElementById('chart_div'));
 
    chart.draw(data, options);
  
});

Creo que puede funcionar, se trata de cargar elgráfico después de cambiar eltamaño del div contenedor.