javascriptgoogle-visualization

Google Charts Treemap Navigation not working on iOS?


I'm using Google Charts and it all seems to work generally fine on Desktop - specifically I can single-click down the tree, and right-click up the three.

However on iOS (don't have an Android to hand) I can navigate 'down' the tree on but I don't seem to be able to go back 'up' the tree.

Am I missing something obvious?

The documentation (https://developers.google.com/chart/interactive/docs/gallery/treemap) suggests the following options are available:

'click', 'contextmenu', 'dblclick', 'mouseout', 'mouseover'. With 'contextmenu' corresponds to the right-click.

<!DOCTYPE html>
<html>
<head>
  <title>File System TreeMap</title>
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <script type="text/javascript">
    google.charts.load('current', {'packages':['treemap']});
    google.charts.setOnLoadCallback(drawChart);

    function drawChart() {
      var data = new google.visualization.DataTable();
      data.addColumn('string', 'Name');
      data.addColumn('string', 'Parent');
      data.addColumn('number', 'Size');

      data.addRows([
        ['data', null, 1366275107471],
        ['TEST-FOLDER', 'data', 1366262437854],
        ['BigFolder', 'TEST-FOLDER', 1091265105286],
        ['subfolder1', 'TEST-FOLDER', 93057215638],
        ['import', 'TEST-FOLDER', 68027988721],
        ['smallFolder2', 'subfolder1', 36929298127],
        ['smallFolder1', 'subfolder1', 29465188106],
        ['userarea', 'TEST-FOLDER', 26341000093],
        // More rows here
      ]);

      var tree = new google.visualization.TreeMap(document.getElementById('chart_div'));

      var optionsV50 = {
        headerHeight: 30,
        showScale: true,
        useWeightedAverageForAggregation: true,
        eventsConfig: {
          rollup: ['contextmenu'],
          drilldown: ['click'],
        }

      };

      tree.draw(data, optionsV50);
    }
  </script>
</head>
<body>
  <div id="chart_div" style="width: 900px; height: 600px;"></div>
</body>
</html>

Solution

  • I've worked around this by simulating a right click with a button instead. Seems to work pretty well - code for anyone who runs into this problem in the future:

    <!DOCTYPE html>
    <html>
    <head>
      <title>File System TreeMap</title>
      <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
      <script type="text/javascript">
        google.charts.load('current', {'packages':['treemap']});
        google.charts.setOnLoadCallback(drawChart);
    
        let tree;
        let data;
        let currentRootIndex = 0; // Track the current root index
    
        function drawChart() {
          data = new google.visualization.DataTable();
          data.addColumn('string', 'Name');
          data.addColumn('string', 'Parent');
          data.addColumn('number', 'Size');
    
          data.addRows([
            ['data', null, 1366275107471],
            ['TEST-FOLDER', 'data', 1366262437854],
            ['BigFolder', 'TEST-FOLDER', 1091265105286],
            ['subfolder1', 'TEST-FOLDER', 93057215638],
            ['import', 'TEST-FOLDER', 68027988721],
            ['smallFolder2', 'subfolder1', 36929298127],
            ['smallFolder1', 'subfolder1', 29465188106],
            ['userarea', 'TEST-FOLDER', 26341000093],
            // More rows here
          ]);
    
          tree = new google.visualization.TreeMap(document.getElementById('chart_div'));
    
          var options = {
            headerHeight: 30,
            showScale: true,
            useWeightedAverageForAggregation: true,
          };
    
          tree.draw(data, options);
    
          // Listen for clicks on the treemap
          google.visualization.events.addListener(tree, 'select', function() {
            var selection = tree.getSelection();
            if (selection.length > 0) {
              var selectedItem = selection[0];
              currentRootIndex = selectedItem.row;
              var value = data.getValue(currentRootIndex, 0);
              console.log('Selected node: ' + value);
            }
          });
        }
    
        function simulateRightClick() {
          // Get the current parent of the selected node
          let parentIndex = data.getFilteredRows([{column: 0, value: data.getValue(currentRootIndex, 1)}])[0];
    
          if (parentIndex !== undefined) {
            tree.setSelection([{row: parentIndex}]);
            google.visualization.events.trigger(tree, 'select', {});
            console.log('Moved up one level');
          } else {
            console.log('Already at the top level');
          }
        }
      </script>
    </head>
    <body>
      <div id="chart_div" style="width: 900px; height: 600px;"></div>
      <button onclick="simulateRightClick()">Go Up One Level</button>
    </body>
    </html>```