PHP dentro de Javascript

[eliza_ralves]

Hola!! Espero me puedan ayudar con esto, revise en el foro acerca de mi duda pero quede igual!

Estoy intentando hacer unas graficas por medio de javascript, la cuestion es que quiero que en una parte donde coloco el texto de la grafica (javascript) me tome en valor de una variable de otro archivo en PHP.

Para que me explique mejor quiero que mi variable $tipo esté dentro de esta pequeña parte del javascript:

title: {
text: 'Data extracted from a HTML table in the page'
},


He intentado colocar lo suiguiente:

1.- title: {
text: ' <?= $tipo;?>'
},

2.- title: {
text: ' <?= $tipo;?>'
},

pero no me muestra es valor de la variable (haciendolo de las formas anteriores me muestra el grafico pero sin el titulo, que es lo que quiero que aparezca y no aparece )

Si alguien me puede ayudar, estaría muy AGRADECIDA! ya que lo encesito para colocar otras cosas dentro del javascript.

Gracias!!!

[laratik]

Hola eliza_ralves, que tal con un echo:

Código PHP:

  <?php echo $tipo;?>   

[eliza_ralves]

Hola Laratik! nop, ya había intentado así, pero como que no lo entiende puesto a que debe estar entre ' ' para que lo entienda como un texto.

Como me dices, no muestra siquiera la grafica.

Intente de esta otra forma : ' " + <?php echo $tipo ?> + " ' pero lo que me muestra es "+ +"

No me reconoce la variable.

Y de esta forma: me muestra el grafico, mas no la variable -> text: ' <?php echo $tipo ?> '

[laratik]

Tal vez sea una pregunta algo tonta, pero ¿estas segura que estas inicializando correctamente la variable $tipo? Según cuentas pareciera que el problema radica en que la variable como tal se encuentra vacía. Intenta mostrarla en otra parte del script o muéstranos como la estas instanciando.

[eliza_ralves]

Si lo trae "null" en el script aparece lo siguiente:

var tipoG = document.getElementById('title');
alert(tipoG);

y la variable se encuentra en un archivo obtenerGrafico.php el cual es la que recibe los datos del registro_grafico.php.

$tipo_grafico= $_POST['tipo'];

if ($tipo_grafico == 'P')
$tipo='Proyecto';

if ($tipo_grafico == 'A')
$tipo='Actividad';

if ($tipo_grafico == 'G')
$tipo='General';

if ($tipo_grafico == 'PC')
$tipo='Porcentaje';

cómo hago el include en javascript? o cómo se haría para pasarle el valor de esa variable?

[IsaBelM]

mas que una variable, necesitas crear una variable de sesión. para que así tengas acceso a ella desde el archivo donde se procesa el javascript

[eliza_ralves]

gracias IsaBelM! pero intento crear la variable de sesión, y al mostrarlo en el mismo archivo .php y no me toma el valor, lo estoy de esta forma:

$tipo_grafico= $_POST['tipo'];
$tipoG= $_SESSION['tipo_grafico'];

cómo haría luego para accesarlo dentro del javascript?

[IsaBelM]

no se nada de php, pero creo que sería

<?php echo $_SESSION['tipo_grafico'];?>

[laratik]

Hola nuevamente, aunque no estoy de acuerdo en abusar de las variables de session (Por algo son de session, por que sirven para establecer sessiones), debes hacer lo siguiente:

Código PHP:

  session_start();
$tipo_grafico= $_POST['tipo'];
 
if ($tipo_grafico == 'P')
$tipo='Proyecto';
 
if ($tipo_grafico == 'A')
$tipo='Actividad';
 
if ($tipo_grafico == 'G')
$tipo='General';
 
if ($tipo_grafico == 'PC')
$tipo='Porcentaje';
 
$_SESSION["tipo"] = $tipo; 
   

y luego cuando vayas a utilizarlo dentro de tu javascript debes iniciar de nuevo las variables de session:

Código PHP:

 title: {
text: ' <?php session_start(); echo $_SESSION["tipo"];?>'
},  

Aunque te repito, para eso no están pensadas las sessiones, mi solución seria más simple, realizar un require del script que este manejando la instanciación de la variable sobre el script que maneja tu javascript y ya dependiendo del alcance (scope, I speak english ) de la variable puedes utilizarla sin problemas. Si ni la solución de IsaBelM, ni la mía logran solucionar tu problema, deberías describir de mejor manera como están estructurados tus scripts (donde esta la variable, dentro de una función, una clase, un namespace, a la deriva).

[eliza_ralves]

Hola Laratik, disculpa la demora en responder, no, no me funciona. Te explico como esta estructurado los archivos:

javascript
>prueba.js ---> mi javascript
modulos
>graficos
>objenerGrafico.php ---> mi php (dentro de la carpeta graficos)

En mi obtenerGrafico.php obtengo los valores del formulario para graficar:

Código HTML:

