# Blockchain Data Widgets | Blockchain Widgets

**URL:** https://community.bitquery.io/t/blockchain-data-widgets-blockchain-widgets/770
**Category:** GraphQL Tutorials
**Created:** [December 28, 2021, 10:55am UTC](https://community.bitquery.io/t/blockchain-data-widgets-blockchain-widgets/770 "2021-12-28T10:55:24Z")
**Posts on this page:** 1
**Page:** 1

<div class="post-metadata">

### Author: ![aman](https://avatars.discourse-cdn.com/v4/letter/a/90ced4/32.png) [@aman](https://community.bitquery.io/u/aman)
#### Post date: [December 28, 2021, 10:55am UTC](https://community.bitquery.io/t/blockchain-data-widgets-blockchain-widgets/770/1 "2021-12-28T10:55:24Z")

</div>

[![](https://us1.discourse-cdn.com/flex016/uploads/bitquery/original/2X/8/8f39a45ca27d7fcdd40f65fc62b0b7829068fa07.jpeg "Bitquery Widget | Blockchain data widgets") ](https://vimeo.com/660664155)

There are times when you want to embed certain blockchain data on your websites.

For example, you have a token and you want to showcase its price or latest transfers.

But you don’t know how to code.

Therefore, we have built widgets for you.

We provide simple HTML code, which you can embed to enable blockchain data visualization on your website.

Let’s understand how this is possible using Bitquery Widgets.

## How to find the data you are looking for?

Before creating any visualization, you need to find out the data you are looking for.

The best place to look for the data is our [**Explorer**](https://explorer.bitquery.io/), you should always start with our explorer.

You can search your token, wallet or transaction, or any other smart contract or blockchain-related things and see what data we provide.

For example, let’s say you want to show daily transfers trends for the [Shiba token](https://explorer.bitquery.io/ethereum/token/0x95ad61b0a150d79219dcf64e1e6cc01f0b64c4ce). Shiba exists on the Ethereum chain and its address is 0x95ad61b0a150d79219dcf64e1e6cc01f0b64c4ce.

Now when you [**search this token on our explorer**](https://explorer.bitquery.io/ethereum/token/0x95ad61b0a150d79219dcf64e1e6cc01f0b64c4ce), you will see a lot of data related to Shiba.

 ![](https://us1.discourse-cdn.com/flex016/uploads/bitquery/original/1X/6a8ceaf3b467671ae565f6df715fb5f620644124.jpeg)

Shiba token details

As you can see there are a lot of details related to the token, and you can also see Shiba’s transfers at the bottom left.

Now, let’s say you want to add a similar widget to your website.

You can accomplish this with our GraphQL IDE.

To open this widget, click on the Open GraphQL IDE on the bottom right.

 ![](https://us1.discourse-cdn.com/flex016/uploads/bitquery/original/1X/d9fccf0b34be3e67c6bee4ee2b94fab990709527.png)

This will open the [**GraphQL query**](https://graphql.bitquery.io/ide/Shiba-token-transfers) on the which is getting that data.

 ![](https://us1.discourse-cdn.com/flex016/uploads/bitquery/original/1X/b386756e41a7946df48c42008e6a35b4bf877910.png)

Shiba token transfers

Make sure you get signed up on our GraphQL IDE.

## **Visualize Query Result**

Now you can visualize any query result using our GraphQL IDE.

Check the following video.

> **[Bitquery](https://vimeo.com/user133719778)**
>
> Bitquery is a member of Vimeo, the home for high quality videos and the people who love them.

You select the option of the bar chart to get the visualization.

 ![](https://us1.discourse-cdn.com/flex016/uploads/bitquery/original/1X/b2f4db7204e948d113ae1d137d3eb02bab0b5499.png)

Bar chart option

You will see the following visualization once you select the option of the bar chart.

 ![](https://us1.discourse-cdn.com/flex016/uploads/bitquery/original/1X/1665da0a18ba8f343f77aca32014331a15a0d3da.png)

Now if you notice, you will a JS button on the screen.

 ![](https://us1.discourse-cdn.com/flex016/uploads/bitquery/original/1X/e7b1442c2405eb538396dc5765881188e6097f1f.png)

This JS button will give you HTML code which you need to embed on your website.

 ![](https://us1.discourse-cdn.com/flex016/uploads/bitquery/original/1X/31224fe370c498a41ab7a7c3142f58cc0627ea25.png)

HTML Code for the widget

## Getting Tradingview Chart

You can also get the Tradingview chart for any token.

For example, check this query where we are getting [OHLC data WETH-SAITAMA](https://graphql.bitquery.io/ide/tv-weth-saitama) trading pairs to visualize it as a Tradingview chart.

Note: To visualize OHLC data as a TradingView chart, there should be “open”, ”low”, ”high” and “close” data points in the result.

 ![](https://us1.discourse-cdn.com/flex016/uploads/bitquery/original/1X/b6b1a20bbac4459f92ac6bd8104e70135f5d9a95.png)

You can click on the JS button to get the HTML code for Tradingview.

## Use our APIs and build Widgets

You can write GraphQL queries to get any type of blockchain and visualize them through our [GraphQL IDE](https://graphql.bitquery.io/).

Read this guide on [**how to get started with Bitquery APIs**](https://community.bitquery.io/t/how-to-get-started-with-bitquerys-blockchain-graphql-apis/13).

Currently, we support more than [40 blockchains](https://bloxy.info/status).