Create a simple charting application using Dash and the Coinbase Exchange API

For a high quality end user crypto trading experience, it’s critical to build chart visualizations into your UI.

By Jeff Curry

Engineering

, January 19, 2023

, 5 min read time

Coinbase Exchange API image

For a high quality end user crypto trading experience, it’s critical to build chart visualizations into your UI. This Python application uses Dash, an open source data visualization framework, to create a simple, intuitive historical chart built with Coinbase Exchange API public endpoints.

This example application is meant to give developers leveraging Coinbase for B2B2C and B2B2B trading applications an easy frame of reference when starting out. Please note that the below is for example purposes only.

This application is made up of four steps (none of which require API credentials!):

  • Display the current product and price using the Coinbase Exchange API "ticker" endpoint   

  • Create a historical chart using the Coinbase Exchange API "candles" endpoint

  • Add in Dash Core Components and HTML to make the application interactive

  • Create an app.py file and define all your routes

When finished, you will have something that looks like this:

Coinbase trading application

Displaying the product and price: For this application, we will need to ensure that we have the following installed in our Python environment: pandas, ta, dash, and requests.

Assuming you have none installed, the following pasted to your environment command line will get you what you need:

  • pip install requests

  • pip install ta

  • pip install dash

  • pip install pandas

Create a new file called callback_price.py. This will be used to call the Coinbase Exchange API to report a product's current price.

First, import requests and json to submit and format requests to the Exchange API, as well as Dash's Input and Output modules that will be used in a callback. This is a function that will automatically update figure components whenever an input changes.

json

Next, create a callback function so that any time a new product is selected, the display price will update. This is accomplished using @app.callback, followed by at least one Output and Input. Values for price-ref and product-switcher will be defined in section 3.

Within a function called update_price, create the logic to call the Coinbase Exchange API. Specifically, the ticker endpoint is called in order to get a current price quote. This endpoint returns a snapshot of information about the last trade, best bid/ask, and 24h volume, from which only price will be displayed. Values for product_id_selection will be defined in step 3.

def register price

Full code for this section available here.

Creating a historical chart: Create a new file in your project called callback_graph.py and start by importing relevant packages:

import request

As seen previously, requests and json will again be used to handle API connections. Additionally, you will import multiple Plotly and Dash functions, pandas to build your DataFrame, and a package called ta which will be used to calculate a few different technical indicators.

Creating a DataFrame: Begin this function by declaring an empty Pandas DataFrame, which will later be fed data from the Exchange API.

The DataFrame columns defined here match the columns provided by Coinbase Exchange. 

Several manipulations are applied to this DataFrame. First, reverse the row order and reset the index to make calculations for your indicators easier to perform. Then create a "diff" and assign this diff color coding to each row of your DataFrame in a new column called "color", which will be used to color code the volume in your chart. Convert your timestamp into seconds and create columns in your DataFrame for the following indicators: 

  • Relative Strength Index (RSI)

  • 20 unit moving average (MA20)

  • 7 unit moving average (MA7)

def create

Building a chart: Declare a new chart as fig1, then establish three subplot regions using plotly.graph_objects for candlestick, scatter, and bar charts. 

The first subplot displays candlestick data, interpolated using the columns defined in the previous code block. This is then overlaid with volume as a bar chart (with a secondary y axis), and moving average indicators plotted as lines. In each case, add_trace is utilized to add additional data to the first subplot.

The second and third subplots create Moving Average Convergence Divergence (MACD) and RSI plots, respectively. In your previous code block, RSI was calculated, however MACD is calculated here instead. You may prefer to do all calculations within the DataFrame logic. 

Finally, label all subplots using update_yaxes.

def render
figl

Getting chart data: This last code block is where you will call the Coinbase Exchange API to provide relevant product candle information. 

In this function, whenever gran-switcher or product-switcher are changed (by someone interacting with your UI), the chart will update. 

The function update_output is where the Exchange API is called, specifically the Get Product Candles endpoint. Like in section one, the inputs product_id_selection and granularity_selection will be defined and further explained in the next section.

def register

Full code for this section available here.

Application Layout: Leveraging HTML and built-in Dash functions, this is where the products you wish to display as well as chart granularity are defined. First, create layout.py and import the following:

from dash

The way that you write your layout file will be highly dependent on your own application styling. As such, consider the following as a simple example. 

Dash utilizes Dash Core components, defined as dcc, to handle several interactive tools deployable within your application. Add dcc.Dropdown for products and granularities. Coinbase Exchange offers six granularities for product candles, all of which are in seconds (which is why you converted timestamps in your DataFrame). For readability, they are being displayed in standard charting units. Finally, IDs for each dropdown match values that were specified in previous callback functions. Now, Dash will know where to look for changes to product and granularity selections.

layout

Full code for this section available here.

Making it run: Create an app.py to call each of the other scripts.

This file will import your work from their respective scripts. Give your application a title, and then you are ready to go!

Last

To run the application, make sure that all four scripts created are in the same repository. Then, run app.py either from the command line within the folder with python app.py or using the GUI of your preferred Python IDE.

Full code for this section available here.

Downloading this application: Our open source application is shared to the public on our Github here, or you may clone this repo with the following command: git clone git@github.com:coinbase-samples/trade-whiz-py.git

Please note that this application contains additional functionality associated with Coinbase Prime, which was not covered. If you have a Coinbase Prime account, you can populate relevant API keys in order to place simple trades via this application. Otherwise, feel free to ignore or remove these components from the application.

Disclaimer: Information is provided for informational purposes only and is not investment advice. This is not a recommendation to buy or sell digital assets or to employ a particular investment strategy, codes, or APIs. Coinbase makes no representation on the accuracy, suitability, or validity of any information provided herein. Additional information can be found here.

Coinbase logo

Take control of your money. Start your portfolio today and get crypto.

Sign up for a Coinbase account today and see what the world of decentralized finance can do for you.