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="" 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"); = "#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):
    1. The result: Blocked a frame with origin "" from accessing a cross-origin frame (
  7. Scripty test #2 URL (run script if URL contains):
    1. Cross-Origin Read Blocking (CORB) blocked cross-origin response with MIME type application/json. See 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 from the 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.