Hola buenas,
saben estoy haciendo un proyecto con gráficos hightcharts donde tomo los valores desde un archivo de text y los inserta en una tabla y luego genera el gráfico.
lo que no puedo hacer es que yo tengo una lista opciones para crear donde debo hacer como un reporte de ventas por meses, otro por periodo de 12 meses y uno total.
pero no logro hacer que con selec option encontrar la variable que identifica cada mes para poder hacer una tabla especifica para cada mes y su correspondiente gráfico (esto tmb estoy viendo como hacerlo).
alguna idea o ayuda concreta que puedan coperar.
de antemano muchas gracias
aqui el código que tengo
saben estoy haciendo un proyecto con gráficos hightcharts donde tomo los valores desde un archivo de text y los inserta en una tabla y luego genera el gráfico.
lo que no puedo hacer es que yo tengo una lista opciones para crear donde debo hacer como un reporte de ventas por meses, otro por periodo de 12 meses y uno total.
pero no logro hacer que con selec option encontrar la variable que identifica cada mes para poder hacer una tabla especifica para cada mes y su correspondiente gráfico (esto tmb estoy viendo como hacerlo).
alguna idea o ayuda concreta que puedan coperar.
de antemano muchas gracias
aqui el código que tengo
Código (php) [Seleccionar]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Bare - Start Bootstrap Template</title>
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<body>
</head>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header" >
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Start Bootstrap</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>
<a href="#">About</a>
</li>
<li>
<a href="#">Services</a>
</li>
<li>
<a href="#">Contact</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<!-- Page Content -->
<div class="container">
<script>
var nombres = [];
var valores = [];
</script>
</div>
<br>
<br>
<br>
<br>
<br>
<br>
<p id="demo"></p>
<script>
function meses() {
var x = document.getElementById("mes");
var i = x.selectedIndex;
document.getElementById("demo").innerHTML = x.options[i].text;
}
</script>
<div class="col-lg-12" >
<form method="post" action="" enctype="multipart/form-data">
<input type='file' name="archivo" ><br>
<input type="submit" value="Ingresar" name="boton">
</form>
<br>
<div ><h4>meses</h4>
<select id="meses" onchange="ChangemesList()">
<option value="marzo">Marzo</option>
<option value="abril">Abril</option>
<option value="mayo">Mayo</option>
<option value="junio">Junio</option>
<option value="julio">julio</option>
<option value="agosto">agosto</option>
<option value="septiembre">septiembre</option>
<option value="octubre">octubre</option>
<option value="noviembre">noviembre</option>
<option value="diciembre">diciembre</option>
<option value="enero">enero</option>
<option value="febrero">Febrero</option>
</select>
<select id="años"></select>
<div><h4>Periodos</h4>
<select id="periodo" onchange="ChangeperiodoList()">
<option value="periodo1">enero-diciembre año 1</option>
<option value="periodo2">enero-diciembre año 2</option>
<option value="periodo3">enero-diciembre año 3</option>
</select>
</div>
</div>
<script>
var mesesandaños = {};
mesesandaños['marzo'] = ['1er año', '2do año', '3er año'];
mesesandaños['abril'] = ['1er año', '2do año', '3er año'];
mesesandaños['mayo'] = ['1er año', '2do año', '3er año'];
mesesandaños['junio'] = ['1er año', '2do año', '3er año'];
mesesandaños['julio'] = ['1er año', '2do año', '3er año'];
mesesandaños['agosto'] = ['1er año', '2do año', '3er año'];
mesesandaños['septiembre'] = ['1er año', '2do año', '3er año'];
mesesandaños['octubre'] = ['1er año', '2do año', '3er año'];
mesesandaños['noviembre'] = ['1er año', '2do año', '3er año'];
mesesandaños['diciembre'] = ['1er año', '2do año', '3er año'];
mesesandaños['enero'] = ['1er año', '2do año', '3er año'];
mesesandaños['febrero'] = ['1er año', '2do año', '3er año'];
function ChangemesList() {
var mesesList = document.getElementById("meses");
var añosList = document.getElementById("años");
var selmes = mesesList.options[mesesList.selectedIndex].value;
while (añosList.options.length) {
añosList.remove(0);
}
var meses = mesesandaños[selmes];
if (meses) {
var i;
for (i = 0; i < meses.length; i++) {
var mes = new Option(meses[i], i);
añosList.options.add(mes);
}
}
}
</script>
<br>
<?php
if(isset($_POST['boton'])){
$nombreArchivo = $_FILES['archivo']['name'];
error_reporting(E_ALL ^ E_NOTICE);
$file = fopen($nombreArchivo, "r");
while(!feof($file)) {
$contenido = $contenido.fgets($file);
}
fclose($file);
?>
<div class="table-responsive col-md-5">
<table class="table table-striped table-bordered" >
<thead>
<tr>
<th>Producto</th>
<th>Valores</th>
</tr>
</thead>
<tbody>
<?php
$cosas = explode("&", $contenido);
}
for($i =0; $i<count($cosas); $i++){
$campos = explode(",", $cosas[$i]);
$nombre = $campos[0];
$valor = $campos[1];
$mes= $campos[3];
$año= $campos[4];
echo '<tr><th>'.$nombre.'</th><th><br>'.$valor.'</th></tr>';
?>
<script>
nombres.push(<?php echo json_encode($nombre) ?>);
valores.push(<?php echo json_encode($valor) ?>);
</script>
</tbody>
</table>
</div>
<div class=" col-md-5">
<div id="grafico"></div>
</div>
<script src="bootstrap/js/jquery.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="highcharts/highcharts.js"></script>
<script src="highcharts/exporting.js"></script>
<script src="javascript/funciones.js"></script>
</body>
