Despues de largas horas buscando un buena libreria o plugin para hacer reportes graficos, un colega me recomendo utilizar http://www.highcharts.com/ despues de revisar la documentación y los ejemplos, no dude en implemntarlo en mis proyectos, ahora vamos a revisar paso a paso como implementar esta libreria en un proyecto symfony desde 0.
Primero vamos a partir del siguiente schema.yml
Profile:
tableName: t_profile
actAs:
Sluggable: { fields: [ firstname,lastname ] }
Timestampable:
columns:
id: { type: integer , length: 20 , primary: true , autoincrement: true }
dni: { type: string , length: 8 , notnull: true }
firstname: { type: string , length: 100 , notnull: true }
lastname: { type: string , length: 100 , notnull: true }
date_of_birth: { type: date }
gender: { type: string , length: 1 , fixed: true }
image: { type: string , length: 105 , notnull: true }
description: { type: string , length: 5000 }
type: { type: string , length: 1 , fixed: true }
blood_type: { type: string , length: 1 , fixed: true }
marital_status: { type: string , length: 1 , fixed: true }
active: { type: string , length: 1 , fixed: true , notnull: true , default: 0 }
indexes:
i_firstname: { fields: [ firstname ] }
u_dni: { fields: [ dni ] , type: unique }
i_gender: { fields: [ gender ] }
i_active: { fields: [ active ] }
relations:
Height: { class: Height , local: id , foreign: profile_id, type: many, alias: Heights }
Weight:
tableName: t_weight
actAs:
Timestampable:
columns:
id: { type: integer , length: 20 , primary: true , autoincrement: true }
profile_id: { type: integer , length: 20 , notnull: true }
current_weight: { type: decimal , length: 10 , scale: 2 }
date_of_weight: { type: date }
description: { type: string , length: 5000 }
active: { type: string , length: 1 , fixed: true , notnull: true , default: 0 }
indexes:
i_current_weight: { fields: [ current_weight ] }
i_active: { fields: [ active ] }
relations:
Profile: { class: Profile , local: profile_id , foreign: id , type: one , alias: Profile , onDelete: RESTRICT, onUpdate: CASCADE }ahora creamos un poco de data de prueba
Profile: profile_1: dni: '44796683' firstname: 'David Joan' lastname: 'Tataje Mendoza' Weight: weight_1: profile_id: profile_1 current_weight: 70.0 date_of_weight: '2009-09-29 12:34:30' weight_2: profile_id: profile_1 current_weight: 71.0 date_of_weight: '2010-09-29 12:34:30' weight_3: profile_id: profile_1 current_weight: 78.0 date_of_weight: '2011-08-29 12:34:30' weight_4: profile_id: profile_1 current_weight: 80.0 date_of_weight: '2011-09-29 12:34:30'
ahora vamos a descargar las librerias de Higth Chart haciendo Click Aqui
y lo descomprimimos en la carpeta web/js
ahora vamos a crear algunas funciones en la clase Profile.class.php para poder utilizar la libreria
<?php class Profile extends BaseProfile { public function getFullname() { return sprintf("%s %s",$this->getFirstname(),$this->getLastname()); } public function getWeightStringList() { $data = Array(); foreach($this->getWeights() as $weight) { array_push($data,$weight->getCurrentWeight()); } return implode(',',$data); } public function getDateOfWeightList() { $data = Array(); foreach($this->getWeights() as $weight) { array_push($data,"'".date("F Y",strtotime($weight->getDateOfWeight()))."'"); } return implode(',',$data); } }
Ahora creamos una accion para poder probar esta libreria
php symfony generate:app frontend php symfony generate:module frontend Inicio
ahora dentro de la acciones instanciamos al objeto profile.
<?php
class InicioActions extends sfActions
{
public function executeIndex(sfWebRequest $request)
{
$this->profile = Doctrine::getTable('Profile')->findOneById(1);
}
}y en la vista indexSucces.php creamos el javascriot siguiente
<?php use_javascript('chart/highcharts.js') ?>
<php use_javascript('chart/modules/exporting.js') ?>
<script type="text/javascript">
var data_weight = new Array(<?php echo $profile->getWeightStringList(); ?>);
var names_weight = new Array(<?php echo $profile->getDateOfWeightList(); ?>);
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
defaultSeriesType: 'line'
},
title: {
text: 'Reporte Historico de Peso'
},
subtitle: {
text: 'Fuente: Salud Online'
},
xAxis: {
categories: names_weight
},
yAxis: {
title: {
text: 'Peso (Kg)'
}
},
tooltip: {
enabled: false,
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+this.x +': '+ this.y +'°C';
}
},
plotOptions: {
line: {
dataLabels: {
enabled: true
},
enableMouseTracking: false
}
},
series: [{
name: '<?php echo $profile->getFullname(); ?>',
data: data_weight
}]
});
});
</script>
<div id="container" style="width: 670px; height: 670px; margin: 0"></div>no nos olvidemos de cargar el jquery en el archivo view.yml
javascripts: - jquery/jquery-1.4.2.min.js
esto es todo, solo queda probar el resultado, que mas o menos seria este.
el reporte es muy completo, permite exportar el grafico a jpg, png,pdf, etc.
He hecho todo lo que pone, y no me funciona, se queda en blanco la plantilla.
Agradeceria su ayuda.
Hola, puedes revisar este repositorio https://github.com/davidjoan/saludonline/blob/master/apps/frontend/modules/Profile/templates/_height.php, aqui esta la implementación completa de todo el proyecto, tambien revisa si tienes en la carpera js el archivo jquery.