14

¿Existe alguna manera de insertarle a un TimeLine un picker o slider para capturar el instante? Ejemplo: introducir la descripción de la imagen aquí Yo debería actualizar parametros a partir de la fecha seleccionada con el picker.

google.charts.load('current', {
  callback: function () {
    var dataTable = new google.visualization.DataTable();
    dataTable.addColumn({ type: 'string', id: 'President' });
    dataTable.addColumn({ type: 'string', id: 'President' });
    dataTable.addColumn({ type: 'date', id: 'Start' });
    dataTable.addColumn({ type: 'date', id: 'End' });

     dataTable.addRows([
        [ 'machine1', 'WORK', new Date(0,0,0,14,0,0), new Date(0,0,0,15,0,0)],
        [ 'machine2', 'ALARMA', new Date(0,0,0,15,0,0), new Date(0,0,0,16,0,0)]]);
        
    var container = document.getElementById('timeline');
    var chart = new google.visualization.Timeline(container);

    google.visualization.events.addListener(chart, 'select', function () {
      selection = chart.getSelection();
      if (selection.length > 0) {
        console.log(dataTable.getValue(selection[0].row, 0));
      }
    });

    chart.draw(dataTable);
  },
  packages: ['timeline']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="timeline"></div>

0

1 respuesta 1

13
+50

Esta solución no sé si te va a gustar porque es un poco hacky y no usa los comandos normales de Google Chart o los timelines (los usa pero para calcular valores secundarios que se usarán luego).

La idea es la siguiente:

  • Poner el timeline en un contenedor
  • Crear una barra dentro de ese contenedor
  • Crear un evento cuando se mueve el ratón encima del contenedor, para mover la barra horizontalmente a la posición del ratón (esto realmente es cosmético).
  • Crear un evento que cuando se pulse el ratón (ojo: mouseclick y no click para evitar problemas con los eventos del chart) realice una simple regla de tres para calcular la fecha-hora que corresponde a esa zona del timeline.

Aquí puedes verlo funcionando:

google.charts.load('current', {
  callback: function () {
    var dataTable = new google.visualization.DataTable();
    dataTable.addColumn({ type: 'string', id: 'President' });
    dataTable.addColumn({ type: 'string', id: 'President' });
    dataTable.addColumn({ type: 'date', id: 'Start' });
    dataTable.addColumn({ type: 'date', id: 'End' });

     dataTable.addRows([
        [ 'machine1', 'WORK', new Date(0,0,0,14,0,0), new Date(0,0,0,15,0,0)],
        [ 'machine2', 'ALARMA', new Date(0,0,0,15,0,0), new Date(0,0,0,16,0,0)]]);
        
    var container = document.getElementById('timeline');
    var chart = new google.visualization.Timeline(container);

    google.visualization.events.addListener(chart, 'select', function () {
      selection = chart.getSelection();
      if (selection.length > 0) {
        console.log(dataTable.getValue(selection[0].row, 0));
      }
    });

   var options = {
          hAxis: {
            minValue: new Date(0,0,0,14,0,0),
            maxValue: new Date(0,0,0,16,0,0)
          }
        };
        
    chart.draw(dataTable, options);
    
    // una vez dibujado el timeline, leemos el SVG
    svg = document.querySelector("#timeline svg"); 
    // calculamos los tamaños que debe tener la barra
    var sizes = svg.querySelector("g:first-of-type path:first-of-type").getAttribute("d").split(",");
    bar.style.height = (2*sizes[sizes.length-1])  + "px";
    // y otros valores que nos ayudarán a calcular la nueva fecha más tarde
    min = parseInt(sizes[0].substr(1));
    totalTime = options.hAxis.maxValue - options.hAxis.minValue;
    lengthTime = svg.getAttribute("width") - min;
    initialDate = options.hAxis.minValue;

  },
  packages: ['timeline']
});


// las variables que vamos a usar
var timelineContainer = document.getElementById("timeline-container");
var bar = document.getElementById("bar");
var svg = document.querySelector("#timeline svg");
var offsetLeft = timelineContainer.getBoundingClientRect().left;
var min = 0;
var totalTime = 0;
var lengthTime = 0;

// cuando se mueva el ratón sobre el timeline: mover la barra
timelineContainer.addEventListener("mousemove", function(e) {
  var newValue = (e.clientX - offsetLeft);
  if (newValue >= min) {
   bar.style.left = newValue + "px";
   bar.style.display = "block";
  } else {
    bar.style.display = "none";
  }  
});

// cuando se pulse en el timeline: calcular fecha correspondiente a la posición pulsada
timelineContainer.addEventListener("mousedown", function(e) {
  
  // leemos la posición pulsada
  var currentPosition = e.clientX - offsetLeft - min;
  // calculamos el tiempo transcurrido con una regla de tres
  var currentTime = Math.floor(currentPosition * totalTime / lengthTime);
  // añadimos ese tiempo a la fecha/hora inicial
  var dateClicked = new Date(initialDate.getTime() + currentTime);
  
  // Aquí puedes hacer las operaciones que quieras con la nueva fecha
  console.log(dateClicked);
  
});
#timeline-container {
  position: relative;
  overflow: visible;
}

#bar {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0;
  border-left: 1px solid red;
  pointer-events: none;
}

#timeline-container:hover #bar {
  display: block;
}

#bar::before {
  content:"";
  position: absolute;
  top: -10px;
  left: 0px;
  border:10px solid transparent;
  border-top: 10px solid red;
  transform: translate(-50%, 0);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>

<div id="timeline-container">
  <div id="timeline"></div>
  <div id="bar">
</div>

2
  • 2
    Perdón por tardar, es muy bueno lo que propones realmente, es lo más aproximado que pude encontrar y hacer. Me gustaría ver otras propuestas de igual manera.
    – nawelittle
    el 12 dic. 2017 a las 12:13
  • 1
    @nawelittle no te preocupes. A ver si tienes suerte y alguien se anima a poner otra respuesta. Si nadie lo hace antes del viernes, yo pondré otra recompensa en la pregunta.
    – Alvaro Montoro
    el 13 dic. 2017 a las 13:43

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.