Basic template for testing

Basic template for testing

by Kesav Telaprolu

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
          <script src="https://code.highcharts.com/highcharts.js"></script>

    
<div id="container" style="width: 1240px;height: 688px;border-radius: 10px;border: 1px solid #dbdbdb;overflow:auto;position:relative"></div>

CSS

/*
 * Legal Disclaimer
 *
    print '\n', 'Note that the webfonts share the TT sources'
 * These Fonts are licensed for unlimited use on domains and their subdomains of The Kantar Group.
 * It is illegal to download or use them on other websites.
 *
 * While the @font-face statements below may be modified by the client, this
 * disclaimer may not be removed.
 *
 * Lineto.com, 2016
 */

@font-face {
  font-family: "KantarBrownWeb-LightItalic";
  src: url("https://riofontstorage.blob.core.windows.net/kantar-fonts/KantarBrownWeb-LightItalic.eot");
  src: url("https://riofontstorage.blob.core.windows.net/kantar-fonts/KantarBrownWeb-LightItalic.eot?#iefix") format("embedded-opentype"), url("https://riofontstorage.blob.core.windows.net/kantar-fonts/KantarBrownWeb-LightItalic.woff2") format("woff2"), url("https://riofontstorage.blob.core.windows.net/kantar-fonts/KantarBrownWeb-LightItalic.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "KantarBrownWeb-BoldItalic";
  src: url("https://riofontstorage.blob.core.windows.net/kantar-fonts/KantarBrownWeb-BoldItalic.eot");
  src: url("https://riofontstorage.blob.core.windows.net/kantar-fonts/KantarBrownWeb-BoldItalic.eot?#iefix") format("embedded-opentype"), url("https://riofontstorage.blob.core.windows.net/kantar-fonts/KantarBrownWeb-BoldItalic.woff2") format("woff2"), url("https://riofontstorage.blob.core.windows.net/kantar-fonts/KantarBrownWeb-BoldItalic.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "KantarBrownWeb-Italic";
  src: url("https://riofontstorage.blob.core.windows.net/kantar-fonts/KantarBrownWeb-Italic.eot");
  src: url("https://riofontstorage.blob.core.windows.net/kantar-fonts/KantarBrownWeb-Italic.eot?#iefix") format("embedded-opentype"), url("https://riofontstorage.blob.core.windows.net/kantar-fonts/KantarBrownWeb-Italic.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
}

@font-face {
 ...

JavaScript

(input=>{

var chartWrapper = $("<div></div>").appendTo("#container")
        .attr("id", "chart_wrapper");

 var chartDiv = $("<div></div>").appendTo("#chart_wrapper")
        .attr("id", "chart_div");
        
  $('#chart_wrapper').append(`<style>
 #chart_wrapper{
  width:1240px;
  height:688px;   
  position:relative;  
  padding: 35px 30px 20px 30px;  
  box-sizing:border-box; 
  }
 
 #chart_div{
 	
  	width:100%;
    height:100%;
 }
  </style>`)

   var chartHeader = `<div id=title></div>
      <div  id=chart ></div>
     <div  id=legendWrapper></div>
       <div class="legend"> 
             <p class="legend-name">
      </div>
    </div>
  `;
  

   var footerContent =`<div style='display:flex;flex-direction:column;'> 
    <div style="flex-basis: 50px; display: flex; align-items: center; border-top: 2px solid rgb(0, 0, 0);">
    <div style=" flex-basis: 123px; height: 24px;margin-right:20px">
        <svg xmlns="http://www.w3.org/2000/svg" width="123" height="24" viewBox="0 0 123 24">
     
            <path d="M30.492 6.385l2.693 7.428h-5.43zm-6.211 16.853l1.998-5.473h8.34l1.998 5.473h4.474L32.577.043H28.32l-8.513 23.195z"></path>
            <path d="M90.608 6.385l2.693 7.428h-5.43zM84.44 23.238l1.998-5.473h8.34l1.998 5.473h4.474L92.736.043H88.48l-8.513 23.195z"></path>
            <path d="M43.219.043h3.431l11.902 14.769V.043h4.43v23.195h-3.127L47.649 8.123v15.115h-4.43z"></path>
            <path d="M82.355.043v3.953H76.23v19.242h-4.474V3.996h-6.124V.043z"></path>
            <path d="M107.808 4.04h4.04c1.52 0 2.302.347 2.823.912.478.52.782 1.216.782 1.998s-.26 1.433-.782 1.954c-.52.565-1.303.913-2.823.913h-4.04zm15.333 19.155h-.031l.031.043zm-7.253-9.99c.912-.348 1.65-.826 2.215-1.477 1.173-1.173 1.824-2.997 1.824-4.822 0-1.824-.651-3.605-1.824-4.821C116.8.738 115.063 0 112.065 0h-8.73v23.195h4.473v-9.47h3.649l6.776 9.47h4.877z"></path>
            <path d="M18.764.043H13.9L5.56 11.641l8.34 11.597h4.864l-8.34-11.597z"></path>
            <path...