Blockchains are live economies. Because of their transparent nature, we can learn a lot by looking into blockchain data. However, accessing blockchain data is not easy. Standard blockchain explorer shows simple blockchain data but does not allow you to showcase that data on your website.
In this article, we will explain how to add blockchain/crypto chart widgets such as Etherum chart or Bitcoin chart on your website using Bitquery explorer.
Currently, Bitquery Explorer supports more than 19 blockchains, and you can get chart widgets for any of these blockchains.
To add any widget on your website, we need to follow two steps.
- Get the widget code
- Add widget code on your website
Table of Contents
How to get widget code
Let’s say we want to show how many transactions the Bitcoin blockchain processes every day. You can find this widget here, and to get the widget code, click on “JS” on the bottom right corner. It will pop-up a window with the widget code.
Actually you can try this here on this page, in the following Bitcoin transaction chart widget.
Bitquery chart widget on normal websites
Every widget code contains 4 parts.
- Script tags for Javascript files
- Script tag with Javascript code
- Link tags for CSS files
- A single HTML div tag
Now on your website, you can add these tags accordingly. If inserted correctly, the HTML div tag will show the data. If you have any questions or queries, please ask on our Telegram channel.
Important Notes
- If the widget does not load properly, just add Bootstrap.min.css.
- While importing money flow, if you face any problem import vis-network.min.js
- Every widget has a theme option, I am using ‘dark’ theme, you can use ‘light’ them if you want.
Bitquery chart widgets on WordPress
WordPress powers 35% of the Internet and a lot of crypto bloggers. Let’s see how you can add blockchain/crypto chart widgets on your WordPress website.
First, you need to install the WP coder WordPress plugin. WP coder plugin will convert our widgets into shortcodes that can be added on any page or blog post.
As we mentioned above, every widget has 4 parts.
- Script tags for Javascript files
- Script tag with Javascript code
- Link tags for CSS files
- A single HTML div tag
We need to add these parts in the WP Coder plugin accordingly. First, click on ‘Add new.’ Then add the widget part as shown below.
Once done, you will get a shortcode on the right side, which you can copy-paste wherever you want to showcase the widget.
Useful Crypto Chart Widget
Now, let’s see some of the useful charts which you can add to your website.
Bitcoin Fee chart
You can find this Bitcoin fee chart widget here. It shows how much transaction fee paid to miners over time.
Money Flow Graphs
Money flow graphs show a visual representation of how cryptocurrency sends and received by wallets. You can find a Money flow graph attach with every blockchain address on Bitquery. For example — Check the money flow graph of Twitter hackers.
Also Read: Twitter Hack — Track Bitcoin crimes in real-time using Coinpath®
Token Graphs
You can also check various token analytics graphs on Bitquery. For example, here are a few charts showing DAI analytics.
Custom Data in Crypto chart Widget
Bitquery also provides flexibility to show widgets with custom data. Let’s see an example.
If you pay attention, you will see that script tag with code in widget contains a GraphQL query. You can change the query to get different results. Besides, you can also test your query directly on the widget using the “GraphQL” button from the bottom right corner.
You can change parameters to get custom results, or if you know GraphQL, then you can change the query itself.
In addition, if you are a developer, then you can pull any type of data from Bitquery and create your own charts.
Bitquery exposes a unified interface for all blockchains, therefore, you can create all sorts of blockchain analytics visualization using it. If you have anything particular in your mind, let us know on our Telegram group.
About Bitquery
Bitquery is a set of software tools that parse, index, access, search, and use information across blockchain networks in a unified way. Our products are:
- Coinpath® APIs provide blockchain money flow analysis for more than 24 blockchains. With Coinpath’s APIs, you can monitor blockchain transactions, investigate crypto crimes such as bitcoin money laundering, and create crypto forensics tools. Read this to get started with Coinpath®.
- Digital Assets API provides index information related to all major cryptocurrencies, coins, and tokens.
- DEX API provides real-time deposits and transactions, trades, and other related data on different DEX protocols like Uniswap, Kyber Network, Airswap, Matching Network, etc.
If you have any questions about our products, ask them on our Telegram channel or email us at hello@bitquery.io. Also, subscribe to our newsletter below, we will keep you updated with the latest in the cryptocurrency world.
Also Read