ChartRangeFilter as a zoom function for a google timeline charts that reads data from a dedicated google spreadsheet with dataview

Question

My goal is to integrate this zoom capability provided by Whitehat into my personal timeline project:
JsFiddle 1 - my working timeline

As you can see from the jsfiddle above the code actually works and provides a working timeline:

      // Load the Visualization API and the corechart package.
google.charts.load("current", {packages:["timeline"]});

// Set a callback to run when the Google Visualization API is loaded.
google.charts.setOnLoadCallback(drawGID);

function drawGID() {

var query = new google.visualization.Query(
'https://docs.google.com/spreadsheets/d/1gDsiNSKfPdoutSbtzyt8fExliJpzIWQocEArpAQYD_g/gviz/tq?gid=0&sheet=table');
query.setQuery('select A, B, C, D, E, F, G, H, I, J LIMIT 10');
query.send(handleQueryResponse);
} //fine funzione drawGID

function handleQueryResponse(response) {
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
return;
} 

// Set chart options
var options = {'width':'100%', 'height':'100%'};// fine options

var data = response.getDataTable();

//da qui proviamo dataview
    var view = new google.visualization.DataView(data);
     view.setColumns([
      { sourceColumn: 1,        id: 'materia'},
      { sourceColumn: 2,        id: 'evento'},
      { sourceColumn: 5,        id: 'start'},
      { sourceColumn: 6,        id: 'end'} /*,
      { sourceColumn: 7,        id: 'null'},
      { sourceColumn: 8,        id: 'scatter'},
      { sourceColumn: 9,        id: 'data'}*/
      ]);

var container = document.getElementById('timeline');
var chart = new google.visualization.Timeline(container);
chart.draw(view, options);
} //fine funzione handleQueryResponse

The problems start when I try to combine the Whitehat's solution with mine :

here I provide a jsfiddle with a working copy of Whitehat's code in the first place as a reference:
JsFiddle 2 - Whitehat's code ok

then a jsfiddle with my attempt to mix the two codes ( not working )
JsFiddle 3 - Whitehat's code mixed to mine (not working)

and in the end a sort of test jsfiddle , where I output data in the form of a data table instead of timeline , to double check that the code was (at least partially) right
JsFiddle 4 - output as data table instead of timeline

And here is the original data base google sheet file
timeline - google sheet

My question of course is: why jsfiddle 3 is not working? thanks

Answer 1

You can use a library like svg-pan-zoom by Andrea Leofreddi to add this capability to your page.

After adding the appropriate resource to your page, you can then add a function to initialize this library with your svg graph.

//...
chart.draw(view, options);
//Initialize the code for svgPanZoom
//Limit Paning so chart doesn't go out of viewport:
  var beforePan = function(oldPan, newPan) {
    var stopHorizontal = false;
    var stopVertical = false;
    var gutterWidth = 100;
    var gutterHeight = 100;
    // Computed variables
    var sizes = this.getSizes();
    var leftLimit = -((sizes.viewBox.x + sizes.viewBox.width) * sizes.realZoom) + gutterWidth;
    var rightLimit = sizes.width - gutterWidth - (sizes.viewBox.x * sizes.realZoom)
    var topLimit = -((sizes.viewBox.y + sizes.viewBox.height) * sizes.realZoom) + gutterHeight;
    var bottomLimit = sizes.height - gutterHeight - (sizes.viewBox.y * sizes.realZoom);

    var customPan = {};
    customPan.x = Math.max(leftLimit, Math.min(rightLimit, newPan.x));
    customPan.y = Math.max(topLimit, Math.min(bottomLimit, newPan.y));
    return customPan
  }

  var chartSvg = document.querySelector("#timeline > div > div:nth-child(1) > div > svg");
  var panZoomSvg = svgPanZoom(chartSvg, {
    fit: true,
    contain: false,
    center: true,
    beforePan: beforePan
  });

  //Resized the chart when the window is resized.
  window.onresize = function() {
    panZoomSvg.resize();
    panZoom.fit();
    panZoom.center();
  };