Foro de elhacker.net

Programación => PHP => Mensaje iniciado por: archowl en 3 Diciembre 2016, 19:08 pm


Título: Crear graficos dinamicos sin base de datos
Publicado por: archowl en 3 Diciembre 2016, 19:08 pm
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
Código
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.  
  6.     <meta charset="utf-8">
  7.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  8.     <meta name="viewport" content="width=device-width, initial-scale=1">
  9.     <meta name="description" content="">
  10.     <meta name="author" content="">
  11.  
  12.     <title>Bare - Start Bootstrap Template</title>
  13.     <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
  14.  
  15.    <body>
  16.     </head>
  17.         <nav class="navbar navbar-inverse navbar-fixed-top"  role="navigation">
  18.         <div class="container">
  19.             <!-- Brand and toggle get grouped for better mobile display -->
  20.             <div class="navbar-header" >
  21.                 <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
  22.                     <span class="sr-only">Toggle navigation</span>
  23.                     <span class="icon-bar"></span>
  24.                     <span class="icon-bar"></span>
  25.                     <span class="icon-bar"></span>
  26.                 </button>
  27.                 <a class="navbar-brand" href="#">Start Bootstrap</a>
  28.             </div>
  29.             <!-- Collect the nav links, forms, and other content for toggling -->
  30.             <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
  31.                 <ul class="nav navbar-nav">
  32.                     <li>
  33.                         <a href="#">About</a>
  34.                     </li>
  35.                     <li>
  36.                         <a href="#">Services</a>
  37.                     </li>
  38.                     <li>
  39.                         <a href="#">Contact</a>
  40.                     </li>
  41.                 </ul>
  42.             </div>
  43.             <!-- /.navbar-collapse -->
  44.         </div>
  45.         <!-- /.container -->
  46.     </nav>
  47.  
  48.     <!-- Page Content -->
  49.     <div class="container">
  50.  
  51.     <script>
  52.         var nombres = [];
  53.         var valores = [];
  54.     </script>    
  55.  
  56.     </div>
  57.     <br>
  58.     <br>
  59.     <br>
  60.     <br>
  61.     <br>
  62.     <br>
  63.  
  64.     <p id="demo"></p>
  65.  
  66. <script>
  67. function meses() {
  68.     var x = document.getElementById("mes");
  69.     var i = x.selectedIndex;
  70.     document.getElementById("demo").innerHTML = x.options[i].text;
  71. }
  72. </script>
  73.     <div class="col-lg-12" >
  74.         <form  method="post" action="" enctype="multipart/form-data">
  75.             <input type='file' name="archivo"  ><br>
  76.             <input type="submit" value="Ingresar" name="boton">
  77.  
  78.  
  79.         </form>
  80.              <br>
  81.              <div ><h4>meses</h4>
  82.             <select id="meses" onchange="ChangemesList()"> 
  83.             <option value="marzo">Marzo</option> 
  84.             <option value="abril">Abril</option> 
  85.             <option value="mayo">Mayo</option> 
  86.             <option value="junio">Junio</option>
  87.             <option value="julio">julio</option> 
  88.             <option value="agosto">agosto</option>
  89.             <option value="septiembre">septiembre</option> 
  90.             <option value="octubre">octubre</option> 
  91.             <option value="noviembre">noviembre</option> 
  92.             <option value="diciembre">diciembre</option> 
  93.             <option value="enero">enero</option> 
  94.             <option value="febrero">Febrero</option>
  95.             </select>  
  96.  
  97.             <select id="años"></select> 
  98.  
  99.  
  100.  
  101.  
  102.  
  103.  
  104.              <div><h4>Periodos</h4>
  105.            <select id="periodo" onchange="ChangeperiodoList()"> 
  106.             <option value="periodo1">enero-diciembre año 1</option> 
  107.             <option value="periodo2">enero-diciembre año 2</option>
  108.             <option value="periodo3">enero-diciembre año 3</option>
  109.             </select>
  110.             </div>
  111.  
  112.  
  113.     </div>
  114.     <script>
  115.         var mesesandaños = {};
  116.             mesesandaños['marzo'] = ['1er año', '2do año', '3er año'];
  117.             mesesandaños['abril'] = ['1er año', '2do año', '3er año'];
  118.             mesesandaños['mayo'] = ['1er año', '2do año', '3er año'];
  119.             mesesandaños['junio'] = ['1er año', '2do año', '3er año'];
  120.             mesesandaños['julio'] = ['1er año', '2do año', '3er año'];
  121.             mesesandaños['agosto'] = ['1er año', '2do año', '3er año'];
  122.             mesesandaños['septiembre'] = ['1er año', '2do año', '3er año'];
  123.             mesesandaños['octubre'] = ['1er año', '2do año', '3er año'];
  124.             mesesandaños['noviembre'] = ['1er año', '2do año', '3er año'];
  125.             mesesandaños['diciembre'] = ['1er año', '2do año', '3er año'];
  126.             mesesandaños['enero'] = ['1er año', '2do año', '3er año'];
  127.             mesesandaños['febrero'] = ['1er año', '2do año', '3er año'];
  128.  
  129.  
  130.  
  131.         function ChangemesList() {
  132.          var mesesList = document.getElementById("meses");
  133.          var añosList = document.getElementById("años");
  134.          var selmes = mesesList.options[mesesList.selectedIndex].value;
  135.     while (añosList.options.length) {
  136.         añosList.remove(0);
  137.     }
  138.     var meses = mesesandaños[selmes];
  139.     if (meses) {
  140.         var i;
  141.         for (i = 0; i < meses.length; i++) {
  142.             var mes = new Option(meses[i], i);
  143.             añosList.options.add(mes);
  144.         }
  145.     }
  146. } 
  147. </script>
  148.         <br>        
  149.     <?php
  150.         if(isset($_POST['boton'])){
  151.             $nombreArchivo = $_FILES['archivo']['name'];
  152.             error_reporting(E_ALL ^ E_NOTICE);
  153.             $file = fopen($nombreArchivo, "r");
  154.             while(!feof($file)) {
  155.                 $contenido = $contenido.fgets($file);
  156.             }
  157.             fclose($file);
  158.  
  159.     ?>
  160.  
  161.     <div class="table-responsive col-md-5">
  162.         <table class="table table-striped table-bordered" >
  163.             <thead>
  164.                 <tr>
  165.                     <th>Producto</th>
  166.                     <th>Valores</th>
  167.                 </tr>
  168.             </thead>
  169.             <tbody>
  170.                 <?php
  171.                 $cosas = explode("&", $contenido);
  172.  
  173.                 }
  174.                 for($i =0; $i<count($cosas); $i++){
  175.                     $campos = explode(",", $cosas[$i]);
  176.                     $nombre = $campos[0];
  177.                     $valor = $campos[1];
  178.                     $mes= $campos[3];
  179.                     $año= $campos[4];
  180.                     echo '<tr><th>'.$nombre.'</th><th><br>'.$valor.'</th></tr>';
  181.                     ?>            
  182.                 <script>
  183.  
  184.                     nombres.push(<?php echo json_encode($nombre) ?>);
  185.                     valores.push(<?php echo json_encode($valor) ?>);
  186.                 </script>
  187.             </tbody>
  188.         </table> 
  189.     </div>
  190.  
  191.     <div class=" col-md-5">
  192.         <div id="grafico"></div>
  193.     </div>
  194.  
  195.     <script src="bootstrap/js/jquery.js"></script>
  196.     <script src="bootstrap/js/bootstrap.min.js"></script>
  197.     <script src="highcharts/highcharts.js"></script>
  198.     <script src="highcharts/exporting.js"></script>
  199.     <script src="javascript/funciones.js"></script>
  200.  
  201.  
  202.    </body>
  203.  





Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines