TradingViewMultiChart

Easy Powerful script Enjoy free acc now

by humanzing

HTML

<div class="menu">
  <ul class="grid_columns">
  <li id="1" onclick="ui(this)">x1</li>
  <li id="2" onclick="ui(this)">x2</li>
  <li id="3" onclick="ui(this)">x3</li>
  <li id="4" onclick="ui(this)">x4</li>
  </ul>
</div>
<div id="item"> 
    <iframe style="border:none;width:100%;position:relative" src="https://tvc-invdn-com.akamaized.net/web/1.12.24/index57-prod.html?carrier=a5be997046e92a6bfb4246435f71c150&time=1561494893&domain_ID=5&lang_ID=5&timezone_ID=58&version=1.12.24&locale=fr&timezone=Europe/Paris&pair_ID=945629&interval=15&session=24x7&prefix=fr&suffix=&client=0&user=guest&family_prefix=tvc4"></iframe>
<iframe style="border:none;width:100%;position:relative" src="https://tvc-invdn-com.akamaized.net/web/1.12.24/index57-prod.html?carrier=a5be997046e92a6bfb4246435f71c150&time=1561494893&domain_ID=5&lang_ID=5&timezone_ID=58&version=1.12.24&locale=fr&timezone=Europe/Paris&pair_ID=945629&interval=15&session=24x7&prefix=fr&suffix=&client=0&user=guest&family_prefix=tvc4"></iframe>
</div>

CSS

body {
  padding:0;
  margin:0;
}
.menu{
  position:relative;
  display:block;
  width:100vw;
  background:#373e56;
   color:#bcb8ee;
}
.menu ul {
  position:relative;
  display:block;
  padding:0;
  margin:0;
  list-style:none;
}
.menu ul li{
  display:inline-block;
  padding: 10px;
  cursor:pointer;
}
.menu ul li:hover{
  color:#e4e2f8;
}
#item{
  display: grid;
  grid-template-columns: auto;
}
#item iframe{
  height:50vh;
  width:100%;
}

JavaScript

function ui(a)
{
  var item = document.getElementById("item");
  var child = item.getElementsByTagName('IFRAME');
    console.log(child.length);
  
  var num = a.id * 2;
  if(child.length < a.id * 2)
  {
    var i = child.length +1;
    for (var ii = i; ii <= num; ii++)
    { 
      pop_new_ui();
    }
  }
  if(child.length > a.id * 2)
  {
  console.log("delete?");
    var i = child.length +1;
    for (var ii = a.id * 2 -1; ii < num+1; ii++)
    { 
    console.log("delete");
      var element = document.getElementsByTagName('IFRAME')[ii];
      element.remove();
    }
  }
  document.getElementById('item').style = "display: grid;  grid-template-columns: "+ gen_template(a.id);
}
function gen_template(a)
{
	var call ="";
	for(var i = 0; i < a; i++)
  {
		call += " auto";  
  }
  return call;
}
function pop_new_ui()
{
var iframe = document.createElement("IFRAME");
iframe.src = 'https://tvc-invdn-com.akamaized.net/web/1.12.24/index57-prod.html?carrier=a5be997046e92a6bfb4246435f71c150&time=1561494893&domain_ID=5&lang_ID=5&timezone_ID=58&version=1.12.24&locale=fr&timezone=Europe/Paris&pair_ID=945629&interval=15&session=24x7&prefix=fr&suffix=&client=0&user=guest&family_prefix=tvc4';
iframe.style.position = "relative";
iframe.style.width = "100%";
iframe.style.border = "none";
     document.getElementById('item').appendChild(iframe);
}