OpenViSTAI · Agents · Blockchain · Crypto
Submit a project
Menu
Exchanges & Trading

Trading Charts

Trading Charts is a Vue.js web application example that requests historical cryptocurrency klines from Binance and draws time-and-close-price data as a D3.js line chart. Its chart helper also exposes an update function for the displayed tick price.

Explore the practical guide ↓

Independent OpenViST project profile, based on linked sources.

Trading Charts — OpenViST project profile in Exchanges & Trading.
OpenViST project illustration. See the linked sources for product details.
Understand the project

Practical overview

When it fits

Use it as a code example when prototyping a web chart based on Binance historical prices or exploring a D3.js chart helper.

Who it is for

  • Developers learning how to visualize Binance historical market data in a Vue.js web project.
  • Developers exploring a D3.js line-chart helper and a basic Binance klines request pattern.

Documented uses

  • Request historical klines for a cryptocurrency symbol and interval.
  • Plot historical close prices against time.
  • Update the displayed tick price through the chart helper.
Before you choose

Requirements & limits

The source repository is public and licensed under MIT.

  • The documented stack is Vue.js with D3.js for charts and axios for the Binance historical-data request.
  • The README describes a Binance WebSocket listening example, but does not include the stream implementation in its shown code.
  • The documented setup uses npm install and npm run serve.

Check current requirements in the official documentation. Source-based guidance does not mean OpenViST has run or independently tested this project.

Source-based practical guide

Set up the Vue.js project

Install the project dependencies and start its documented development server.

Before you start

  • The Trading Charts repository
  • npm

Steps

  1. Run the command below in the project.

    Documented command
    npm install

  2. Run the command below to start the development server.

    Documented command
    npm run serve

Expected outcome

The project dependencies are installed and the documented development server command is started.

Documentation 1 ↗
Source-based practical guide

Request historical Binance klines for a chart

Use the documented request pattern to retrieve historical data for a symbol and interval.

Before you start

  • The project’s documented axios request pattern
  • A Binance symbol and interval

Steps

  1. Create an axios instance with the documented Binance API base URL and headers.

  2. Make a GET request to /api/v3/klines.

  3. Provide the symbol and interval as request parameters; the example uses BTCUSDT and 15m.

  4. Use the returned time and close-price values as chart data.

Expected outcome

A historical klines request pattern and the fields used for line-chart data are documented.

Guide limitations

  • The README does not describe an interface for choosing symbols or intervals.
  • The guide describes the documented request and data flow, not a verified API execution.
Documentation 1 ↗
Evidence and transparency

Sources & review

Official repository ↗
Source record details
Source availability
Active
Sources checked
16 October 2026
Original website title
adrianmanchev/trading-charts · Official homepage title · retained in its source language
How we review sourcesSuggest a correction