BogCharts for Token Teams

If you have not yet done so, you can create a chart embed here.

There are two types of chart embeds: iframe and Web Component​
iframe
Iframe code can be placed anywhere in your HTML code with no additional scripts.
You can style the iframe with CSS just like any other HTML element.

Example:
<iframe
  src="https://teams.bogged.finance/embeds/chart?address=0xB09FE1613fE03E7361319d2a43eDc17422f36B09&chain=bsc&charttype=candles&theme=dark&defaultinterval=15m&showchartbutton=true"
  frameborder="0"
  height="400px"
  width="800px"
></iframe>
​
Web Component
A Web Component is a new web technology to create reusable custom elements with their functionality encapsulated away from the rest of your code.

For the Chart Web Component, you can modify any property on the element to have it update in real-time. You can also listen to the onUpdate event to get price information as the chart updates.
Exposed Price Information
{
    "baseSymbol": string,
    "baseAddress": string,
    "baseDecimals": number,
    "basePriceUSD": number,
    "baseCircSupply": number,
    "baseTotalSupply": number,
    "baseMarketcap": number,
    "baseMarketcapFD": number,
    "quoteSymbol": string,
    "quoteAddress": string,
    "quoteDecimals": number,
    "quotePriceUSD": number,
    "tokensPerQuote": number,
    "singleLPValueUSD": number,
    "totalLiquidityUSD": number,
    "pairAddress": string,
    "pairFactory": string
}

Examples
Dynamically Changing Chart Type
<body>
<!--   Example of a button that a user can click to change the type of the chart dynamically -->
 <button class="theme-btn" style="margin-bottom: 1rem;">Change Chart Type</button>
  
  <div style="max-width: 1000px; height: 600px">
    <chart-embed
      chain="bsc"
      address="0xB09FE1613fE03E7361319d2a43eDc17422f36B09"
      charttype="candles"
      theme="dark"
    ></chart-embed>
  </div>
​
  
    <script async type="module">
      //load script and register chart
      import { register } from "https://public.bog-general-api.com/static/chart/main.js";
​
      register("chart-embed");
      
      //query HTML elements
      const button = document.querySelector(".theme-btn")
      const embed = document.querySelector("chart-embed")
      
      //setup listener to change chart props
      button.onclick = ()=>{
        const type = embed.getAttribute("charttype");
        if(type === 'candles'){
          embed.setAttribute("charttype","line")
        }else{
          embed.setAttribute("charttype","candles")
        }
      }
    </script>
  </body>
Changing Chart Type Example
Listening To Chart Update
<body>
<!-- Chart Container-->
  <div class="chart-container" style="max-width: 1000px; height: 600px">
    <chart-embed
      chain="bsc"
      address="0xB09FE1613fE03E7361319d2a43eDc17422f36B09"
      charttype="candles"
      theme="dark"
    ></chart-embed>
  </div>
​
<!-- Info Panel -->
  <div class="info-panel"></div>
  
  <script async type="module">
      //load script and register chart
      import { register } from "https://public.bog-general-api.com/static/chart/main.js";
​
      register("chart-embed");
      
      const infoPanel = document.querySelector(".info-panel")
      const embed = document.querySelector("chart-embed")
      
      embed.addEventListener("onUpdate",(e)=>{
        //get update info from the event
       const updateInfo = e.detail[0];
        
        //combine object into string of html
        const html =  Object.entries(updateInfo).reduce( (acc,[key,value]) => 
           acc + `<div><span>${key}</span>: ${value}</div>`
        ,"")
        //set to info panel
        infoPanel.innerHTML = html
      })
    </script>
  </body>
Accessing Chart Update Example
​
Last modified 1yr ago