Google Data Studio

by roberts gailitis

HTML

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>

</style>
</head>
<body>

<h2>Responsive Iframe</h2>
<h3>Maintain Aspect Ratio 4:3</h3>
<p>Resize the window to see the effect.</p>

This dashboard is created to research world merchant fleet data published in Equasis reports.
<button id="increaseW"> Increase size </button>
<button id="decreaseW"> Decrease size</button>
<div id="myDiv" >&nbsp;
<p>
  Sample iframe to test height
</p>
</div>

<div class="container">
<iframe id="1stIframe" class="responsive-iframe"  style="border: 0;" src="https://datastudio.google.com/embed/reporting/285b4416-813b-4a97-9ea1-927a48f3dc81/page/OBZbB"  ></iframe>
</div>
<div class="container">
<iframe id="2ndtIframe" class="responsive-iframe"  style="border: 0;" src="https://datastudio.google.com/embed/reporting/285b4416-813b-4a97-9ea1-927a48f3dc81/page/OBZbB"  ></iframe>
</div>

</body>
</html>

CSS

.container {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding-top: 80%; /* 4:3 Aspect Ratio */
  border-style: solid;
  border-width: thin;
}

.responsive-iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  border: none;
}

JavaScript

var platums = 100;

$("#increaseW").click(function(){
     platums = platums + 10;
       var platumsToSet = platums + "%";
    $(".container").width(platumsToSet);
    var augstums = 0.8* platums + "%";
   // alert(augstums);
    $(".container").css("padding-top",augstums);
});

$("#decreaseW").click(function(){
		platums = platums - 10;
    var platumsToSet = platums + "%";
    $(".container").width(platumsToSet);
    var augstums = 0.8* platums + "%";
   // alert(augstums);
    $(".container").css("padding-top",augstums); 
});