Skip to content

Commit 6ce71c1

Browse files
alaa-eddinealaa-eddine
committed
demo update
1 parent 490c361 commit 6ce71c1

File tree

2 files changed

+83
-91
lines changed

2 files changed

+83
-91
lines changed

‎docs/index.md‎

Lines changed: 5 additions & 91 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ permalink: /
2727
<a href="https://github.com/QuantForgeOrg/PineTS" target="_blank">PineTS</a> library to get the data and the indicators.
2828
</p>
2929
<hr />
30-
<div id="main-chart"><center>Loading...</center></div>
30+
<div id="main-chart"></div>
3131
</div>
3232

3333
<!-- QFChart Library (Bundled with ECharts) -->
@@ -38,94 +38,7 @@ permalink: /
3838
<script src="./js/indicators/sqzmom.js"></script>
3939
<script src="./js/indicators/macd.js"></script>
4040
<script src="./js/indicators/instit-bias.js"></script>
41-
42-
<script>
43-
// Data Loading Helper (Simulating what was in chart.js)
44-
const DATA_LENGTH = 500;
45-
async function getIndicatorData(inficatorCode, tickerId, timeframe = '1w', periods = 500, stime, etime) {
46-
const pineTS = new PineTS(PineTS.Provider.Binance, tickerId, timeframe, periods, stime, etime);
47-
const { result, plots, marketData } = await pineTS.run(inficatorCode);
48-
return { result, plots, marketData };
49-
}
50-
51-
// Initialize QFChart
52-
document.addEventListener('DOMContentLoaded', async () => {
53-
const promises = [
54-
getIndicatorData(sqzmomIndicator, 'BTCUSDT', 'W', DATA_LENGTH),
55-
getIndicatorData(macdIndicator, 'BTCUSDT', 'W', DATA_LENGTH),
56-
getIndicatorData(institBiasIndicator, 'BTCUSDT', 'W', DATA_LENGTH),
57-
];
58-
const results = await Promise.all(promises);
59-
const { marketData, plots: sqzmomPlots } = results[0];
60-
const { plots: institBiasPlots } = results[2];
61-
const { plots: macdPlots } = results[1];
62-
63-
64-
// Map Market Data to QFChart OHLCV format
65-
// marketData is array of objects: { openTime, open, high, low, close, volume }
66-
const ohlcvData = marketData.map((k) => ({
67-
time: k.openTime,
68-
open: k.open,
69-
high: k.high,
70-
low: k.low,
71-
close: k.close,
72-
volume: k.volume,
73-
}));
74-
75-
76-
// Initialize Chart
77-
const chartContainer = document.getElementById('main-chart');
78-
window.chart = new QFChart.QFChart(chartContainer, {
79-
title: 'BTC/USDT', // Custom title
80-
height: '840px',
81-
padding: 0.2,
82-
databox: {
83-
position: 'floating',
84-
},
85-
dataZoom: {
86-
visible: true,
87-
position: 'top',
88-
height: 6,
89-
start: 50,
90-
end: 100,
91-
92-
zoomLock: false,
93-
moveOnMouseMove: true,
94-
// This prevents the grab cursor
95-
preventDefaultMouseMove: false,
96-
},
97-
layout: {
98-
mainPaneHeight: '60%',
99-
gap: 5,
100-
},
101-
});
102-
103-
// Set Market Data
104-
chart.setMarketData(ohlcvData);
105-
106-
chart.addIndicator('Institutional Bias', institBiasPlots, {
107-
isOverlay: true,
108-
titleColor: '#2962FF',
109-
});
110-
111-
// Set Indicators
112-
// Group plots into one indicator
113-
chart.addIndicator('MACD', macdPlots, {
114-
isOverlay: false,
115-
height: 16,
116-
titleColor: '#ff9900',
117-
controls: { collapse: true, maximize: true },
118-
});
119-
120-
chart.addIndicator('SQZMOM', sqzmomPlots, {
121-
isOverlay: false,
122-
height: 16,
123-
controls: { collapse: true, maximize: true },
124-
});
125-
126-
127-
});
128-
</script>
41+
<script src="./js/chart.js">
12942

13043
## Installation
13144

@@ -135,13 +48,14 @@ Include the bundled script in your HTML file:
13548

13649
```html
13750
<script src="dist/qfchart.dev.browser.js"></script>
138-
```
51+
52+
````
13953
14054
### NPM (Coming Soon)
14155
14256
```bash
14357
npm install qfchart
144-
```
58+
````
14559

14660
## Quick Start
14761

‎docs/js/chart.js‎

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
// Data Loading Helper (Simulating what was in chart.js)
2+
const DATA_LENGTH = 500;
3+
async function getIndicatorData(inficatorCode, tickerId, timeframe = '1w', periods = 500, stime, etime) {
4+
const pineTS = new PineTS(PineTS.Provider.Binance, tickerId, timeframe, periods, stime, etime);
5+
const { result, plots, marketData } = await pineTS.run(inficatorCode);
6+
return { result, plots, marketData };
7+
}
8+
console.log('Getting indicator data...');
9+
const promises = [
10+
getIndicatorData(sqzmomIndicator, 'BTCUSDT', 'W', DATA_LENGTH),
11+
getIndicatorData(macdIndicator, 'BTCUSDT', 'W', DATA_LENGTH),
12+
getIndicatorData(institBiasIndicator, 'BTCUSDT', 'W', DATA_LENGTH),
13+
];
14+
const results = await Promise.all(promises);
15+
const { marketData, plots: sqzmomPlots } = results[0];
16+
const { plots: institBiasPlots } = results[2];
17+
const { plots: macdPlots } = results[1];
18+
19+
// Map Market Data to QFChart OHLCV format
20+
// marketData is array of objects: { openTime, open, high, low, close, volume }
21+
const ohlcvData = marketData.map((k) => ({
22+
time: k.openTime,
23+
open: k.open,
24+
high: k.high,
25+
low: k.low,
26+
close: k.close,
27+
volume: k.volume,
28+
}));
29+
30+
// Initialize Chart
31+
const chartContainer = document.getElementById('main-chart');
32+
window.chart = new QFChart.QFChart(chartContainer, {
33+
title: 'BTC/USDT', // Custom title
34+
height: '840px',
35+
padding: 0.2,
36+
databox: {
37+
position: 'floating',
38+
},
39+
dataZoom: {
40+
visible: true,
41+
position: 'top',
42+
height: 6,
43+
start: 50,
44+
end: 100,
45+
46+
zoomLock: false,
47+
moveOnMouseMove: true,
48+
// This prevents the grab cursor
49+
preventDefaultMouseMove: false,
50+
},
51+
layout: {
52+
mainPaneHeight: '60%',
53+
gap: 5,
54+
},
55+
});
56+
57+
// Set Market Data
58+
chart.setMarketData(ohlcvData);
59+
60+
chart.addIndicator('Institutional Bias', institBiasPlots, {
61+
isOverlay: true,
62+
titleColor: '#2962FF',
63+
});
64+
65+
// Set Indicators
66+
// Group plots into one indicator
67+
chart.addIndicator('MACD', macdPlots, {
68+
isOverlay: false,
69+
height: 16,
70+
titleColor: '#ff9900',
71+
controls: { collapse: true, maximize: true },
72+
});
73+
74+
chart.addIndicator('SQZMOM', sqzmomPlots, {
75+
isOverlay: false,
76+
height: 16,
77+
controls: { collapse: true, maximize: true },
78+
});

0 commit comments

Comments
 (0)