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://s.tradingview.com/widgetembed/?frameElementId=tradingview_11e1d&symbol=COINBASE%3ABTCUSD&interval=60&hidesidetoolbar=0&symboledit=1&saveimage=1&toolbarbg=f1f3f6&studies=MASimple%40tv-basicstudies%1FRSI%40tv-basicstudies&theme=Dark&style=1&timezone=Etc%2FUTC&withdateranges=1&studies_overrides=%7B%7D&overrides=%7B%7D&enabled_features=%5B%5D&disabled_features=%5B%5D&locale=fr&utm_source=fiddle.jshell.net&utm_medium=widget_new&utm_campaign=chart&utm_term=COINBASE%3ABTCUSD"></iframe>
<iframe style="border:none;width:100%;position:relative" src="https://s.tradingview.com/widgetembed/?frameElementId=tradingview_11e1d&symbol=COINBASE%3ABTCUSD&interval=60&hidesidetoolbar=0&symboledit=1&saveimage=1&toolbarbg=f1f3f6&studies=MASimple%40tv-basicstudies%1FRSI%40tv-basicstudies&theme=Dark&style=1&timezone=Etc%2FUTC&withdateranges=1&studies_overrides=%7B%7D&overrides=%7B%7D&enabled_features=%5B%5D&disabled_features=%5B%5D&locale=fr&utm_source=fiddle.jshell.net&utm_medium=widget_new&utm_campaign=chart&utm_term=COINBASE%3ABTCUSD"></iframe>
</div>

CSS

body {
  padding:0;
  margin:0;
}
.menu{
  position:relative;
  display:block;
  width:100%;
  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
}

JavaScript

function ui(a)
{
  var item = document.getElementById("item");
  var child = item.getElementsByTagName('IFRAME');
  var num = a.id * 2;
  if(child.length < num)
  {
    var i = child.length +1;
    for (var ii = i; ii <= num; ii++)
    { 
      pop_new_ui();
    }
  }
  if(child.length > num)
  {
    var i = child.length +1;
    for (var ii = i; ii == num; ii++)
    { 
      var element = document.getElementsByTagName('IFRAME')[num];
      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://s.tradingview.com/widgetembed/?frameElementId=tradingview_11e1d&symbol=COINBASE%3ABTCUSD&interval=60&hidesidetoolbar=0&symboledit=1&saveimage=1&toolbarbg=f1f3f6&studies=MASimple%40tv-basicstudies%1FRSI%40tv-basicstudies&theme=Dark&style=1&timezone=Etc%2FUTC&withdateranges=1&studies_overrides=%7B%7D&overrides=%7B%7D&enabled_features=%5B%5D&disabled_features=%5B%5D&locale=fr&utm_source=fiddle.jshell.net&utm_medium=widget_new&utm_campaign=chart&utm_term=COINBASE%3ABTCUSD';
iframe.style.position = "relative";
iframe.style.width = "100%";
iframe.style.border = "none";
     document.getElementById('item').appendChild(iframe);
}