QFChart - PineScript Demo

About This Demo - Native Pine Script Execution

What is Pine Script?

Pine Script is TradingView's proprietary scripting language designed for creating custom technical indicators and trading strategies. It provides a simple, intuitive syntax that allows traders to express complex mathematical calculations and conditional logic without needing extensive programming knowledge. Pine Script is widely used by millions of traders worldwide to build, test, and deploy custom trading tools.

PineTS: Pine Script Runtime for JavaScript

PineTS is a groundbreaking JavaScript/TypeScript library that brings Pine Script execution to the web.
PineTS is a runtime transpiler that executes Pine Script code directly in the browser or Node.js environment.
This demo showcases PineTS's ability to:

Load Native Pine Script - Read .pine files directly without modification
Parse and Execute - Transpile Pine Script to executable JavaScript at runtime
Generate Indicator Data - Calculate indicator values across historical market data
Visualize with QFChart - Render the results in beautiful, interactive charts

The Cross Signal Indicator

This demo executes a Cross Signal indicator written in pure Pine Script. The indicator detects when a fast moving average crosses above or below a slow moving average, generating buy and sell signals. Key features:

Configurable Parameters - Fast period (default: 9) and slow period (default: 21)
Visual Signals - Green upward triangles for buy signals, red downward triangles for sell signals
MA Plotting - Both moving averages are plotted on the chart for reference
Alert Conditions - Defines conditions for triggering alerts on crossovers

How This Demo Works

The execution flow demonstrates the full PineTS + QFChart integration:

Load Pine Script - Fetch the cross-signal.pine file via HTTP
Initialize PineTS - Create a PineTS instance with market data provider (Binance)
Execute Script - PineTS transpiles and runs the Pine Script on 500 weekly BTC/USDT candles
Extract Results - Get calculated indicator values and plot data
Initialize QFChart - Create a chart instance with the market data
Render Indicator - Add the Cross Signal plots as an overlay on the price chart

Technical Implementation

Behind the scenes, this demo showcases advanced capabilities:

Runtime Transpilation - PineTS parses Pine Script syntax into an Abstract Syntax Tree (AST), then transforms it into executable JavaScript
Scope Management - Properly handles Pine Script's unique variable scoping and series types
Built-in Functions - Implements Pine Script's ta.*, math.*, plot(), and other namespaces
Series Processing - Processes time-series data with forward storage and reverse indexing (Pine Script convention)
Plot Extraction - Converts Pine Script's plot calls into QFChart-compatible data structures

Benefits of Native Pine Script Execution

Compatibility - Use existing Pine Script indicators without rewriting them in JavaScript
Community Ecosystem - Access thousands of public Pine Script indicators from TradingView
Rapid Prototyping - Write indicators in Pine Script's concise syntax, test instantly in the browser
No Compilation - Changes to .pine files are reflected immediately (just reload the page)
Cross-Platform - Run the same Pine Script code in browser, Node.js, or mobile apps

Sample Pine Script Code

Here's a simplified version of what the Cross Signal indicator looks like:

//@version=5
indicator("Cross Signal", overlay=true)

// Input parameters
fastLength = input.int(9, "Fast MA Length")
slowLength = input.int(21, "Slow MA Length")

// Calculate moving averages
fastMA = ta.sma(close, fastLength)
slowMA = ta.sma(close, slowLength)

// Detect crossovers
bullCross = ta.crossover(fastMA, slowMA)
bearCross = ta.crossunder(fastMA, slowMA)

// Plot MAs
plot(fastMA, "Fast MA", color.blue)
plot(slowMA, "Slow MA", color.red)

// Plot signals
plotshape(bullCross, "Buy", shape.triangleup, location.belowbar, color.green, size=size.small)
plotshape(bearCross, "Sell", shape.triangledown, location.abovebar, color.red, size=size.small)

Use Cases

Indicator Development - Develop custom indicators in Pine Script, visualize with QFChart
Strategy Backtesting - Load historical data and test Pine Script strategies programmatically
Trading Platforms - Build web-based trading platforms with support for user-created Pine Script indicators
Educational Tools - Create interactive tutorials that execute and explain Pine Script concepts
Research & Analysis - Run Pine Script indicators on custom datasets or alternative data sources

Getting Started

To execute your own Pine Script files:

// Load Pine Script source
const response = await fetch('your-indicator.pine');
const pineScript = await response.text();

// Execute with PineTS
const pineTS = new PineTS(PineTS.Provider.Binance, 'BTCUSDT', '1d', 500);
const { result, plots, marketData } = await pineTS.run(pineScript);

// Visualize with QFChart
const chart = new QFChart.QFChart(container, { title: 'My Indicator' });
chart.setMarketData(marketData);
chart.addIndicator('My Indicator', plots, { isOverlay: true });

PineScript Demo