Agregar fecha actual al gráfico Timeline de Google Chart API

Este es un pequeño truco para agregar una línea que marque la fecha actual en el gráfico de Timeline provisto por Google Chart Api.

El resultado es el que se ve en esta imagen:

El truco consiste en:

• Crear una tarea de un día que marque la fecha actual
• Usar jQuery para encontrarla y darle una altura a la tarea para que traspase a las demás tareas

La forma de agregar la tarea Hoy es al principio:

dataTable.addRows([

['', 'Hoy', new Date(2014,9,2), new Date(2014,9,2) ],

La función en jquery:

function MarcarHoy (div, filaActual){

  var altura = 0;
  $('#'+div+' rect').each(function( index ) {
    yValor = parseFloat($(this).attr('y'));
    xValor = parseFloat($(this).attr('x'));
    if ( yValor == 0 && yValor == 0 ) { altura = parseFloat($(this).attr('height')) };
  });

$('#'+div+' text:contains("Hoy")').css('font-size','11px').attr('fill','#A6373C').prev().first().attr('height',altura+'px').attr('width','1px').attr('y','0');

if (filaActual != -1) {
    if ( 0 == filaActual )
        $('.google-visualization-tooltip').css('display','none');
    else
        $('.google-visualization-tooltip').css('display','inline');
    }

  }

Y el llamado a la función se realiza en:

chart.draw(dataTable, options);

MarcarHoy('example1',-1);

google.visualization.events.addListener(chart, 'onmouseover', function(obj) {

    MarcarHoy('example1',obj.row);

    });

google.visualization.events.addListener(chart, 'onmouseout', function(obj) {
    MarcarHoy('example1',-1);
    });

Posted in: