How do responsive google chart come from iframe tag?

Question

I want to create a chart from google sheet. I export the chart from the spreadsheet, I take a URL. But I cannot make it responsive because of the cors problem. So, I thought the whole iframe responsive by transform: scale? But it couldn't be a good solution. Have you any idea to make this iframe responsive?

Below is my snippet:-

<div
        class="responsive"
     
      >
        <iframe
        width="698.1827830188679"
          height="305.5"
          seamless
          frameborder="0"
          scrolling="no"
          src="https://docs.google.com/spreadsheets/d/e/2PACX-1vQuSWCpXJIwSPNJEE6iqzsJTxkPdSiL6uZaqph-CtMXh5QDw8Z9pESPB_0VenmhF4Dx6H5GLylHztAO/pubchart?oid=1827562470&amp;format=interactive"
        ></iframe>
      </div>

Also, you can check fiddle below,

https://jsfiddle.net/qtro2Lz5/

Marhensa · Answer 1 · 2020-06-19T11:29:12.497

I am also facing this issue for this Google Spreadsheet published chart. Btw, your title is misleading, that's not Google Chart, which is another different product from Google to create truly proper web chart, which also can be responsive, and also using Spreadsheets data.

Back to the problem, the "Google Spreadsheet published chart" content itself is not responsive, it's not about how to make the iframe itself to be responsive.

Iframe can be responsive, but we cannot modify chart content from published Google Spreadsheet to be responsive, afaik.

I already trying some trick like these, which works great only for video and some responsive content website.

http://jsfiddle.net/marhensa/g9op54wx/

Also there's some other neat trick like this

https://codepen.io/alxfyv/pen/QEjEbp

but the problem is the iframe content must be also responsive.

If you simply want this to work and really simple, dont use iframe, use simple image responsive, simply change the end of your published Google Spreadsheet chart URL from format=interactive to format=image

The correct method to solve this problem is sadly only SCALING, like you said to transform/scale it in your question. If the content of wrapper is not responsive and you want dynamically resize it (text also will be smaller) like this recorded example, then scaling it is. That example is a HTML text and some graphic page by the way, it behave like SVG / image file when it scaled.

Explained here: https://css-tricks.com/scaled-proportional-blocks-with-css-and-javascript

Also done in Angular here: https://stackblitz.com/edit/angular-vagpoq

EDIT: If you can live with scaling and smaller text / thin lines, the working solution is using this JS + JQuery Scaling method in HTML head section, this written by yazzz here, kudos to her/him in that link, not in here.

<head>
<script 
src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js">
</script>
<script>
// this script is written by yazzz https://stackoverflow.com/a/35819751/9894532
$(function() {
    $("#wrapper").each(function() {
        var $wrap = $(this);
        function iframeScaler(){
            var wrapWidth = $wrap.width(); // width of the wrapper
            var wrapHeight = $wrap.height();
            var childWidth = $wrap.children("iframe").width(); // width of child iframe
            var childHeight = $wrap.children("iframe").height(); // child height
            var wScale = wrapWidth / childWidth;
            var hScale = wrapHeight / childHeight;
            var scale = Math.min(wScale,hScale);  // get the lowest ratio
            $wrap.children("iframe").css({"transform": "scale("+scale+")", "transform-origin": "left top" });  // set scale
        };
        $(window).on("resize", iframeScaler);
        $(document).ready( iframeScaler);
    });
});
</script>
</head>

<body>
<p>Responsive and Dynamic Iframe Scaling of Published Chart from Google Spreadsheet</p>
<p>Courtesy of <a href="https://stackoverflow.com/a/35819751/9894532">yazzz from Javascript StackOverflow</a></p>

<div id="wrapper">
    <iframe width="500" height="294" seamless frameborder="0" scrolling="no" src="https://docs.google.com/spreadsheets/d/e/2PACX-1vRB4wPFarqsHWgk0ubQ6bH3YC5iwvDayAkrDg0iNPipAAszBA26QnFaPC1Xk5g8XF1ixP7jnsxiaMzL/pubchart?oid=1495533449&amp;format=interactive"></iframe>
</div>

</body>

Also you can view his/her implementation of my sample here in JS Fiddle

https://jsfiddle.net/marhensa/10radjqo

Thanks for the answer, unfortunately there is nothing to do except tricky ways. That's work but I found a better way. You can fetch your chart two way. One way is interactive it means a canvas. second way is image. When your screen desktop or similar device I will show interactive link, If you are log in mobile you'll see a image with tag. — Mert, Jun 19 '20 at 13:16
Could you please elaborate more about that interactive canvas? Does it also responsive in iframe when resized? — Marhensa, Jun 19 '20 at 13:55
unfortunately no, because you can't access in the iframe's stylesheet. You can export the graph two ways, first interactively, as you know this is canvas. second is image. What have I done? If you're login mobile device I show you image url. If you are login desktop or something you'll see canvas with a fixed size. — Mert, Jun 19 '20 at 14:18
Oh okay, I get it. It's different than my client needs, to show multiple graph in some div layout, which needs responsive iframe and its content. Because even in desktop mode, screen size, resolution, and dpi could be hugely vary. — Marhensa, Jun 19 '20 at 14:22
You can fetch data from sheet and build your own chart programmatically. — Mert, Jun 19 '20 at 15:02

How do responsive google chart come from iframe tag?

1 Answers1