Micaela 5 de Noviembre de 2009 a las 08.41
   Imprimir artículo
elWebmaster.com

Crea gráficos estadísticos dinámicos con Mootols

PHP, recursos, javascript, Diseño Gráfico, gráficos, estadísticas, mootools, milkchart

mootools-chartLa perspectiva de crear gráficos mediante JavaScript es excitante, y también es el uso ideal para este lenguaje de programación.

En este artículo les mostramos una mezcla de PHP, HTML, JavaScript MooTools y MilkChart que se conectará con Google Analytics y dará como resultado... ¡Un gráfico con nuestras estadísticas!

milkchart-1

El PHP

PLAIN TEXT
  1. /* defaults */
  2. $month = date('n');
  3. $year = date('Y');
  4. $type = 'Column';
  5.  
  6. /* submission? */
  7. if($_GET['month'] || $_GET['year']):
  8.     /* cleanse lookups */
  9.     $month = (int) $_GET['month']; if(!$month) { $month = 1; }
  10.     $year = (int) $_GET['year']; if(!$year) { $year = date('Y'); }
  11.     /* retrieve information from google analytics */
  12.     require 'ga/analytics.class.php';
  13.     $analytics = new analytics('youraccount@gmail.com', 'yourP@ss');
  14.     $analytics->setProfileByName('yourdomain.com');
  15.     $analytics->setMonth($month,$year);
  16.     $visits = $analytics->getVisitors();
  17.     $views = $analytics->getPageviews();
  18.     /* build tables */
  19.     if(count($visits)) {
  20.         //visits - php
  21.         $visits_table_data = '<table id="data-table-visits">';
  22.         /* $visits_table_data.= '<thead><tr><th>Unique Visits</th><th>PageViews</th></tr></head><tbody>'; */
  23.         $visits_table_data.= '<thead><tr><th>Unique Visits</th></tr></head><tbody>';
  24.         foreach($visits as $day=>$visit) {
  25.             /*
  26.             $visits_table_data.= '<tr><td>'.$visit.'</td><td>'.$views[$day].'</td></tr>'."\n";
  27.             $visits_table_foot.= '<td>'.$day.'</td><td>'.$day.'</td>'."\n";
  28.             */
  29.             $visits_table_data.= '<tr><td>'.$visit.'</td></tr>'."\n";
  30.             $visits_table_foot.= '<td>'.$day.'</td>'."\n";
  31.         }
  32.         $visits_table_data.= '</tbody>';
  33.         $visits_table_data.= '<tfoot><tr>'.$visits_table_foot.'</tr></tfoot>';
  34.         $visits_table_data.= '</table>';
  35.     }
  36. endif;

Todo comienza mediante la obtención de la información de Google Analytics. Simplemente proporciona el marco de tiempo que deseas para las estadísticas. Por lo general se opta por recuperar la estadística del mes.

El HTML generado y el JavaScript de MooTools

PLAIN TEXT
  1. <h2>Select Your Month/Year</h2>
  2. <form method="get">
  3.     <select name="month" id="month">
  4.         <option value="">-- Select Month --</option>
  5.         <?php
  6.             for($x = 1; $x <= 12; $x++):
  7.                 echo '<option value="',$x,'"',($month == $x ? ' selected="selected"' : ''),'>',date('F',mktime(0,0,0,$x,1,2009)),'</option>';
  8.             endfor;
  9.         ?>
  10.     </select>
  11.     <select name="year" id="year">
  12.         <option value="">-- Select Year --</option>
  13.         <?php
  14.             for($x = 2008; $x <= date('Y'); $x++):
  15.                 echo '<option value="',$x,'"',($year == $x ? ' selected="selected"' : ''),'>',$x,'</option>';
  16.             endfor;
  17.         ?>
  18.     </select>
  19.     <select name="type" id="type">
  20.         <option value="">-- Select Chart Type --</option>
  21.         <?php
  22.             $chart_types = array('Column','Bar','Line','Scatter','Pie');
  23.             foreach($chart_types as $chart_type):
  24.                 echo '<option value="',$chart_type,'"',($type == $chart_type ? ' selected="selected"' : ''),'>',$chart_type,'</option>';
  25.             endforeach;
  26.         ?>
  27.     </select>
  28.     <input type="submit" name="submit" id="submit" value="Get Statistics!" />
  29. </form>
  30.  
  31. <?php
  32.     //php time - echo tables
  33.     if($visits_table_data) { echo '<h3>Visits</h3>', $visits_table_data,'<br />'; }
  34. ?>
  35. <?php if(count($visits)): ?>
  36.     <script type="text/javascript">
  37.         var visits = new MilkChart.<?php echo $_GET['type']; ?>('data-table-visits',{
  38.             width: 960,
  39.             height: 550,
  40.             font: 'tahoma',
  41.             showValues: false,
  42.             useFooter: true
  43.         });
  44.     </script>
  45. <?php endif; ?>

Utilizando los elementos THEAD, TBODY, y TFOOT es extremadamente importante para asegurar que las etiquetas correctas son colocadas dentro del gráfico generado. La tabla de información en sí es bastante simple. MilkChart tomará la tabla de arriba y creará un elemento CANVAS que contendrá el gráfico.

Existen 5 tipos de gráficos diferentes entre los que pueden elegir: Columnas, Barras, Pastel, Líneas, Scatter. MilkChart aprovecha al máximo el modelo de herencia de MooTools' dado que cada tipo de clase de gráfico extiende la clase base de MilkChart.

Haz clic aquí para ver la Demo »

Fuente: David Walsh Blog


Enviar a Del.icio.us Enviar a Meneame Enviar a Digg Enviar a Fresqui Enviar a Enchilame

Artículos relacionados

Deja tu opinión

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Iniciar sesión