Bogged Finance
Search…
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
​
Copy link
On this page
iframe
Web Component
Examples