Foros del Web » Creando para Internet » HTML »

Acomodar y Dimensionar Grafico bootstrap

Estas en el tema de Acomodar y Dimensionar Grafico bootstrap en el foro de HTML en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 17/01/2023, 09:36
 
Fecha de Ingreso: abril-2011
Mensajes: 66
Antigüedad: 11 años, 9 meses
Puntos: 7
Acomodar y Dimensionar Grafico bootstrap

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
  #2 (permalink)  
Antiguo 17/01/2023, 09:40
 
Fecha de Ingreso: abril-2011
Mensajes: 66
Antigüedad: 11 años, 9 meses
Puntos: 7
Respuesta: Acomodar y Dimensionar Grafico bootstrap

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> 
  #3 (permalink)  
Antiguo 18/01/2023, 16:59
 
Fecha de Ingreso: abril-2011
Mensajes: 66
Antigüedad: 11 años, 9 meses
Puntos: 7
Respuesta: Acomodar y Dimensionar Grafico bootstrap

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



La zona horaria es GMT -6. Ahora son las 20:24.