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:
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.
<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>