### Start Tradex Chart with Configuration
Source: https://github.com/tradex-app/tradex-chart/blob/master/docs/reference/01_getting_started/index.html
Illustrates the process of initializing the Tradex Chart with a configuration object after it has been mounted on the DOM. The 'config' object should be defined according to the [Configuration](02_configuration) documentation.
```javascript
chart.start(config)
```
--------------------------------
### Install TradeX Chart using npm
Source: https://github.com/tradex-app/tradex-chart/blob/master/docs/reference/01_getting_started/index.html
Instructions to install the TradeX Chart library using the npm package manager. This is a common method for managing project dependencies.
```bash
npm install tradex-chart --save
```
--------------------------------
### Install TradeX Chart using yarn
Source: https://github.com/tradex-app/tradex-chart/blob/master/docs/reference/01_getting_started/index.html
Instructions to install the TradeX Chart library using the yarn package manager. Yarn is an alternative to npm for dependency management.
```bash
yarn add tradex-chart
```
--------------------------------
### Install Project Dependencies (Bash)
Source: https://github.com/tradex-app/tradex-chart/blob/master/src/docs/src/content/docs/guides/development/local-setup.md
Installs all necessary project dependencies using npm. This includes build tools like Vite, testing frameworks like Vitest, and libraries such as TALib-web.
```bash
npm install
```
--------------------------------
### Clone Repository and Install Dependencies (Shell)
Source: https://github.com/tradex-app/tradex-chart/blob/master/docs/guides/development/local-setup/index.html
Clones the TradeX Chart repository and installs all necessary project dependencies using npm. This is the first step for local development.
```shell
git clone https://github.com/tradex-app/TradeX-chart.git
cd TradeX-chart
npm install
```
--------------------------------
### Run Development Commands for Astro Project
Source: https://github.com/tradex-app/tradex-chart/blob/master/src/docs/README.md
Common npm commands to manage and develop an Astro project. These include installing dependencies, starting a local development server, building the production site, and previewing the build. Ensure you are in the project's root directory when running these commands.
```bash
npm install
npm run dev
npm run build
npm run preview
npm run astro ...
npm run astro -- --help
```
--------------------------------
### Start Development Server (Shell)
Source: https://github.com/tradex-app/tradex-chart/blob/master/docs/guides/development/local-setup/index.html
Starts the Vite development server, enabling hot module replacement (HMR) for instant updates during development. Accessible at http://localhost:5173.
```shell
npm run dev
```
--------------------------------
### Example Chart Component Modification (JavaScript)
Source: https://github.com/tradex-app/tradex-chart/blob/master/docs/guides/development/local-setup/index.html
An example illustrating how to modify a chart component within the 'src/components/' directory.
```javascript
// src/components/chart.js
export class Chart {
// Your changes here
}
```
--------------------------------
### Troubleshooting: Port Already in Use (Shell)
Source: https://github.com/tradex-app/tradex-chart/blob/master/docs/guides/development/local-setup/index.html
Instructions for handling port conflicts when starting the development server, either by letting Vite choose the next available port or specifying a custom port.
```shell
# Vite will automatically try the next available port
# Or specify a different port
vite --port 3000
```
--------------------------------
### Install and Configure TALib
Source: https://github.com/tradex-app/tradex-chart/blob/master/docs/guides/faq/index.html
Instructions for installing the talib-web library via npm and configuring it within the TradeX Chart. This is necessary for using indicators.
```javascript
npm install talib-web
import * as talib from 'talib-web'
const config = {
talib: talib
}
```
--------------------------------
### Create and Mount Tradex Chart using JavaScript
Source: https://github.com/tradex-app/tradex-chart/blob/master/docs/reference/01_getting_started/index.html
Shows how to create a Tradex Chart element dynamically using JavaScript and append it to a specified DOM element. This method is useful for programmatic chart instantiation.
```javascript
import { Chart } from 'tradex-chart'
// Create an empty chart and insert it into the DOM
let chart = document.createElement("tradex-chart")
let mount = document.getElementById("mount")
mount.appendChild(chart)
```
--------------------------------
### JavaScript Naming Conventions Example
Source: https://github.com/tradex-app/tradex-chart/blob/master/docs/guides/development/contributing-code/index.html
Provides examples of recommended naming conventions for variables, functions, classes, constants, private members, and boolean flags in JavaScript.
```javascript
// Variables and functions: camelCase
const chartData = []
function calculateAverage() {}
// Classes: PascalCase
class ChartIndicator {}
// Constants: UPPER_SNAKE_CASE
const MAX_CANDLES = 10000
const DEFAULT_TIMEFRAME = '1h'
// Private members: prefix with underscore
class Chart {
constructor() {
this._privateData = []
}
_privateMethod() {}
}
// Boolean variables: use is/has/should prefix
const isVisible = true
const hasData = false
const shouldUpdate = true
```
--------------------------------
### Initialize and Start Dialogue in Tradex Chart
Source: https://github.com/tradex-app/tradex-chart/blob/master/docs/reference/widgets/index.html
Demonstrates how to instantiate and start a Dialogue widget using a configuration object. The `insert` method creates the dialogue, and `start` initializes it.
```javascript
const config = {dragBar: true, closeIcon: true, title: "My Dialogue", content: "
This is the dialogue content.
", position: {x: 100, y: 100}, styles: {window: {background: "#f0f0f0"}}};
const dialogue = chart.WidgetsG.insert("Dialogue", config);
dialogue.start();
```
--------------------------------
### API Examples
Source: https://github.com/tradex-app/tradex-chart/blob/master/src/docs/dist2/api/real-time-websocket/index.html
Links to examples demonstrating various API functionalities within the TradeX chart.
```APIDOC
## API Examples Reference
### Description
This section provides links to various examples showcasing how to use the TradeX chart API for different functionalities.
### Method
N/A
### Endpoint
N/A
### Parameters
N/A
### Request Example
N/A
### Response
N/A
**Examples:**
- [Custom Drawing Tools API](/TradeX-chart/api/custom-drawing-tools/)
- [Custom Theme Builder API](/TradeX-chart/api/custom-theme-builder/)
- [Export Chart Image API](/TradeX-chart/api/export-chart-image/)
- [Indicator Alerts API](/TradeX-chart/api/indicator-alerts/)
- [Mobile Responsive API](/TradeX-chart/api/mobile-responsive/)
- [Multi-Chart Sync API](/TradeX-chart/api/multi-chart-sync/)
```
--------------------------------
### Check Git Version
Source: https://github.com/tradex-app/tradex-chart/blob/master/docs/guides/development/local-setup/index.html
Confirms that Git is installed and accessible in your system's PATH. Git is essential for version control operations like cloning, committing, and managing branches.
```shell
git --version
```
--------------------------------
### Create Astro Starlight Project
Source: https://github.com/tradex-app/tradex-chart/blob/master/src/docs/README.md
This command initiates the creation of a new Astro project using the Starlight template. It requires Node.js and npm to be installed. The command will prompt for project details and set up the basic file structure.
```bash
npm create astro@latest -- --template starlight
```
--------------------------------
### TradeX Chart Reference Guides
Source: https://github.com/tradex-app/tradex-chart/blob/master/docs/api/core-old/index.html
This section provides access to reference materials for TradeX Chart, including introductions, getting started guides, configuration details, and explanations of various chart components.
```APIDOC
## TradeX Chart Reference Guides
This section contains comprehensive reference materials for understanding and utilizing the TradeX Chart effectively.
### General Reference
- **/TradeX-chart/reference/**: General introduction to the reference documentation.
- **/TradeX-chart/reference/00_introduction/**: Detailed introduction to TradeX Chart.
- **/TradeX-chart/reference/01_getting_started/**: Guide to get started with TradeX Chart.
- **/TradeX-chart/reference/02_configuration/**: Information on chart configuration options.
- **/TradeX-chart/reference/glossary/**: Glossary of terms used in TradeX Chart.
- **/TradeX-chart/reference/architecture/**: Explanation of the TradeX Chart architecture.
### Component and Feature References
- **/TradeX-chart/reference/annotations/**: Documentation on chart annotations.
- **/TradeX-chart/reference/api-examples/**: Examples of using the TradeX Chart API.
- **/TradeX-chart/reference/canvas_extension_layers/**: Details on canvas extension layers.
- **/TradeX-chart/reference/canvas_methods/**: Reference for canvas-related methods.
- **/TradeX-chart/reference/datasource/**: Information on data sources for the chart.
- **/TradeX-chart/reference/events/**: Documentation on chart events.
- **/TradeX-chart/reference/hit_detection/**: Explanation of hit detection mechanisms.
- **/TradeX-chart/reference/indicators/**: General information about indicators.
- **/TradeX-chart/reference/indicators_custom/**: Guide to custom indicators.
- **/TradeX-chart/reference/indicators_default/**: Documentation on default indicators.
- **/TradeX-chart/reference/indicators_talib/**: Information on TA-Lib functions integration.
- **/TradeX-chart/reference/legends/**: Documentation on chart legends.
- **/TradeX-chart/reference/overlays/**: General information about chart overlays.
- **/TradeX-chart/reference/overlays_custom/**: Guide to custom overlays.
- **/TradeX-chart/reference/overlays_news_events/**: Documentation on overlaying news events.
- **/TradeX-chart/reference/overlays_trades/**: Information on overlaying trade data.
- **/TradeX-chart/reference/range/**: Details on managing the chart's range.
- **/TradeX-chart/reference/state/**: Documentation on chart state management.
- **/TradeX-chart/reference/state_machine/**: Explanation of the chart's state machine.
- **/TradeX-chart/reference/streaming_price_data/**: Guide to streaming price data to the chart.
- **/TradeX-chart/reference/themes/**: Documentation on chart themes.
- **/TradeX-chart/reference/web_workers/**: Information on using web workers with the chart.
- **/TradeX-chart/reference/widgets/**: Documentation on available chart widgets.
### Other References
- **/TradeX-chart/reference/example/**: General example reference.
- **/TradeX-chart/reference/changelog/**: Changelog for TradeX Chart.
```
--------------------------------
### Astro Project Structure Overview
Source: https://github.com/tradex-app/tradex-chart/blob/master/src/docs/README.md
An overview of the standard file and folder structure for an Astro project utilizing Starlight. Key directories include `public/` for static assets, `src/content/docs/` for Markdown/MDX documentation files, and configuration files like `astro.config.mjs`.
```bash
.
├── public/
├── src/
│ ├── assets/
│ ├── content/
│ │ ├── docs/
│ │ └── config.ts
│ └── env.d.ts
├── astro.config.mjs
├── package.json
└── tsconfig.json
```
--------------------------------
### Install Canvas Module Dependencies
Source: https://github.com/tradex-app/tradex-chart/blob/master/docs/guides/development/local-setup/index.html
Installs necessary dependencies for the canvas module on Ubuntu/Debian and macOS systems. These dependencies are crucial for the canvas module to compile and function correctly. After installing these, the 'npm install canvas' command should be run.
```shell
# On Ubuntu/Debian
sudo apt-get install build-essential libcairo2-dev libpango1.0-dev libjpeg-dev libgif-dev librsvg2-dev
# On macOS
brew install pkg-config cairo pango libpng jpeg giflib librsvg
# Then reinstall
npm install canvas
```
--------------------------------
### Start Tradex Chart Instance
Source: https://github.com/tradex-app/tradex-chart/blob/master/docs/reference/02_configuration/index.html
Initializes and starts a Tradex Chart instance with a provided configuration object after the chart has been mounted to the DOM. This is the primary method for rendering the chart.
```javascript
import { Chart } from 'tradex-chart'
// After the chart has mounted on the DOM,
// provide it with a configuration object
chart.start(config)
```
--------------------------------
### Indicator Visibility
Source: https://github.com/tradex-app/tradex-chart/blob/master/src/docs/src/content/docs/reference/api-examples.md
Set or get the visibility status of an indicator.
```APIDOC
## Set/Get Indicator Visibility
### Description
Sets or gets the visibility status of an indicator. The method accepts a boolean to set the indicator visibility and also returns a boolean of the current state.
### Method
`indicatorInstance.visible(visibility: boolean): boolean`
### Endpoint
`indicatorInstance` (obtained via `chartInstance.ChartPanes.get(paneId).indicators[indicatorId].instance`)
### Parameters
#### Path Parameters
None
#### Query Parameters
None
#### Request Body
None
### Request Example
```javascript
// Get current indicator visibility
const isVisible = chart1.ChartPanes.get("TradeX_test-RSI__20_3").indicators["TradeX_test-RSI__20_3-RSI_5"].instance.visible()
// Set indicator visibility to not visible (false)
chart1.ChartPanes.get("TradeX_test-RSI__20_3").indicators["TradeX_test-RSI__20_3-RSI_5"].instance.visible(false)
// Set indicator visibility to visible (true)
chart1.ChartPanes.get("TradeX_test-RSI__20_3").indicators["TradeX_test-RSI__20_3-RSI_5"].instance.visible(true)
```
### Response
#### Success Response (boolean)
Returns `true` if the indicator is visible, `false` otherwise.
#### Response Example
```json
true
```
```json
false
```
```
--------------------------------
### Configuration Example: Adding Optional Overlays
Source: https://github.com/tradex-app/tradex-chart/blob/master/docs/reference/overlays/index.html
Demonstrates how to enable optional overlays like Scale Price Line, Chart High Low, and Chart Watermark through chart configuration. It shows the specific keys and values used in the configuration object.
```javascript
{
// ... other configuration options
"stream": {},
"hightLow": true,
"watermark": { "text": "text goes here" }
}
```
--------------------------------
### Create and Start DataSource
Source: https://github.com/tradex-app/tradex-chart/blob/master/docs/reference/datasource/index.html
Demonstrates how to create a DataSource instance with custom configuration, including a data source with a range limit past function, and then start real-time data streaming.
```javascript
import DataSource from './dataSource.js';
// Create a data source
const config = {
symbol: 'BTC/USDT',
timeFrameInit: 3600000, // 1 hour
source: {
name: 'binance',
rangeLimitPast: async (event, symbol, tf, timestamp) => {
// Fetch historical data
return await fetchHistoricalData(symbol, tf, timestamp);
}
}
};
const dataSource = DataSource.create(config, chartState);
// Start real-time data
dataSource.startTickerHistory({
symbol: 'BTC/USDT',
tf: 3600000,
rangeLimitPast: fetchHistoricalData,
start: startTickerStream,
stop: stopTickerStream
});
```
--------------------------------
### Create Basic TradeX Chart Instance
Source: https://context7.com/tradex-app/tradex-chart/llms.txt
Demonstrates how to create and mount a basic TradeX chart instance using minimal configuration. It requires a DOM container, configuration object including title and TALib reference, and optional OHLCV price data. The code imports the Chart class and TALib, defines sample price data and configuration, then creates and initializes the chart element.
```javascript
import { Chart } from 'tradex-chart';
import * as talib from 'talib-web';
// Minimal OHLCV price data: [timestamp, open, high, low, close, volume]
const state = {
ohlcv: [
[1543579200000, 4035.6, 4072.78, 3965.0, 4055.6, 2157.50],
[1543582800000, 4055.6, 4100.0, 4035.0, 4059.17, 1660.61],
[1543586400000, 4059.1, 4076.6, 4014.1, 4060.0, 1070.09],
[1543590000000, 4060.5, 4060.5, 3987.2, 4049.2, 1530.46],
[1543593600000, 4049.2, 4092.7, 4035.0, 4089.66, 922.84]
]
};
const config = {
id: "myChart",
title: "BTC/USDT",
symbol: "btcusdt",
width: 1000,
height: 600,
timeFrame: "1h",
talib: talib,
wasm: `${window.location.origin}/talib.wasm`,
state: state
};
// Create and mount the chart
const container = document.getElementById('chartContainer');
const chart = document.createElement('tradex-chart');
container.appendChild(chart);
chart.start(config);
// Access chart properties after initialization
console.log('Chart ID:', chart.ID);
console.log('Time Frame:', chart.timeFrameStr);
console.log('Price Data Length:', chart.state.data.chart.data.length);
```
--------------------------------
### Install Canvas Dependencies on macOS
Source: https://github.com/tradex-app/tradex-chart/blob/master/src/docs/src/content/docs/guides/development/local-setup.md
These bash commands install the necessary system dependencies for the 'canvas' module on macOS using Homebrew. This is a prerequisite for using the canvas module in projects.
```bash
# On macOS
brew install pkg-config cairo pango libpng jpeg giflib librsvg
```
--------------------------------
### Install Canvas Dependencies on Ubuntu/Debian
Source: https://github.com/tradex-app/tradex-chart/blob/master/src/docs/src/content/docs/guides/development/local-setup.md
These bash commands install the necessary system dependencies for the 'canvas' module on Ubuntu or Debian-based Linux systems. This is often required for projects that use canvas for image manipulation or testing.
```bash
# On Ubuntu/Debian
sudo apt-get install build-essential libcairo2-dev libpango1.0-dev libjpeg-dev libgif-dev librsvg2-dev
```
--------------------------------
### Markdown Documentation Example
Source: https://github.com/tradex-app/tradex-chart/blob/master/src/docs/src/content/docs/guides/contributing.md
Shows an example of Markdown documentation structure, including frontmatter for title and description, headings, and code blocks. Demonstrates how to embed JavaScript code snippets within documentation to illustrate usage.
```markdown
---
title: Adding Indicators
description: Learn how to add technical indicators to your chart
---
# Adding Indicators
Technical indicators help analyze price movements.
## Basic Usage
```javascript
// Add an indicator
chart.addIndicator('RSI', { period: 14 })
```
## Available Indicators
- **RSI** - Relative Strength Index
- **MACD** - Moving Average Convergence Divergence
- **EMA** - Exponential Moving Average
See [Indicators Reference](../reference/indicators) for the complete list.
```
--------------------------------
### Create TradeX Chart element in HTML
Source: https://github.com/tradex-app/tradex-chart/blob/master/src/docs/src/content/docs/reference/01_getting_started.md
Use TradeX Chart as a custom HTML element directly within your HTML structure.
```html
```
--------------------------------
### Get Historical Data
Source: https://github.com/tradex-app/tradex-chart/blob/master/src/docs/src/content/docs/guides/backend/graphql-integration.md
Retrieves historical OHLCV data for a given symbol within a specified start and end timestamp range.
```APIDOC
## GET /tradex-app/tradex-chart/historical
### Description
Fetches historical OHLCV data for a specific trading symbol between a start and end timestamp.
### Method
GET
### Endpoint
/tradex-app/tradex-chart/historical
### Parameters
#### Query Parameters
- **symbol** (String!) - Required - The trading symbol (e.g., 'BTCUSDT').
- **start** (Int!) - Required - The start timestamp (Unix epoch time).
- **end** (Int!) - Required - The end timestamp (Unix epoch time).
### Request Body
This endpoint does not require a request body, parameters are passed as query parameters.
### Request Example
```javascript
// Example usage with a GraphQL client
// client.query({
// query: gql`
// fragment CandleFields on Candle {
// timestamp
// open
// high
// low
// close
// volume
// }
// query GetHistorical($symbol: String!, $start: Int!, $end: Int!) {
// historical(symbol: $symbol, start: $start, end: $end) {
// ...CandleFields
// }
// }
// `,
// variables: { symbol: 'BTCUSDT', start: 1678838400, end: 1678924800 }
// })
```
### Response
#### Success Response (200)
- **historical** (Array) - An array of historical OHLCV data points.
- **timestamp** (Int) - The timestamp of the candle.
- **open** (Float) - The opening price.
- **high** (Float) - The highest price.
- **low** (Float) - The lowest price.
- **close** (Float) - The closing price.
- **volume** (Float) - The trading volume.
#### Response Example
```json
{
"data": {
"historical": [
{ "timestamp": 1678838400, "open": 23000, "high": 23500, "low": 22800, "close": 23200, "volume": 1500 },
{ "timestamp": 1678842000, "open": 23200, "high": 23400, "low": 23000, "close": 23100, "volume": 1300 },
{ "timestamp": 1678845600, "open": 23100, "high": 23300, "low": 23050, "close": 23250, "volume": 1400 }
]
}
}
```
```
--------------------------------
### Get Chart Version
Source: https://github.com/tradex-app/tradex-chart/blob/master/docs/reference/api-examples/index.html
Retrieves the current version number of the TradeX-chart. This is a simple property access and has no inputs or outputs other than the version string.
```javascript
chart0.version
// 0.139.8
```
--------------------------------
### Running Parallel and Incremental Builds
Source: https://github.com/tradex-app/tradex-chart/blob/master/docs/guides/development/build-process/index.html
Examples of commands for optimizing build performance. The first shows how to run multiple build targets in parallel using shell commands. The second highlights the concept of incremental builds, focusing on rebuilding only changed files and using watch mode for development.
```bash
# Build multiple targets in parallel
npm run build:es & npm run build:umd & wait
```
--------------------------------
### JavaScript File Structure Example
Source: https://github.com/tradex-app/tradex-chart/blob/master/docs/guides/development/contributing-code/index.html
An example illustrating the recommended file structure for JavaScript modules, emphasizing the order of imports, constants, class definitions, and helper functions.
```javascript
// 1. Imports
import { Indicator } from './indicator.js'
import { calculateSMA } from '../utils/math.js'
// 2. Constants
const DEFAULT_PERIOD = 14
const DEFAULT_COLOR = '#2196F3'
// 3. Class definition
export class RSI extends Indicator {
constructor(target, xAxis, yAxis, theme, parent, params) {
super(target, xAxis, yAxis, theme, parent, params)
this.init()
}
// Methods...
}
// 4. Helper functions
function calculateRSI(data, period) {
// Implementation
}
```
--------------------------------
### Time-To-Live (TTL) Strategy Example (JavaScript)
Source: https://github.com/tradex-app/tradex-chart/blob/master/docs/guides/backend/data-caching-strategies/index.html
Defines a mapping of timeframes to their corresponding Time-To-Live (TTL) values in milliseconds, guiding cache expiration.
```javascript
const ttlStrategy = {
'1m': 60000,
'5m': 300000,
'1h': 3600000,
'1d': 86400000
}
```
--------------------------------
### Initializing the State Machine
Source: https://github.com/tradex-app/tradex-chart/blob/master/src/docs/src/content/docs/reference/state_machine.md
Shows how to instantiate the StateMachine class. It requires a configuration object and a context object. The context must include a reference to the chart instance as 'context.core' for event handling.
```javascript
let stateMachine = new StateMachine(config, context)
context.core = chart
```
--------------------------------
### Get Chart ID
Source: https://github.com/tradex-app/tradex-chart/blob/master/docs/reference/api-examples/index.html
Retrieves the unique identifier for the chart instance. If no ID was provided during chart configuration, one is automatically generated. This is a read-only property.
```javascript
chart0.id
// "TX_lixo8d6m_cy8_0"
```
--------------------------------
### Check npm Version
Source: https://github.com/tradex-app/tradex-chart/blob/master/docs/guides/development/local-setup/index.html
Verifies the installed npm version, which is bundled with Node.js and required for managing project dependencies. Ensure it meets the recommended v9.x or higher.
```shell
npm --version
```
--------------------------------
### Build Documentation Locally
Source: https://github.com/tradex-app/tradex-chart/blob/master/README.md
This shell command sequence outlines how to clone the TradeX-chart repository, navigate to the documentation directory, and build the documentation locally. This allows for offline access and development of documentation content.
```shell
git clone https://github.com/tradex-app/TradeX-chart
cd ./tradex-chart/src/docs
npm run build
```
--------------------------------
### Check Node.js Version
Source: https://github.com/tradex-app/tradex-chart/blob/master/docs/guides/development/local-setup/index.html
Verifies if the installed Node.js version meets the minimum requirement of v18.0.0. This is crucial for compatibility with the project's dependencies and build tools.
```shell
node --version
```
--------------------------------
### Complete Tradex Chart Initialization Example (JavaScript)
Source: https://github.com/tradex-app/tradex-chart/blob/master/src/docs/src/content/docs/guides/backend/rest-api-integration.md
A comprehensive example demonstrating the initialization of a Tradex chart. It includes fetching initial OHLCV data, creating the chart element, starting the chart with initial data, and setting up a data manager for features like infinite scrolling. Error handling and data formatting are also included.
```javascript
import { Chart } from 'tradex-chart'
class TradingChartApp {
constructor(containerId, apiConfig) {
this.container = document.getElementById(containerId)
this.apiConfig = apiConfig
this.chart = null
this.dataManager = null
}
async initialize(symbol, timeframe) {
try {
// Fetch initial data
const data = await this.fetchData(symbol, timeframe, 500)
// Create chart
this.chart = document.createElement('tradex-chart')
this.container.appendChild(this.chart)
this.chart.start({
title: symbol,
symbol: symbol,
state: {
ohlcv: data
}
})
// Setup data manager for infinite scroll
this.dataManager = new ChartDataManager(
this.chart,
symbol,
timeframe
)
} catch (error) {
console.error('Failed to initialize chart:', error)
this.showError(error.message)
}
}
async fetchData(symbol, timeframe, limit) {
const response = await fetch(
`${this.apiConfig.baseURL}/ohlcv?` +
`symbol=${symbol}&timeframe=${timeframe}&limit=${limit}`,
{
headers: {
'Authorization': `Bearer ${this.apiConfig.apiKey}`
}
}
)
if (!response.ok) {
throw new Error(`API error: ${response.status}`)
}
const data = await response.json()
return this.formatData(data)
}
formatData(data) {
return data.map(candle => [
candle.timestamp,
candle.open,
candle.high,
candle.low,
candle.close,
candle.volume
])
}
showError(message) {
const errorDiv = document.createElement('div')
errorDiv.className = 'error-message'
errorDiv.textContent = message
this.container.appendChild(errorDiv)
}
}
// Usage
const app = new TradingChartApp('chart-container', {
baseURL: 'https://api.example.com/v1',
apiKey: 'your-api-key'
})
app.initialize('BTCUSDT', '1h')
```
--------------------------------
### Basic Chart Initialization
Source: https://github.com/tradex-app/tradex-chart/blob/master/docs/reference/datasource/index.html
Demonstrates the basic setup for initializing the TradeXChart and creating a DataSource instance with essential configuration.
```javascript
import DataSource from './dataSource.js';
import TradeXChart from './core.js';
const chart = new TradeXChart(container, config);
const state = chart.state;
const dataSource = DataSource.create({
symbol: 'BTC/USDT',
timeFrameInit: '1h',
source: {
name: 'myExchange'
}
}, state);
```
--------------------------------
### Get and Set Indicator Visibility
Source: https://github.com/tradex-app/tradex-chart/blob/master/src/docs/src/content/docs/reference/api-examples.md
Manages the visibility of an indicator. Accepts a boolean to set the visibility and also returns the current boolean state. 'true' means visible, 'false' means not visible.
```javascript
const visible = chart1.ChartPanes.get("TradeX_test-RSI__20_3").indicators["TradeX_test-RSI__20_3-RSI_5"].instance.visible()
// set indicator visibility to not visible (false)
chart1.ChartPanes.get("TradeX_test-RSI__20_3").indicators["TradeX_test-RSI__20_3-RSI_5"].instance.visible(false)
```
--------------------------------
### Get Historical Data
Source: https://github.com/tradex-app/tradex-chart/blob/master/src/docs/dist2/guides/backend/graphql-integration/index.html
Retrieves historical candle data for a specified trading symbol within a given start and end timestamp range. Leverages fragments for efficient candle data retrieval.
```APIDOC
## GET /historical/{symbol}?start={start}&end={end}
### Description
Fetches historical OHLCV candle data for a given symbol and a specified time range.
### Method
GET
### Endpoint
`/historical/{symbol}`
### Parameters
#### Path Parameters
- **symbol** (String!) - Required - The trading symbol (e.g., 'BTCUSDT').
#### Query Parameters
- **start** (Int!) - Required - The starting timestamp (Unix milliseconds).
- **end** (Int!) - Required - The ending timestamp (Unix milliseconds).
#### Request Body
This endpoint does not accept a request body.
### Request Example
```javascript
// Assuming 'client' is a GraphQL client instance
const CANDLE_FRAGMENT = gql`
fragment CandleFields on Candle {
timestamp
open
high
low
close
volume
}
`;
const GET_HISTORICAL = gql`
${CANDLE_FRAGMENT}
query GetHistorical($symbol: String!, $start: Int!, $end: Int!) {
historical(symbol: $symbol, start: $start, end: $end) {
...CandleFields
}
}
`;
async function fetchHistoricalData(symbol, start, end) {
const { data } = await client.query({
query: GET_HISTORICAL,
variables: { symbol, start, end }
});
return data.historical;
}
// Example: Fetch data for BTCUSDT from two days ago until now
const twoDaysAgo = Date.now() - 2 * 24 * 60 * 60 * 1000;
const now = Date.now();
fetchHistoricalData('BTCUSDT', twoDaysAgo, now);
```
### Response
#### Success Response (200)
- **historical** (Array