Adding live metrics to your home page

Modern websites often show live metrics on their home pages to create a feeling of transparency. Let's see how we can use GraphJSON to easily add live metrics to our own webpages.

One project I recently created is called Centralized Coin. It's an experiment bisecting the space between traditional financial institutions and crypto. In particular, each transaction is really cheap (similar to banks) but also immediately publicly accessible via an API (similar to crypto).

One thing that would be pretty cool is to show live transaction statistics on the home page of the site. Let's see how we can use GraphJSON to accomplish that.

Goals

At the end of this guide, we'll have three different graphs on the home page

  1. Overall volume of transactions over time
  2. Number of transactions over time
  3. Average coins per transaction

Logging the data

The first step towards accomplishing our goal is to log the data we need to generate the graphs. In particular, we need to log each transaction and their respective size (number of coins)

Before we get started logging each of these events, let's create a logging module so we can have cleaner code when logging. The module I create looks as follows

export function log(json) {
  const payload = {
    api_key: process.env.api_key,
    timestamp: Math.floor(new Date().getTime() / 1000),
    json: JSON.stringify(json)
  };

  await fetch("https://graphjson.com/api/log", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(payload)
  });
}

Now to finish logging, we simply insert the following code where transactions are sent.

import { log } from "@/lib/log";

export function sendTransaction(from, to, amount) {
  // send transaction 

  log({
    Event: "transaction_sent",
    amount,
  });
}

After sending a test transaction I can go to GraphJSON and look at the sample view. We can see below that the two test transactions have successfully been logged.

Image of GraphJSON Dashboard

Graphing the data

Conveniently, GraphJSON supports count, sum, and avg aggregations. These map 1-1 with the three goals we have.

  1. Count of transactions shows number of transactions over time
  2. Sum of transaction amounts show network volume over time
  3. Avg of transaction amounts show average transaction amounts over time

 

Image of GraphJSON Dashboard

 
Now we simply customize the graph using the UI and voila a graph to be proud of!

Image of GraphJSON Dashboard

Embedding the graphs

Now all we have to do is click the Export button and click on "As Graph" in the dropdown.

Image of GraphJSON Dashboard

We can then use the automatically generated code to generate a iframe url for the graph

Image of GraphJSON Dashboard

We then add the generated iframe url into our home page

<div className="my-10">                                                                                                                              
  <div className="mb-2 font-bold">                                                                                                                   
    Can I see how much volume the network is doing?                                                                                                  
  </div>                                                                                                                                             
  <div className="mb-2">                                                                                                                             
    <a href="https://centralized-coin-explorer.vercel.app/">                                                                                         
      <iframe                                                                                                                                        
        className="w-full mt-8 h-64"                                                                                                                 
        src="https://graphjson.com/embed?p=aU2FsdGVkX1i..."                                                                                  
      />                                                                                                                                             
    </a>                                                                                                                                             
  </div>                                                                                                                                             
</div> 

And that's it! Now we have live metric graphs on centralized-coin.com!

Image of GraphJSON Dashboard

This concludes this guide. Follow me on Twitter at @TheBuilderJR and the official GraphJSON account @GraphJSON to get future project updates!

GraphJSON by @JRTheBuilder

© GraphJSON 2021