Spaces:

alterzick
/

tradingview-v1

Running

App Files Files Community

alterzick commited on Dec 28, 2025

Commit

cccdade

verified ·

1 Parent(s): 6d31845

Add 2 files

Browse files

Files changed (1) hide show

index.html +30 -22

index.html CHANGED Viewed

@@ -3,48 +3,56 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Aplikasi Chart Mirip TradingView (Lightweight Charts)</title>
     <script src="https://unpkg.com/lightweight-charts/dist/lightweight-charts.standalone.production.js"></script>
     <style>
-        body { margin: 0; font-family: Arial, sans-serif; background: #f0f0f0; }
-        h1 { text-align: center; padding: 20px; background: #1e222d; color: white; margin: 0; }
-        #chart { width: 100%; height: calc(100vh - 60px); }
     </style>
 </head>
 <body>
-    <h1>Chart Candlestick Mirip TradingView</h1>
     <div id="chart"></div>
     <script>
         const chart = LightweightCharts.createChart(document.getElementById('chart'), {
-            layout: { background: { color: '#1e222d' }, textColor: '#d1d4dc' },
-            grid: { vertLines: { color: '#2b2b2b' }, horzLines: { color: '#2b2b2b' } },
             crosshair: { mode: LightweightCharts.CrosshairMode.Normal },
-            rightPriceScale: { borderColor: '#2b2b2b' },
-            timeScale: { borderColor: '#2b2b2b' },
         });
         const candlestickSeries = chart.addCandlestickSeries({
-            upColor: '#26a69a', downColor: '#ef5350',
-            borderVisible: false, wickUpColor: '#26a69a', wickDownColor: '#ef5350',
         });
-        // Data sampel (dapat diganti dengan fetch dari API seperti Alpha Vantage atau Polygon)
         const data = [
-            { time: '2025-01-01', open: 100, high: 110, low: 95, close: 105 },
-            { time: '2025-01-02', open: 105, high: 115, low: 100, close: 112 },
-            { time: '2025-01-03', open: 112, high: 120, low: 108, close: 118 },
-            { time: '2025-01-04', open: 118, high: 125, low: 115, close: 120 },
-            { time: '2025-01-05', open: 120, high: 130, low: 118, close: 128 },
-            { time: '2025-01-06', open: 128, high: 135, low: 125, close: 132 },
-            { time: '2025-01-07', open: 132, high: 140, low: 130, close: 138 },
-            // Tambahkan lebih banyak data untuk tampilan lengkap
         ];
         candlestickSeries.setData(data);
-        // Responsif saat resize window
-        window.addEventListener('resize', () => chart.applyOptions({ width: window.innerWidth, height: window.innerHeight - 60 }));
     </script>
 <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-qwensite.hf.space/logo.svg" alt="qwensite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-qwensite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >QwenSite</a> - 🧬 <a href="https://enzostvs-qwensite.hf.space?remix=alterzick/tradingview-v1" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
 </html>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Chart Mirip TradingView</title>
     <script src="https://unpkg.com/lightweight-charts/dist/lightweight-charts.standalone.production.js"></script>
     <style>
+        body { margin: 0; padding: 20px; background: #f0f0f0; font-family: Arial, sans-serif; }
+        h1 { text-align: center; color: #333; }
+        #chart { width: 100%; height: 80vh; min-height: 600px; }
     </style>
 </head>
 <body>
+    <h1>Chart Candlestick Interaktif (Lightweight Charts)</h1>
     <div id="chart"></div>
     <script>
         const chart = LightweightCharts.createChart(document.getElementById('chart'), {
+            width: document.getElementById('chart').clientWidth,
+            height: 600,
+            layout: { background: { color: '#ffffff' }, textColor: '#333' },
+            grid: { vertLines: { color: '#e0e0e0' }, horzLines: { color: '#e0e0e0' } },
             crosshair: { mode: LightweightCharts.CrosshairMode.Normal },
+            rightPriceScale: { borderColor: '#cccccc' },
+            timeScale: { borderColor: '#cccccc' },
         });
         const candlestickSeries = chart.addCandlestickSeries({
+            upColor: '#26a69a',
+            downColor: '#ef5350',
+            borderVisible: false,
+            wickUpColor: '#26a69a',
+            wickDownColor: '#ef5350',
         });
+        // Data sampel (time dalam format 'YYYY-MM-DD', open/high/low/close)
         const data = [
+            { time: '2025-12-01', open: 175, high: 180, low: 170, close: 178 },
+            { time: '2025-12-02', open: 178, high: 185, low: 175, close: 182 },
+            { time: '2025-12-03', open: 182, high: 190, low: 180, close: 188 },
+            { time: '2025-12-04', open: 188, high: 195, low: 185, close: 192 },
+            { time: '2025-12-05', open: 192, high: 200, low: 190, close: 198 },
+            { time: '2025-12-06', open: 198, high: 205, low: 195, close: 202 },
+            { time: '2025-12-07', open: 202, high: 210, low: 200, close: 208 },
+            { time: '2025-12-08', open: 208, high: 215, low: 205, close: 212 },
+            // Tambahkan data lebih banyak sesuai kebutuhan
         ];
         candlestickSeries.setData(data);
+        // Responsif saat resize
+        window.addEventListener('resize', () => {
+            chart.applyOptions({ width: document.getElementById('chart').clientWidth });
+        });
     </script>
 <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-qwensite.hf.space/logo.svg" alt="qwensite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-qwensite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >QwenSite</a> - 🧬 <a href="https://enzostvs-qwensite.hf.space?remix=alterzick/tradingview-v1" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
 </html>