Skip to content

Commit 64d313f

Browse files
alaa-eddinealaa-eddine
committed
documentation update
1 parent 0faae12 commit 64d313f

File tree

5 files changed

+3792
-351
lines changed

5 files changed

+3792
-351
lines changed

‎docs/indicators.md‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,13 +10,18 @@ has_children: false
1010

1111
These demo indicators showcase the capabilities of PineTS for creating interactive trading indicators.
1212

13-
## WillVixFix Indicator
13+
## Simple Cross Signal (uses native PineScript)
14+
15+
This example shows how to load and run a native PineScript code using PineTS and QFChart
16+
[View Demo](indicators/cross-signal/index.html){: .btn .btn-primary }
17+
18+
## WillVixFix Indicator (uses PineTS syntax)
1419

1520
WillVixFix is a volatility-based indicator that helps identify potential reversal points in the market.
1621

1722
[View Demo](indicators/willvixfix/index.html){: .btn .btn-primary }
1823

19-
## Squeeze Momentum Indicator
24+
## Squeeze Momentum Indicator (uses PineTS syntax)
2025

2126
The Squeeze Momentum indicator identifies when the market is "squeezing" (low volatility) and about to break out with increased momentum.
2227

‎docs/indicators/cross-signal/data/cross-signal.pine‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
//@version=6
2+
indicator("EMA Crossover Signals", overlay=true)
3+
4+
// Input parameters
5+
fastLength = input.int(9, "Fast EMA Length", minval=1)
6+
slowLength = input.int(13, "Slow EMA Length", minval=1)
7+
8+
// Calculate EMAs
9+
fastEMA = ta.ema(close, fastLength)
10+
slowEMA = ta.ema(close, slowLength)
11+
12+
// Plot EMAs
13+
plot(fastEMA, "Fast EMA", color=color.blue, linewidth=2)
14+
plot(slowEMA, "Slow EMA", color=color.red, linewidth=2)
15+
16+
// Detect crossovers
17+
bullishCross = ta.crossover(fastEMA, slowEMA)
18+
bearishCross = ta.crossunder(fastEMA, slowEMA)
19+
20+
// Plot buy signals (bullish cross)
21+
plotshape(bullishCross, "Buy Signal", shape.arrowup, location.belowbar,
22+
color=color.green, size=size.normal, text="Buy", textcolor=color.green)
23+
// Plot sell signals (bearish cross)
24+
plotshape(bearishCross, "Sell Signal", shape.arrowdown, location.abovebar,
25+
color=color.red, size=size.small, text="Sell", textcolor=color.red)
26+

‎docs/indicators/cross-signal/index.html‎

Lines changed: 130 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,130 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>QFChart - PineScript Demo</title>
7+
8+
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
9+
<!-- QFChart Library -->
10+
<script src="../js/qfchart.min.browser.js"></script>
11+
12+
<!-- Dependencies for Data Loading -->
13+
<script src="../js/pinets.dev.browser.js"></script>
14+
<link rel="stylesheet" href="styles.css" />
15+
</head>
16+
17+
<body>
18+
<nav>
19+
<a href="https://github.com/QuantForgeOrg/QFChart" target="_blank">
20+
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
21+
<path
22+
d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"
23+
/>
24+
</svg>
25+
QFChart on GitHub
26+
</a>
27+
</nav>
28+
<div id="container">
29+
<h1>PineScript Demo</h1>
30+
31+
<p>
32+
This demo loads and execute native pine script from this file
33+
<a href="./data/cross-signal.pine" target="_blank">cross-signal.pine</a>, then uses
34+
<a href="https://github.com/QuantForgeOrg/PineTS" target="_blank">PineTS</a> to execute it and get the results.<br />
35+
The results are then used by <a href="https://github.com/QuantForgeOrg/QFChart" target="_blank">QFChart</a> to render the chart.
36+
</p>
37+
<hr />
38+
<div id="main-chart"><center>Loading...</center></div>
39+
</div>
40+
41+
<script>
42+
// Data Loading Helper (Simulating what was in chart.js)
43+
const DATA_LENGTH = 500;
44+
async function getIndicatorData(inficatorCode, tickerId, timeframe = '1w', periods = 500, stime, etime) {
45+
const pineTS = new PineTS(PineTS.Provider.Binance, tickerId, timeframe, periods, stime, etime);
46+
const { result, plots, marketData } = await pineTS.run(inficatorCode);
47+
return { result, plots, marketData };
48+
}
49+
50+
// Load Pine Script source code from file
51+
async function loadPineScript(url) {
52+
const response = await fetch(url);
53+
return await response.text();
54+
}
55+
56+
// Initialize QFChart
57+
document.addEventListener('DOMContentLoaded', async () => {
58+
// Load the Pine Script source code
59+
const crossSignalSource = await loadPineScript('./data/cross-signal.pine');
60+
61+
const promises = [getIndicatorData(crossSignalSource, 'BTCUSDT', 'W', DATA_LENGTH)];
62+
const results = await Promise.all(promises);
63+
64+
const { marketData, plots: crossSignalPlots } = results[0];
65+
66+
// Map Market Data to QFChart OHLCV format
67+
// marketData is array of objects: { openTime, open, high, low, close, volume }
68+
const ohlcvData = marketData.map((k) => ({
69+
time: k.openTime,
70+
open: k.open,
71+
high: k.high,
72+
low: k.low,
73+
close: k.close,
74+
volume: k.volume,
75+
}));
76+
77+
const isMobileDevice = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
78+
79+
// Initialize Chart
80+
const chartContainer = document.getElementById('main-chart');
81+
window.chart = new QFChart.QFChart(chartContainer, {
82+
title: 'BTC/USDT', // Custom title
83+
height: '600px',
84+
padding: 0.2,
85+
databox: {
86+
position: isMobileDevice ? 'floating' : 'right',
87+
},
88+
dataZoom: {
89+
visible: true,
90+
position: 'top',
91+
height: 6,
92+
start: 50,
93+
end: 100,
94+
},
95+
layout: {
96+
mainPaneHeight: '60%',
97+
gap: 5,
98+
},
99+
controls: {
100+
collapse: true,
101+
maximize: true,
102+
fullscreen: true,
103+
},
104+
});
105+
106+
// Set Market Data
107+
chart.setMarketData(ohlcvData);
108+
109+
// Set Indicators
110+
111+
chart.addIndicator('Cross Signal', crossSignalPlots, {
112+
isOverlay: true,
113+
titleColor: '#2962FF',
114+
});
115+
116+
// Register Measure Tool Plugin
117+
const measureTool = new QFChart.MeasureTool();
118+
chart.registerPlugin(measureTool);
119+
120+
// Register Line Tool Plugin
121+
const lineTool = new QFChart.LineTool();
122+
chart.registerPlugin(lineTool);
123+
124+
// Register Fibonacci Tool Plugin
125+
const fibTool = new QFChart.FibonacciTool();
126+
chart.registerPlugin(fibTool);
127+
});
128+
</script>
129+
</body>
130+
</html>

0 commit comments

Comments
 (0)