Bogged
  • Introduction
  • Get Started
    • Create a Wallet
    • Funding Your Crypto Wallet
    • Your First Trade
  • General FAQ
  • Roadmap & Releases
  • Token
    • FactSheet
    • BOG Tokenomics
      • Buy BOG
      • Staking
    • Earning & Staking
  • Product Overview
    • 🔃DEX Aggregator
      • Intro
      • Making a trade
      • Supported Chains
      • Supported DEXs
      • FAQ
    • 🌉DeFi Bridge
      • Intro
      • Bridging your tokens
      • The Future
    • 📉DeFi Stop-Losses
      • Introduction to DeFi stop-losses on Bogged
      • What is a stop-loss?
      • How to set a stop-loss on the Bogged platform
      • Stop-loss FAQs
    • 🎯Ultimate Sniper
      • Intro
      • Supported Chains & More
      • UI Overview & Basic Usage Guide
      • FAQ
    • 👀Limit Orders
      • Introduction to DeFi Limit Orders on Bogged
      • How to set a Limit Order
      • FAQs and Troubleshooting
    • 📈Charts
      • Intro
      • Portfolio
      • Supported Chains & DEXs
      • Changelog
  • Token Teams
    • 🚀Promotion
      • Trending & Most Viewed
      • Banner Ads
      • Promoted Token List
    • 💬Telegram Price Bot
      • Setup
        • Setup - Basic
        • Setup - Standalone Buy Bot
        • Setup - Waterfall Channel
      • Advanced Customisation
      • Command List
      • Known Conflicts & Troubleshooting
      • Roadmap
    • 🔁Bogged DEX Aggregator
      • For DEX's
      • For Token Teams
    • 📈BogCharts
      • BogCharts for Token Teams
      • BogCharts Honeypot Detection FAQ
    • ⚙️API
      • Importing into Excel
      • Importing into Google Sheets
  • Security
    • Overview
    • 🔎Audits
    • 🕷️Immunefi Bug Bounty
  • Developers
    • 📄Smart Contracts
      • BSC
      • Avalanche
      • Fantom
      • Cronos
      • Polygon
      • HECO
      • OEC
      • Kucoin Community Chain
      • Moonriver
      • Harmony
    • 🎲Randomness
  • Resources
    • Links
    • Contact Us
Powered by GitBook
On this page
  • iframe
  • Web Component
  • Examples

Was this helpful?

  1. Token Teams
  2. BogCharts

BogCharts for Token Teams

PreviousBogChartsNextBogCharts Honeypot Detection FAQ

Last updated 3 years ago

Was this helpful?

If you have not yet done so, you can create a chart embed . There are two types of chart embeds: and

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>

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>

📈
here
iframe
Web Component
Changing Chart Type Example
Accessing Chart Update Example