How to Integrate Real-Time Market Data API into a Dashboard and Display Live Quotes

·

In the fast-evolving world of fintech, real-time data is the backbone of informed decision-making. By integrating a real-time market data API like AllTick’s, you can transform your data dashboard into a powerful tool that delivers live financial insights. This guide walks you through the entire process of connecting to a real-time quote API via WebSocket, processing incoming market data, and dynamically displaying it on your dashboard.

Whether you're building a trading analytics platform, monitoring global financial markets, or developing a crypto price tracker, this tutorial provides actionable steps to bring live market feeds into your product seamlessly.

What Is a Real-Time Market Data API?

A real-time market data API delivers up-to-the-second financial information with zero delay—unlike traditional delayed feeds that may lag by 15 minutes or more. AllTick offers comprehensive real-time data across multiple asset classes, including:

Using the WebSocket protocol, this API enables continuous, two-way communication between your application and the data server. As prices change in global markets, updates are instantly pushed to your system—ensuring your dashboard reflects the most current conditions.

👉 Discover how live financial data can power your next dashboard innovation.

Key Benefits:

Prerequisites for Integration

Before diving into the code, ensure you have the following:

  1. WebSocket Client Library: Install websocket-client using pip:

    pip install websocket-client
  2. API Token: Sign up at AllTick’s official site to obtain your unique authentication token.

With these ready, you can begin establishing a live connection to the market.

Connecting to Real-Time Data via WebSocket

Below is a complete Python implementation that demonstrates how to subscribe to real-time market quotes using AllTick’s WebSocket API.

import json
import websocket  # pip install websocket-client

class Feed(object):
    def __init__(self):
        # Replace 'your_token' with your actual API token
        self.url = 'wss://quote.tradeswitcher.com/quote-stock-b-ws-api?token=your_token'
        self.ws = None

    def on_open(self, ws):
        print('WebSocket connection established!')

        # Subscription request payload
        sub_param = {
            "cmd_id": 22002,
            "seq_id": 123,
            "trace": "3baaa938-f92c-4a74-a228-fd49d5e2f8bc-1678419657806",
            "data": {
                "symbol_list": [
                    {"code": "700.HK", "depth_level": 5},
                    {"code": "UNH.US", "depth_level": 5}
                ]
            }
        }

        # Send subscription message
        sub_str = json.dumps(sub_param)
        ws.send(sub_str)
        print("Market depth subscribed!")

    def on_message(self, ws, message):
        # Parse and display incoming data
        try:
            result = eval(message)  # Caution: Use json.loads() in production
            print(result)
        except Exception as e:
            print("Error parsing message:", e)

    def on_error(self, ws, error):
        print("Connection error:", error)

    def on_close(self, ws, close_status_code, close_msg):
        print('WebSocket connection closed.')

    def start(self):
        self.ws = websocket.WebSocketApp(
            self.url,
            on_open=self.on_open,
            on_message=self.on_message,
            on_error=self.on_error,
            on_close=self.on_close
        )
        self.ws.run_forever()

if __name__ == "__main__":
    feed = Feed()
    feed.start()

Code Explanation

Visualizing Real-Time Data on Your Dashboard

Once you’re receiving live market updates, the next step is visualization. A well-designed chart enhances user engagement and comprehension.

Here’s an example using Matplotlib to create a real-time price chart:

import matplotlib.pyplot as plt
from datetime import datetime

class DataBoard:
    def __init__(self):
        plt.ion()  # Turn on interactive mode
        self.prices = []
        self.times = []

    def update_data(self, price):
        self.prices.append(price)
        self.times.append(datetime.now())
        self.plot_data()

    def plot_data(self):
        plt.clf()  # Clear previous plot
        plt.plot(self.times, self.prices, label="Live Price", color="blue")
        plt.xlabel("Time")
        plt.ylabel("Price")
        plt.title("Real-Time Price Feed")
        plt.legend()
        plt.xticks(rotation=45)
        plt.tight_layout()
        plt.pause(0.05)

# Example integration in on_message:
# Assuming 'result' contains a 'last_price' field
# board.update_data(result['data']['last_price'])

This simple framework continuously updates a line chart as new prices arrive. For production dashboards, consider using web-based tools like Plotly Dash, Chart.js, or D3.js for responsive, browser-compatible visualizations.

👉 See how real-time data visualization can elevate user experience in financial apps.

Best Practices for Stable and Efficient Integration

To ensure reliable performance and scalability, follow these guidelines:

1. Implement Heartbeat Mechanism

Maintain connection health by sending periodic ping messages as specified in the API documentation. This prevents timeout disconnections during periods of low market activity.

2. Manage Network Stability

Use retry logic with exponential backoff in case of temporary outages:

import time

def start_with_reconnect(self, max_retries=5):
    for attempt in range(max_retries):
        try:
            self.start()
            break
        except Exception as e:
            wait = (2 ** attempt) + (random.randint(0, 1000) / 1000)
            print(f"Reconnect attempt {attempt + 1} failed. Retrying in {wait:.2f}s...")
            time.sleep(wait)

3. Control Data Volume

Subscribing to excessive symbols or high-depth order books can overwhelm your system. Start small and scale based on processing capacity.

4. Secure Data Handling

Avoid eval() in production. Always use json.loads() and validate incoming data structures to prevent code injection risks.

Frequently Asked Questions (FAQ)

Q: Can I use this method for cryptocurrency dashboards?
A: Yes. The same WebSocket approach works for crypto markets. Just ensure your API provider supports digital assets like BTC/USD or ETH/EUR.

Q: Is WebSocket the only way to get real-time data?
A: While REST APIs are simpler, they require polling and introduce delays. WebSocket is ideal for true real-time streaming due to its persistent connection model.

Q: How often does the data update?
A: Updates occur whenever there's a price change—typically multiple times per second during active trading hours.

Q: Can I display bid/ask spreads and volume?
A: Absolutely. The returned data usually includes full Level 2 depth (bids, asks, sizes), which you can parse and display accordingly.

Q: What happens if my internet connection drops?
A: Implement automatic reconnection logic and resubscribe upon recovery to avoid missing critical data.

Q: Are there alternatives to AllTick for real-time feeds?
A: Yes, but many require costly subscriptions or complex licensing. Always compare latency, coverage, and ease of integration before choosing.


Integrating real-time financial data into your dashboard unlocks powerful analytical capabilities. With the right tools and practices, you can deliver timely insights that empower users across stocks, forex, crypto, and beyond.

👉 Start leveraging real-time market intelligence in your application today.