|
| 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 | + <p> |
| 31 | + This demo uses the |
| 32 | + <a href="https://github.com/QuantForgeOrg/PineTS" target="_blank">PineTS</a> library to load the market data and calculate multiple |
| 33 | + indicators. |
| 34 | + </p> |
| 35 | + <hr /> |
| 36 | + <div id="main-chart"><center>Loading...</center></div> |
| 37 | + </div> |
| 38 | + |
| 39 | + <script src="../js/indicators/macd.js"></script> |
| 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[1]; |
| 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: '700px', |
| 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