<body>
        <?php

            $rol_Actual = $_SESSION['Rol'];
            $username = $_SESSION['Username'];
            
            $tipo_grafico= $_POST['tipo'];

            $fechaInicio = $_POST['fechaCalend1'];
            $fechaFinal= $_POST['fechaCalend2'];
 
            if ($tipo_grafico == 'P')
             $tipo='Proyecto';

            $_SESSION["tipo"] = $tipo; 
              
        include "../../includes/header.php";
        
        ?>

<div id="page-bgtop" class="formulario">
        
 <!--  Inicio de la Presentacion del Grafico -->
            <form id='obtenerGrrafico' action='reporte_grafico.php' method="post" >
            
             <!-- Para Acción sobre los Graficos -->
                <script type="text/javascript" src="../../javascript/prueba.js" ></script>

                <div id="container" style="width: 800px; height: 400px; margin:0 auto"></div>
               <table border="0" id="datatable" title="<?php echo $tipo; ?>" cellpadding="5" cellspacing="5" summary="Presentacion del grafico estadiastico">

<!-- codigo de la tabla para obtener los valores -->

</table>

</form>

</body> 

El javascript :

Código:

			/**
			 * Visualize an HTML table using Highcharts. The top (horizontal) header 
			 * is used for series names, and the left (vertical) header is used 
			 * for category names. This function is based on jQuery.
			 * @param {Object} table The reference to the HTML table to visualize
			 * @param {Object} options Highcharts options
			 */

			Highcharts.visualize = function(table, options) {
				// the categories
				options.xAxis.categories = [];
				$('tbody th', table).each( function(i) {
					options.xAxis.categories.push(this.innerHTML);
				});
				
				// the data series
				options.series = [];
				$('tr', table).each( function(i) {
					var tr = this;
					$('th, td', tr).each( function(j) {
						if (j > 0) { // skip first column
							if (i == 0) { // get the name and init the series
								options.series[j - 1] = { 
									name: this.innerHTML,
									data: []
								};
							} else { // add values
								options.series[j - 1].data.push(parseFloat(this.innerHTML));
							}
						}
					});
				});
				
				var chart = new Highcharts.Chart(options);
			}
            
			// On document ready, call visualize on the datatable.
			$(document).ready(function() {			
				var table = document.getElementById('datatable'),
				options = {
					   chart: {
					      renderTo: 'container',
					      defaultSeriesType: 'column'
					   },
					   title: {
					      text: '<?php session_start(); echo $_SESSION["tipo"];?>'
					   },
					   xAxis: {
                       title: {
					         text: 'Período de Tiempo (Meses)'
					      }
					   },
					   yAxis: {
					      title: {
					         text: 'Horas / Hombre'
					      }
					   },
					   tooltip: {
					      formatter: function() {
					         return '<b>'+ this.series.name +'</b><br/>'+
					            this.y +' H/H';
					      }
					   }
					};
				
			      					
				Highcharts.visualize(table, options);
			});

[laratik]

He ahí el meollo del asunto :

>prueba.js ---> mi javascript

Un archivo javascript (js) no puede interpretar php, debería ser un archivo con extensión php y cabecera javascript, por lo cual deberas colocar dentro de prueba.php:

Código PHP:

  <?php Header("content-type: application/x-javascript"); ?>   

La llamada al archivo con funciones externas deberia ser:

Código HTML:

<script type="text/javascript" src="prueba.php"></script> 

De esta manera tu javascript aceptara variables php, otra cosa que me da curiosidad es no ver el session_start(); en obtenerGrafico.php pero me imagino que deberá estar antes del body. Espero que esta vez si funcione lo que deseas hacer.

[eliza_ralves]

Gracias Laratik! Si, eso era lo que no quería hacer, poner el codigo js dentro del código .php

Pero ni modo!



muchísimas gracias!!

[eliza_ralves]

Al final lo coloque de la siguiente manera, y coloque la variable directo $tipo:

Código HTML:

<form id='obtenerGrrafico' action='reporte_grafico.php' method="post" >
              
                <div class="centered">
                
                <!-- Para Acción sobre los Graficos -->
                <script type="text/javascript">
                
                <!-- Parte del script -->
            
			// On document ready, call visualize on the datatable.
			$(document).ready(function() {			
				var table = document.getElementById('datatable'),
				options = {
					   chart: {
					      renderTo: 'container',
					      defaultSeriesType: 'column'
					   },
					   title: {
					      text: 'Gráfico <?php echo $tipo;?>'
					   },
					   xAxis: {
                       title: {
					         text: 'Período de Tiempo (Meses)'
					      }
					   },
					   yAxis: {
					      title: {
					         text: 'Horas / Hombre'
					      }
					   },
					   tooltip: {
					      formatter: function() {
					         return '<b>'+ this.series.name +'</b><br/>'+
					            this.y +' H/H'  ;
					      }
					   }
					};
				
			      					
				Highcharts.visualize(table, options);
			});  
                </script>
</script>

                <div id="container" style="width: 800px; height: 400px; margin:0 auto"></div>

</form>