This content originally appeared on DEV Community and was authored by Bunny Eluvade
📌 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? 🚀
This content originally appeared on DEV Community and was authored by Bunny Eluvade
Bunny Eluvade | Sciencx (2025-02-24T01:32:32+00:00) Building a Real-Time Ratio Chart with WebSockets & TradingView. Retrieved from https://www.scien.cx/2025/02/24/building-a-real-time-ratio-chart-with-websockets-tradingview/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.