Filtering Pivot Charts via a URL parameter [my attempts, a discussion]

Filtering Pivot Charts via a URL parameter [my attempts, a discussion]

I know many have tried to filter pivot tables and charts via a URL parameter before and have failed, but I thought: I'm REALLY going to dig into this, get it working, then share my results with the Zoho Creator Forum community.

No such luck.

HOWEVER, I wanted to share what I've learned thus far to start a discussion on how to finally crack this nut (if it's even possible).

The approach I took was Javascript injection.
  1. I placed numerous charts with user filters in a page.
  2. I added a URL parameter to the page.
  3. I dug into the code using a page inspector and found that charts are embedded from Zoho Analytics using iframes:
    1. <iframe width="100%" height="450px" id="zohoreportel" class="zrElt" frameborder="0" scrolling="auto" src="https://analytics.zoho.com/ZDBDataSheetView.cc?..." style="height: 609px;"></iframe>
    2. Every iframe has the same id: zohoreportel
  4. I then dug deeper to find the class or id of the user filter in each chart:
    1. <div id="" filterhead="true" elname="filterHead" class="dComboDropDownLoaded dComboDropDownXWidthLoaded" classprefix="dComboDropDownXWidth" ...>
    2. <div elname="displaySelected" ...<style>... class="dComboDispSelected widthClass" ...<javascript>... value="Click to select" data-tip="Click to select">--- Select ---</div>
  5. I installed the Scripty Javascript Injector Chrome Extension to see if I could change the background color of a user filter (I apologize for the run-together Javascript statements; this WYSIWYG editor isn't cooperating):
    1. var x = document.getElementsByClassName("dComboDropDownLoaded dComboDropDownXWidthLoaded"); window.alert(x.length);
    2. $("iframe").each(function(index){ $(this).contents().find('.dComboDispSelected widthClass').css({background: '#f00'});});
    3. var iframe = document.getElementById("zohoreportel"); var elmnt = iframe.contentWindow.document.getElementsByClassName("dComboDropDownLoaded"); elmnt.style.background = "#f00";
    4. $('#zohoreportel').contents().find('.dComboDispSelected').css({background: '#f00'});
    5. document.getElementById("zohoreportel").contentWindow.document.body.getElementsByClassName("dComboDispSelected").setAttribute("style", "background:'#f00';");
  6. Scripty test #1 URL (run script if URL contains): https://creatorapp.zoho.com/zoho.adminuser/zoho.appname#Page:pagename
    1. The result: Blocked a frame with origin "https://creatorapp.zoho.com" from accessing a cross-origin frame (https://newbedev.com/securityerror-blocked-a-frame-with-origin-from-accessing-a-cross-origin-frame)
  7. Scripty test #2 URL (run script if URL contains): https://analytics.zoho.com/ZDBDataSheetView.cc
    1. Cross-Origin Read Blocking (CORB) blocked cross-origin response https://logsapi.zoho.com/csplog?service=zohoreports with MIME type application/json. See https://www.chromestatus.com/feature/5629709824032768 for more details. ZRVendors.fabf7322d57fee72b415bce4136a603a.js:7
So, I wasn't able to make any headway except for learning:
  1. Charts are embedded as iframes
  2. Charts all have the same element ID
  3. Chart user filters all have the same element Class
  4. We can't access chart elements programmatically because of cross-origin restrictions (trying to change elements in an iframe that's sourced from https://analytics.zoho.com from the https://creatorapp.zoho.com domain
Thoughts, anyone?