Building a Real-Time Ratio Chart with WebSockets & TradingView

📌 Introduction:
Ever needed to track the relationship between two assets, only to realize no exchange or charting tool supports it? That’s exactly the problem I ran into when trying to track a custom price ratio that wasn’t listed anywhere.

To solve this, I built an open-source, real-time ratio tracker using:

WebSockets for live price updates
TradingView Lightweight Charts for smooth visualization
JavaScript (ES6+) & HTML5 for a fully client-side solution
🔗 Live demo: https://neogas.eluvade.com
💻 GitHub repo: https://github.com/Eluvade/neogas

Let’s dive into how it works! 🚀

📌 The Problem: No Market, No Chart
Most trading platforms only support predefined asset pairs, but traders often need custom ratios to analyze trends, correlations, or arbitrage opportunities.

For example, I wanted to track the GAS/NEO ratio, but no exchange provided a direct market for it. Manually calculating ratios every time wasn’t practical, so I built a tool that does it automatically in real time.

📌 How It Works
The app fetches live price data for two assets via Binance WebSockets, calculates their ratio, and displays it in TradingView Lightweight Charts.

🔹 Tech Stack:
✅ Binance WebSockets – Streams real-time price updates
✅ TradingView Lightweight Charts – Optimized for fast rendering
✅ JavaScript (ES6+) – Client-side, no backend needed
✅ PWA-ready – Works on both desktop & mobile

📌 Challenges & Solutions
1️⃣ Keeping WebSockets Stable

Binance WebSockets disconnect periodically, so I added auto-reconnect logic to maintain the feed.
2️⃣ Optimizing Performance for Mobile

Instead of using TradingView’s full SDK, I used Lightweight Charts, which drastically reduces load times.
3️⃣ Customizing TradingView for Ratio Charts

TradingView is optimized for price charts, so I had to tweak settings to properly display a ratio instead of a price.
📌 Future Improvements
🔥 Custom ratio selection – Let users define their own asset pairs
🔔 Price alerts – Notify users when a ratio crosses key levels
📊 Expanded historical data – Improve time-series analysis

📌 Try It Out & Contribute
This project is fully open-source! If you’re interested in real-time trading data, WebSockets, or charting, feel free to explore, fork, or suggest features.

🔗 Live demo: https://neogas.eluvade.com
💻 GitHub repo: https://github.com/Eluvade/neogas

Would love to hear feedback—what would you add to a tool like this? 🚀

Comments

[Darryl Ruggles]

A really cool example. I have used TradingView for years and will try this out.

[Bunny Eluvade]

Thanks! 🙌 If you’re already familiar with TradingView, you should feel right at home with the chart. Let me know what you think after trying it out—open to any feedback or ideas for improvements! 🚀