Crypto chart widgets for your website (Including WordPress)

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

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.

Get Bitcoin Chart Widget Code
Get Bitcoin Chart Widget Code
Bitcoin transactions Chart Widget Code
Bitcoin transactions Chart 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.

HTML'div' tag
HTML ‘div’ tag
Javascript code inside script tag
Javascript code inside ‘script’ tag
Add URLs in'script' tag as'JS' files and URLs in'link' tag as'CSS' files
Add URLs in ‘script’ tag as ‘JS’ files and URLs in ‘link’ tag as ‘CSS’ files

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:

  • 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