Skip to content Skip to sidebar Skip to footer

Google Visualization Timeline Show Time Of Mouse Cursor

I hope that I can -in google visualization timeline- show time/date of mouse cursor in Java Script, Say like : console.log(googlechart.timedate(mouse.x)); is there any way to get t

Solution 1:

Unfortunately there's no built-in way to do this using their API. Based on this question's answer, I modified Google's JSFiddle example for TimeLine to add a simple mousemove event that calculates the relative X and Y positions of the cursor.

  google.charts.load('current', {'packages':['timeline']});
  google.charts.setOnLoadCallback(drawChart);
  functiondrawChart() {
    var container = document.getElementById('timeline');
    var chart = new google.visualization.Timeline(container);
    var dataTable = new google.visualization.DataTable();

    dataTable.addColumn({ type: 'string', id: 'President' });
    dataTable.addColumn({ type: 'date', id: 'Start' });
    dataTable.addColumn({ type: 'date', id: 'End' });
    dataTable.addRows([
      [ 'Washington', newDate(1789, 3, 30), newDate(1797, 2, 4) ],
      [ 'Adams',      newDate(1797, 2, 4),  newDate(1801, 2, 4) ],
      [ 'Jefferson',  newDate(1801, 2, 4),  newDate(1809, 2, 4) ]]);


    // create 'ready' event listener to add mousemove event listener to the chartvar runOnce = google.visualization.events.addListener(chart, 'ready', function () {
          google.visualization.events.removeListener(runOnce);
          // create mousemove event listener in the chart's container// I use jQuery, but you can use whatever works best for you
          $(container).mousemove(function (e) {
            var xPos = e.pageX - container.offsetLeft;
            var yPos = e.pageY - container.offsetTop;

            // (Do something with xPos and yPos.)
        });
    });

    chart.draw(dataTable);
  }

Here's the JSFiddle.

That's only a start. You'll have to figure out how to interpolate time and date data from the mouse coordinates, because there's no API functionality for doing that—and even if there were, you wouldn't be able to get "in between" values without using your own calculations. You might find some help here.

Post a Comment for "Google Visualization Timeline Show Time Of Mouse Cursor"