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?

      Zoho SalesIQ Resources



            Zoho TeamInbox Resources

              Zoho DataPrep Resources


                  Zoho CRM Plus Resources

                    Zoho Books Resources


                      Zoho Subscriptions Resources

                        Zoho Desk Resources

                          Zoho Projects Resources


                            Zoho Sprints Resources


                              Qntrl Resources


                                Zoho Creator Resources


                                  Zoho WorkDrive Resources




                                      Zoho Campaigns Resources

                                        Zoho CRM Resources

                                                    Design. Discuss. Deliver.

                                                    Create visually engaging stories with Zoho Show.

                                                    Get Started Now


                                                      Zoho Show Resources


                                                        Zoho Writer Writer

                                                        Get Started. Write Away!

                                                        Writer is a powerful online word processor, designed for collaborative work.

                                                                  有料プランをご利用の方