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);
});