manejo de chronoline, php y mysql

dj15_basto · #1 (**permalink**) 23/04/2014, 08:15

disculpen alguien puede ayudarme esto trbajando con la libreria chronolinepero no hay muchas informacion quiero saber si se puede introducir un bd en ellaeste es el codigo

Código PHP:

  <!DOCTYPE html> 
<html> 
 <head> 
    <meta charset='utf-8' /> 
    <meta http-equiv="X-UA-Compatible" content="chrome=1" /> 
    <meta name="description" content="Chronoline.js : chronoline.js is a library for making a chronology timeline out of events on a horizontal timescale." /> 
<link rel="stylesheet" type="text/css" media="screen" href="stylesheets/stylesheet.css"> 
 <title>Chronoline.js</title> 
  </head> 
 <body> 
 <div id="target1" class="timeline-tgt"> 
 </div> 
<div id="footer_wrap" class="outer"> 
      <footer class="inner"> 
 </footer> 
    </div> 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
    <link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/qtip2/2.0.1/jquery.qtip.min.css" /> 
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/qtip2/2.0.1/jquery.qtip.min.js"></script> 
<script type="text/javascript" src="chronoline/raphael-min.js"></script> 
<link rel="stylesheet" type="text/css" href="chronoline/chronoline.css" /> 
<script type="text/javascript" src="chronoline/chronoline.js"></script> 
     
    <script type="text/javascript"> 
      $(document).ready(function(){ 
 
      var events = [ 
      {dates: [new Date(2014, 3, 8)], title: "2011 Season Opener", section: 0}, 
      {dates: [new Date(2014, 3, 8)], title: "Spring Training Begins", section: 2}, 
      {dates: [new Date(2014, 3, 5)], title: "Atlanta Braves @ New York Mets Game 1", section: 1}, 
      {dates: [new Date(2014, 3, 7)], title: "Atlanta Braves @ New York Mets Game 2", section: 1}, 
      {dates: [new Date(2014, 3, 8)], title: "Atlanta Braves @ New York Mets Game 3", section: 1}, 
      {dates: [new Date(2014, 3, 10)], title: "All-Star Game", section: 1}, 
      {dates: [new Date(2014, 3, 11)], title: "World Series Begins", section: 3} 
      ]; 
 
      var sections = [ 
      {dates: [new Date(2014, 0, 1), new Date(2014, 12, 30)], title: "Procesos", section: 0, attrs: {fill: "#d4e3fd"}} 
       
      ]; 
 
      var timeline1 = new Chronoline(document.getElementById("target1"), events, 
        {animated: true, 
         tooltips: true, 
         defaultStartDate: new Date(2014, 3, 1), 
         sections: sections, 
         sectionLabelAttrs: {'fill': '#997e3d', 'font-weight': 'bold'}, 
      }); 
 
      $('#to-today').click(function(){timeline1.goToToday();}); 
 
      var sections2 = [ 
      {dates: [new Date(2014, 0, 1), new Date(2014, 11, 31)], title: "Procesos", section: 0, attrs: {fill: "##e3f0fe"}} ]; 
 
      var timeline2 = new Chronoline(document.getElementById("target2"), events, 
        {visibleSpan: DAY_IN_MILLISECONDS * 91, 
      animated: true, 
         tooltips: true, 
         defaultStartDate: new Date(2014, 4, 1), 
         sections: sections2, 
         sectionLabelAttrs: {'fill': '#997e3d', 'font-weight': 'bold'}, 
      labelInterval: isFifthDay, 
      hashInterval: isFifthDay, 
      scrollLeft: prevMonth, 
      scrollRight: nextMonth, 
      markToday: 'labelBox', 
         draggable: true 
      }); 
 
      var timeline3 = new Chronoline(document.getElementById("target3"), events, 
        {visibleSpan: DAY_IN_MILLISECONDS * 366, 
      animated: true, 
         tooltips: true, 
         defaultStartDate: new Date(2014, 4, 1), 
         sections: sections, 
         sectionLabelAttrs: {'fill': '#997e3d', 'font-weight': 'bold'}, 
      labelInterval: isHalfMonth, 
      hashInterval: isHalfMonth, 
      scrollLeft: prevQuarter, 
      scrollRight: nextQuarter, 
      floatingSubLabels: false, 
      }); 
 
      }); 
    </script> 
 
  </body> 
</html>

me crea lalinea de tiempo pero nose como poner el codigo mysql en el

hhs · #2 (**permalink**) 23/04/2014, 09:07

tienes que hacer tu consulta, y recorrer el resultado mediante un while y vaciar lo que necesitas en esta parte:

Código Javascript:

Ver originalvar events = [ 
      {dates: [new Date(2014, 3, 8)], title: "2011 Season Opener", section: 0}, 
      {dates: [new Date(2014, 3, 8)], title: "Spring Training Begins", section: 2}, 
      {dates: [new Date(2014, 3, 5)], title: "Atlanta Braves @ New York Mets Game 1", section: 1}, 
      {dates: [new Date(2014, 3, 7)], title: "Atlanta Braves @ New York Mets Game 2", section: 1}, 
      {dates: [new Date(2014, 3, 8)], title: "Atlanta Braves @ New York Mets Game 3", section: 1}, 
      {dates: [new Date(2014, 3, 10)], title: "All-Star Game", section: 1}, 
      {dates: [new Date(2014, 3, 11)], title: "World Series Begins", section: 3} 
      ];

Ya tienes la idea general ahora solo tienes que ponerte a trabajar.

rrcfesc · #3 (**permalink**) 23/04/2014, 11:28

Si se puede, recuerda que la extension de tu archivo deberá de ser .php, y de manera común y corriente, puedes agreagar la conexion a la base de datos. te recomiendo que busques un pequeño tutorial de php y mysql

dj15_basto · #4 (**permalink**) 30/04/2014, 12:55

ya tengo la consulta pero solo me da el primer dato de la consulta alguien puede ayudar para ver como puedo hacer para que me sirvan tados los datos de fecha que tengo en mi tabla

Código PHP:

Ver original<?php
  $result = mysql_query("SELECT * FROM bitacora ");
$nConfig = mysql_num_rows ($result);
while($r = mysql_fetch_array($result)) {
       
        $fecha= $r['fecha'];
        $sqldate=date('Y,m,d',strtotime($fecha));
        $id=$r['idUsuario'];    
        
        
  ?>          
    <script type="text/javascript">
      $(document).ready(function(){
 
var ini=new Date(<?php echo $sqldate?>);
 
anio1= ini.getFullYear() + ',' + ini.getMonth() + ',' + ini.getDate();
var events = [
      {dates: [new Date(anio1)], title: "<?php echo $id?>'<br>'<?php echo $sqldate?>", section: 0},
      {dates: [new Date(anio2)], title: "<?php echo $id?>'<br>'<?php echo $sqldate?>", section: 2},
      {dates: [new Date(anio1)], title: "<?php echo $id?><br>fecha inicio'<?php echo $sqldate?>'<br>fecha final'<?php echo $sqldate?>'", section: 0}
      
      ];
</Script><? }?>