<div class="container-fluid item" id="mainLayout5">

  <div class="row" id="hmpview">

                   <div class="col-xl-5">

                  <div class="crypt-gross-market-cap mt-4" id="LightChartVersion">

                     <div class="row no-gutters">

                        <div class="col-md-12">

                             <script type="text/javascript" src="https://d33t3vvu2t2yu5.cloudfront.net/tv.js"></script>

                             <script type="text/javascript">

                                  new TradingView.widget({

                                      "width": '100%',

                                      "height":610,

                                      "symbol": "FX:NZDUSD",

                                      "interval": "30",

                                      "timezone": "Etc/UTC",

                                      "theme": "Black",

                                      "style": "1",

                                      "locale": "en",

                                      "toolbar_bg": "rgba(101, 101, 101, 1)",

                                      "withdateranges": true,

                                      "hide_side_toolbar": false,

                                      "allow_symbol_change": true,

                                      "hideideas": true,

                                      "show_popup_button": true,

                                      "popup_width": "1000",

                                      "popup_height": "650",

                                      "no_referral_id": true,

                                      "toolbar_bg": "#f1f3f6"

                                  });

                             </script>

                        </div>

                     </div>

                  </div>

               </div>

     <div class="col-xl-7 sm-gutters crypt-gross-market-cap">

        <div class="row" style="margin-bottom: 30px;">

        <div class="col-md-6">

            <h3 class="crypt-bg-head" style="margin-bottom: 20px;margin-top: 0px;"><b class="crypt-up">HEATMAP</b></h3>
            
        </div>



        <div class="col-md-6">

        <fieldset>

        <label></label>

        <div class="switch-toggle switch-candy">









        <input id="demo" name="accType" type="radio" value="hmprice" onchange="hmfunc(value)">

        <label for="demo" onclick="">Price</label>







        <input id="real" name="accType" type="radio" value="hmper" onchange="hmfunc(value)">

        <label for="real" onclick="">

        HeatMap

        </label>





        <a></a>

        </div>

        </fieldset>

        </div>


        <div class="col-md-12">

          <table class="table table-striped heatmaptable" id="heatmaptable" style="background-color: #131722">

            <thead>

                <tr>
                     <th></th>

              <th>EUR </th>

              <th>USD</th>

              <th>AUD<!-- <img src="images/flags/aud.svg" style="width: 20px;border-radius: 50px;margin-left: 5px;margin-top: -5px;"/> --></th>

              <th>GBP</th>

              <th>NZD</th>

              <th>CAD</th>

              <th>CHF</th>

              <th>JPY</th>

              <th>HKD</th>

              <th>SGD</th>
                </tr>

            </thead>

            <tbody>

              <tr class="hm">

                <td><img src="images/flags/eur.svg" style="width: 20px;border-radius: 50px;margin-left: 5px;margin-top: -5px;"/></td>

                <td></td>

                <td id="eurusdhm"></td>

                <td id="euraudhm"></td>

                <td id="eurgbphm"></td>

                <td id="eurnzdhm"></td>

                <td id="eurcadhm"></td>

                <td id="eurchfhm"></td>

                <td id="eurjpyhm"></td>

                <td id="eurhkdhm"></td>

                <td id="eursgdhm"></td>

              </tr>

              <tr class="hmp" style="display: none;">

                <td><img src="images/flags/eur.svg" style="width: 20px;border-radius: 50px;margin-left: 5px;margin-top: -5px;"/></td>

                <td></td>

                <td id="eurusdhmp"></td>

                <td id="euraudhmp"></td>

                <td id="eurgbphmp"></td>

                <td id="eurnzdhmp"></td>

                <td id="eurcadhmp"></td>

                <td id="eurchfhmp"></td>

                <td id="eurjpyhmp"></td>

                <td id="eurhkdhmp"></td>

                <td id="eursgdhmp"></td>

              </tr>

              <tr class="hm">

                <td><img src="images/flags/usd.svg" style="width: 20px;border-radius: 50px;margin-left: 5px;margin-top: -5px;"/></td>

                <td id="usdeurhm"></td>

                <td></td>

                <td id="usdaudhm"></td>

                <td id="usdgbphm"></td>

                <td id="usdnzdhm"></td>

                <td id="usdcadhm"></td>

                <td id="usdchfhm"></td>

                <td id="usdjpyhm"></td>

                <td id="usdhkdhm"></td>

                <td id="usdsgdhm"></td>

              </tr>

              <tr class="hmp" style="display: none;">

                <td><img src="images/flags/usd.svg" style="width: 20px;border-radius: 50px;margin-left: 5px;margin-top: -5px;"/></td>

                <td id="usdeurhmp"></td>

                <td></td>

                <td id="usdaudhmp"></td>

                <td id="usdgbphmp"></td>

                <td id="usdnzdhmp"></td>

                <td id="usdcadhmp"></td>

                <td id="usdchfhmp"></td>

                <td id="usdjpyhmp"></td>

                <td id="usdhkdhmp"></td>

                <td id="usdsgdhmp"></td>

              </tr>

              <tr class="hm">

                <td>

                <img src="images/flags/aud.svg" style="width: 20px;border-radius: 50px;margin-left: 5px;margin-top: -5px;"/>

                <td id="audeurhm"></td>

                <td id="audusdhm"></td>

                <td></td>

                <td id="audgbphm"></td>

                <td id="audnzdhm"></td>

                <td id="audcadhm"></td>

                <td id="audchfhm"></td>

                <td id="audjpyhm"></td>

                <td id="audhkdhm"></td>

                <td id="audsgdhm"></td>

                </td>

              </tr>

              <tr class="hmp" style="display: none;">

                <td>

                <img src="images/flags/aud.svg" style="width: 20px;border-radius: 50px;margin-left: 5px;margin-top: -5px;"/>

                <td id="audeurhmp"></td>

                <td id="audusdhmp"></td>

                <td></td>

                <td id="audgbphmp"></td>

                <td id="audnzdhmp"></td>

                <td id="audcadhmp"></td>

                <td id="audchfhmp"></td>

                <td id="audjpyhmp"></td>

                <td id="audhkdhmp"></td>

                <td id="audsgdhmp"></td>

                </td>

              </tr>

              <tr class="hm">

                <td>

                <img src="images/flags/gbp.svg" style="width: 20px;border-radius: 50px;margin-left: 5px;margin-top: -5px;"/>

                </td>

                <td id="gbpeurhm"></td>

                <td id="gbpusdhm"></td>

                <td id="gbpaudhm"></td>

                <td id="gbpgbphm"></td>

                <td id="gbpnzdhm"></td>

                <td id="gbpcadhm"></td>

                <td id="gbpchfhm"></td>

                <td id="gbpjpyhm"></td>

                <td id="gbphkdhm"></td>

                <td id="gbpsgdhm"></td>

              </tr>

              <tr class="hmp" style="display: none;">

                <td>

                <img src="images/flags/gbp.svg" style="width: 20px;border-radius: 50px;margin-left: 5px;margin-top: -5px;"/>

                </td>

                <td id="gbpeurhmp"></td>

                <td id="gbpusdhmp"></td>

                <td id="gbpaudhmp"></td>

                <td id="gbpgbphmp"></td>

                <td id="gbpnzdhmp"></td>

                <td id="gbpcadhmp"></td>

                <td id="gbpchfhmp"></td>

                <td id="gbpjpyhmp"></td>

                <td id="gbphkdhmp"></td>

                <td id="gbpsgdhmp"></td>

              </tr>

              <tr class="hm">

                <td>

                <img src="images/flags/nzd.svg" style="width: 20px;border-radius: 50px;margin-left: 5px;margin-top: -5px;"/>

                </td>

                <td id="nzdeurhm"></td>

                <td id="nzdusdhm"></td>

                <td id="nzdaudhm"></td>

                <td id="nzdgbphm"></td>

                <td id="nzdnzdhm"></td>

                <td id="nzdcadhm"></td>

                <td id="nzdchfhm"></td>

                <td id="nzdjpyhm"></td>

                <td id="nzdhkdhm"></td>

                <td id="nzdsgdhm"></td>

              </tr>

              <tr class="hmp" style="display: none;">

                <td>

                <img src="images/flags/nzd.svg" style="width: 20px;border-radius: 50px;margin-left: 5px;margin-top: -5px;"/>

                </td>

                <td id="nzdeurhmp"></td>

                <td id="nzdusdhmp"></td>

                <td id="nzdaudhmp"></td>

                <td id="nzdgbphmp"></td>

                <td id="nzdnzdhmp"></td>

                <td id="nzdcadhmp"></td>

                <td id="nzdchfhmp"></td>

                <td id="nzdjpyhmp"></td>

                <td id="nzdhkdhmp"></td>

                <td id="nzdsgdhmp"></td>

              </tr>

              <tr class="hm">

                <td>

                <img src="images/flags/cad.svg" style="width: 20px;border-radius: 50px;margin-left: 5px;margin-top: -5px;"/>

                </td>

                <td id="cadeurhm"></td>

                <td id="cadusdhm"></td>

                <td id="cadaudhm"></td>

                <td id="cadgbphm"></td>

                <td id="cadnzdhm"></td>

                <td id="cadcadhm"></td>

                <td id="cadchfhm"></td>

                <td id="cadjpyhm"></td>

                <td id="cadhkdhm"></td>

                <td id="cadsgdhm"></td>

              </tr>

              <tr class="hmp" style="display: none;">

                <td>

                <img src="images/flags/cad.svg" style="width: 20px;border-radius: 50px;margin-left: 5px;margin-top: -5px;"/>

                </td>

                <td id="cadeurhmp"></td>

                <td id="cadusdhmp"></td>

                <td id="cadaudhmp"></td>

                <td id="cadgbphmp"></td>

                <td id="cadnzdhmp"></td>

                <td id="cadcadhmp"></td>

                <td id="cadchfhmp"></td>

                <td id="cadjpyhmp"></td>

                <td id="cadhkdhmp"></td>

                <td id="cadsgdhmp"></td>

              </tr>

              <tr class="hm">

                <td>

                <img src="images/flags/chf.svg" style="width: 20px;border-radius: 50px;margin-left: 5px;margin-top: -5px;"/>

                </td>

                <td id="chfeurhm"></td>

                <td id="chfusdhm"></td>

                <td id="chfaudhm"></td>

                <td id="chfgbphm"></td>

                <td id="chfnzdhm"></td>

                <td id="chfcadhm"></td>

                <td id="chfchfhm"></td>

                <td id="chfjpyhm"></td>

                <td id="chfhkdhm"></td>

                <td id="chfsgdhm"></td>

              </tr>

              <tr class="hmp" style="display: none;">

                <td>

                <img src="images/flags/chf.svg" style="width: 20px;border-radius: 50px;margin-left: 5px;margin-top: -5px;"/>

                </td>

                <td id="chfeurhmp"></td>

                <td id="chfusdhmp"></td>

                <td id="chfaudhmp"></td>

                <td id="chfgbphmp"></td>

                <td id="chfnzdhmp"></td>

                <td id="chfcadhmp"></td>

                <td id="chfchfhmp"></td>

                <td id="chfjpyhmp"></td>

                <td id="chfhkdhmp"></td>

                <td id="chfsgdhmp"></td>

              </tr>

              <tr class="hm">

                <td>

                <img src="images/flags/jpy.svg" style="width: 20px;border-radius: 50px;margin-left: 5px;margin-top: -5px;"/>

                </td>

                <td id="jpyeurhm"></td>

                <td id="jpyusdhm"></td>

                <td id="jpyaudhm"></td>

                <td id="jpygbphm"></td>

                <td id="jpynzdhm"></td>

                <td id="jpycadhm"></td>

                <td id="jpychfhm"></td>

                <td id="jpyjpyhm"></td>

                <td id="jpyhkdhm"></td>

                <td id="jpysgdhm"></td>

              </tr>

              <tr class="hmp" style="display: none;">

                <td>

                <img src="images/flags/jpy.svg" style="width: 20px;border-radius: 50px;margin-left: 5px;margin-top: -5px;"/>

                </td>

                <td id="jpyeurhmp"></td>

                <td id="jpyusdhmp"></td>

                <td id="jpyaudhmp"></td>

                <td id="jpygbphmp"></td>

                <td id="jpynzdhmp"></td>

                <td id="jpycadhmp"></td>

                <td id="jpychfhmp"></td>

                <td id="jpyjpyhmp"></td>

                <td id="jpyhkdhmp"></td>

                <td id="jpysgdhmp"></td>

              </tr>

              <tr class="hm">

                <td>

                <img src="images/flags/hkd.svg" style="width: 20px;border-radius: 50px;margin-left: 5px;margin-top: -5px;"/>

                </td>

                <td id="hkdeurhm"></td>

                <td id="hkdusdhm"></td>

                <td id="hkdaudhm"></td>

                <td id="hkdgbphm"></td>

                <td id="hkdnzdhm"></td>

                <td id="hkdcadhm"></td>

                <td id="hkdchfhm"></td>

                <td id="hkdjpyhm"></td>

                <td id="hkdhkdhm"></td>

                <td id="hkdsgdhm"></td>

              </tr>

              <tr class="hmp" style="display: none;">

                <td>

                <img src="images/flags/hkd.svg" style="width: 20px;border-radius: 50px;margin-left: 5px;margin-top: -5px;"/>

                </td>

                <td id="hkdeurhmp"></td>

                <td id="hkdusdhmp"></td>

                <td id="hkdaudhmp"></td>

                <td id="hkdgbphmp"></td>

                <td id="hkdnzdhmp"></td>

                <td id="hkdcadhmp"></td>

                <td id="hkdchfhmp"></td>

                <td id="hkdjpyhmp"></td>

                <td id="hkdhkdhmp"></td>

                <td id="hkdsgdhmp"></td>

              </tr>

              <tr class="hm">

                <td>

                <img src="images/flags/sgd.svg" style="width: 20px;border-radius: 50px;margin-left: 5px;margin-top: -5px;"/>

                </td>

                <td id="sgdeurhm"></td>

                <td id="sgdusdhm"></td>

                <td id="sgdaudhm"></td>

                <td id="sgdgbphm"></td>

                <td id="sgdnzdhm"></td>

                <td id="sgdcadhm"></td>

                <td id="sgdchfhm"></td>

                <td id="sgdjpyhm"></td>

                <td id="sgdhkdhm"></td>

                <td id="sgdsgdhm"></td>

              </tr>

              <tr class="hmp" style="display: none;">

                <td>

                <img src="images/flags/sgd.svg" style="width: 20px;border-radius: 50px;margin-left: 5px;margin-top: -5px;"/>

                </td>

                <td id="sgdeurhmp"></td>

                <td id="sgdusdhmp"></td>

                <td id="sgdaudhmp"></td>

                <td id="sgdgbphmp"></td>

                <td id="sgdnzdhmp"></td>

                <td id="sgdcadhmp"></td>

                <td id="sgdchfhmp"></td>

                <td id="sgdjpyhmp"></td>

                <td id="sgdhkdhmp"></td>

                <td id="sgdsgdhmp"></td>

              </tr>

            </tbody>

          </table>
            
        </div>

        </div>


     </div>

  </div>

</div> 

