Elliott Wave
Trading Analysis Using Elliott Wave
Prompt
Create an Elliott Wave analysis tool for trading that will analyze charts to determine the elliott wave count.
A system prompt was added to support web rendering
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Elliott-Wave Analyzer (client-side demo)</title>
<!-- Chart.js for plotting -->
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.2/dist/chart.umd.min.js"></script>
<!-- Tiny helper for file → text -->
<script src="https://cdn.jsdelivr.net/npm/papaparse@5.4.1/papaparse.min.js"></script>
<style>
body{font-family:Arial,Helvetica,sans-serif;margin:0;padding:20px;background:#f5f7fa;}
h1{margin-top:0}
#layout{display:flex;flex-wrap:wrap;gap:20px;}
#controls{flex:1 1 250px;max-width:300px;padding:15px;background:#fff;border-radius:8px;box-shadow:0 2px 6px rgba(0,0,0,.1)}
#chart-area{flex:4 1 600px}
canvas{background:#fff;border:1px solid #ddd;border-radius:8px}
label{font-weight:bold}
input[type=number]{width:80px}
.wave-box{margin:10px 0;padding:8px;border-left:4px solid #4caf50;background:#e8f5e9;border-radius:4px;font-size:.9rem}
#msg{color:#c00;font-size:.9rem}
</style>
</head>
<body>
<h1>Elliott Wave Analysis Tool</h1>
<div id="layout">
<div id="controls">
<p>
<label>CSV price file:</label><br>
<input type="file" id="fileInput" accept=".csv">
</p>
<p>
<label>Pivot sensitivity (% move):</label><br>
<input type="number" id="pivotThresh" value="0.7" step="0.1"> %
</p>
<p>
<button id="analyzeBtn">Analyze</button>
</p>
<div id="msg"></div>
<h3>Detected Impulses</h3>
<div id="waves"></div>
<small>Educational demo only – not trading advice.</small>
</div>
<div id="chart-area"><canvas id="chart" height="400"></canvas></div>
</div>
<script>
/* ==========
FILE PARSE
========== */
let rawPrices=[]; // [{t:Date, p:Number}, ...]
let pivots=[]; // indices of pivot points in rawPrices
let impulses=[]; // [{startIdx, endIdx, wavePoints:[i0..i5], dir:'up'|'down'}]
document.getElementById('fileInput').addEventListener('change',e=>{
const file=e.target.files[0];
if(!file) return;
Papa.parse(file,{
header:false,
skipEmptyLines:true,
complete:(results)=>{
/* Expect CSV: first column date/time or index, second column price */
rawPrices=results.data.map(r=>{
const price=parseFloat(r[1]);
if(Number.isNaN(price)) return null;
return {t:r[0], p:price};
}).filter(Boolean);
document.getElementById('msg').textContent=`Loaded ${rawPrices.length} rows`;
renderChart();
}
});
});
/* ==========
CHART
========== */
let chart;
function renderChart(){
if(!rawPrices.length) return;
const ctx=document.getElementById('chart').getContext('2d');
const labels=rawPrices.map(pt=>pt.t);
const data=rawPrices.map(pt=>pt.p);
if(chart) chart.destroy();
chart=new Chart(ctx,{
type:'line',
data:{
labels:labels,
datasets:[
{label:'Price',data:data,borderColor:'#2196f3',pointRadius:0}
]
},
options:{
animation:false,
interaction:{mode:'nearest',axis:'x',intersect:false},
plugins:{
legend:{display:false}
},
scales:{
x:{display:false},
y:{title:{display:true,text:'Price'}}
}
}
});
}
/* ==========
PIVOT DETECTION
========== */
function detectPivots(thresholdPct){
pivots=[];
const n=rawPrices.length;
if(n<3) return;
const thresh=thresholdPct/100;
for(let i=1;i<n-1;i++){
const prev=rawPrices[i-1].p, cur=rawPrices[i].p, next=rawPrices[i+1].p;
const isPeak = cur>prev && cur>next && ( (cur-prev)/prev>thresh || (cur-next)/next>thresh );
const isTrough = cur<prev && cur<next && ( (prev-cur)/prev>thresh || (next-cur)/next>thresh );
if(isPeak||isTrough) pivots.push(i);
}
}
/* ==========
IMPULSE SCAN
========== */
function detectImpulses(){
impulses=[];
/* slide over consecutive 6 pivots -> 5 waves */
for(let i=0;i+5<pivots.length;i++){
const idx = pivots.slice(i,i+6); // six pivot indices
const prices = idx.map(j=>rawPrices[j].p);
// upward impulse? trough-peak-trough-peak-trough-peak
let up = prices[0]<prices[1] && prices[2]<prices[1] && prices[2]<prices[3] && prices[4]<prices[3] && prices[4]<prices[5];
// downward impulse (mirror)
let down = prices[0]>prices[1] && prices[2]>prices[1] && prices[2]>prices[3] && prices[4]>prices[3] && prices[4]>prices[5];
if(!(up||down)) continue;
// rule checks
const w1 = Math.abs(prices[1]-prices[0]);
const w3 = Math.abs(prices[3]-prices[2]);
const w5 = Math.abs(prices[5]-prices[4]);
const w2Retr = Math.abs(prices[2]-prices[1])/w1;
const w4Retr = Math.abs(prices[4]-prices[3])/w3;
if(w3<w1 || w3<w5) continue; // wave 3 not shortest
if(w2Retr>1.0 || w4Retr>1.0) continue; // wave 2/4 >100% retrace
// Optional Fib niceties
const fibOK = (w3/w1>1.3 && w3/w1<2.5);
if(!fibOK) continue;
impulses.push({
startIdx:idx[0],
endIdx:idx[5],
wavePoints:idx,
dir: up?'up':'down',
w1,w3,w5
});
}
}
/* ==========
PLOT IMPULSES
========== */
function markImpulses(){
if(!chart) return;
// strip old extra datasets
chart.data.datasets = chart.data.datasets.filter(ds=>!ds._waveMarker);
impulses.forEach((imp,i)=>{
const color = imp.dir==='up'?'#4caf50':'#f44336';
const pts = imp.wavePoints.map(j=>({x:j,y:rawPrices[j].p}));
chart.data.datasets.push({
_waveMarker:true,
type:'scatter',
pointStyle:'rectRot',
label:`Wave ${i+1}`,
data:pts,
borderColor:color,
backgroundColor:color,
pointRadius:6,
showLine:false
});
});
chart.update('none');
}
/* ==========
UI glue
========== */
document.getElementById('analyzeBtn').addEventListener('click',()=>{
if(!rawPrices.length){
alert('Load price CSV first.');
return;
}
const thresh=parseFloat(document.getElementById('pivotThresh').value)||0.7;
detectPivots(thresh);
detectImpulses();
markImpulses();
listImpulses();
});
function listImpulses(){
const box=document.getElementById('waves');
box.innerHTML='';
if(!impulses.length){
box.innerHTML='<p>No qualifying 5-wave impulses found with current sensitivity.</p>';
return;
}
impulses.forEach((imp,i)=>{
const start=rawPrices[imp.startIdx];
const end=rawPrices[imp.endIdx];
const dir=imp.dir==='up'?'Bullish':'Bearish';
const div=document.createElement('div');
div.className='wave-box';
div.innerHTML=`
<b>Impulse ${i+1} (${dir})</b><br>
${start.t} → ${end.t}<br>
Wave lengths: ${imp.w1.toFixed(2)}, ${imp.w3.toFixed(2)}, ${imp.w5.toFixed(2)}
`;
box.appendChild(div);
});
}
/* ==========
SAMPLE DATA
========== */
/* If user does not upload anything, we auto-load a small sample so the UI is not empty. */
fetch('https://cdn.jsdelivr.net/gh/datasets/finance-vix@master/data/vix-daily.csv')
.then(r=>r.text())
.then(csv=>{
Papa.parse(csv,{
header:true,
complete:(res)=>{
// use close price
rawPrices = res.data.slice(-300).map(r=>({t:r.Date, p:parseFloat(r.VIXClose)})).filter(r=>!isNaN(r.p));
renderChart();
}
});
});
</script>
</body>
</html>
```
How to use:
1. Prepare a CSV with two columns: any date/time label in column 1, closing price in column 2 (no header needed).
2. Click “Choose file” to load the data.
3. Adjust “Pivot sensitivity” (percentage price change that defines swing highs/lows).
4. Press “Analyze”.
5. Detected 5-wave impulses are listed and plotted with green (bullish) or red (bearish) markers.
Trading-strategy logic is highly simplified and rule-based; treat results as an educational starting point, not a substitute for professional analysis.Drag to resize
Below is a complete HTML file that includes an Elliott Wave analysis tool for trading. It uses Chart.js for rendering charts and includes a basic algorithm to simulate Elliott Wave counting based on price data. The tool allows users to input price points, and it will attempt to identify potential Elliott Wave patterns (5-wave impulse and 3-wave corrective structures).
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Elliott Wave Analysis Tool</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
background-color: #f4f4f9;
}
h1 {
color: #333;
text-align: center;
}
#chartContainer {
width: 80%;
margin: 20px auto;
height: 400px;
}
#inputData, #waveAnalysis {
width: 80%;
margin: 20px auto;
padding: 15px;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
textarea {
width: 100%;
height: 100px;
margin-bottom: 10px;
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
}
button {
background-color: #007BFF;
color: white;
padding: 10px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
#analysisResult {
margin-top: 15px;
font-size: 16px;
line-height: 1.6;
}
</style>
</head>
<body>
<h1>Elliott Wave Analysis Tool for Trading</h1>
<div id="inputData">
<h2>Input Price Data</h2>
<p>Enter price points (one per line) to analyze for Elliott Wave patterns:</p>
<textarea id="priceInput" placeholder="Example:
100
110
105
120
115
130
125
140"></textarea>
<button onclick="analyzeWave()">Analyze Elliott Wave</button>
</div>
<div id="chartContainer">
<canvas id="priceChart"></canvas>
</div>
<div id="waveAnalysis">
<h2>Wave Analysis Results</h2>
<div id="analysisResult">Enter price data and click "Analyze Elliott Wave" to see the results.</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
// Chart.js setup
const ctx = document.getElementById('priceChart').getContext('2d');
const priceChart = new Chart(ctx, {
type: 'line',
data: {
labels: [],
datasets: [{
label: 'Price Data',
data: [],
borderColor: 'blue',
fill: false,
pointRadius: 3,
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
y: { title: { display: true, text: 'Price' } },
x: { title: { display: true, text: 'Time' } }
}
}
});
// Elliott Wave Analysis Logic
function analyzeWave() {
const priceInput = document.getElementById('priceInput').value.trim();
const prices = priceInput.split('\n').map(val => parseFloat(val)).filter(val => !isNaN(val));
if (prices.length < 5) {
document.getElementById('analysisResult').innerHTML = "Please enter at least 5 price points to analyze Elliott Wave patterns.";
return;
}
// Update chart with price data
priceChart.data.labels = prices.map((_, i) => `Point ${i + 1}`);
priceChart.data.datasets[0].data = prices;
priceChart.update();
// Simple Elliott Wave detection logic (5-wave impulse detection)
let result = detectImpulseWave(prices);
// Display analysis result
document.getElementById('analysisResult').innerHTML = result;
}
function detectImpulseWave(prices) {
let analysis = "<strong>Elliott Wave Analysis:</strong><br>";
const len = prices.length;
if (len < 5) return "Insufficient data for impulse wave detection (need at least 5 points).";
// Look for a potential 5-wave structure
let wave1Start = 0;
let wave1End = findNextPeakOrTrough(prices, wave1Start, 'up');
if (wave1End === -1) return "No valid Wave 1 detected.";
let wave2End = findNextPeakOrTrough(prices, wave1End, 'down');
if (wave2End === -1 || prices[wave2End] <= prices[wave1Start]) return "No valid Wave 2 detected (Wave 2 cannot retrace below Wave 1 start).";
let wave3End = findNextPeakOrTrough(prices, wave2End, 'up');
if (wave3End === -1 || prices[wave3End] <= prices[wave1End]) return "No valid Wave 3 detected (Wave 3 must exceed Wave 1 end).";
let wave4End = findNextPeakOrTrough(prices, wave3End, 'down');
if (wave4End === -1 || prices[wave4End] <= prices[wave2End]) return "No valid Wave 4 detected (Wave 4 cannot overlap Wave 2 end).";
let wave5End = findNextPeakOrTrough(prices, wave4End, 'up');
if (wave5End === -1 || prices[wave5End] <= prices[wave3End]) return "No valid Wave 5 detected (Wave 5 must exceed Wave 3 end).";
analysis += `Potential 5-Wave Impulse Structure Detected:<br>`;
analysis += `- Wave 1: ${prices[wave1Start]} to ${prices[wave1End]} (Uptrend)<br>`;
analysis += `- Wave 2: ${prices[wave1End]} to ${prices[wave2End]} (Correction)<br>`;
analysis += `- Wave 3: ${prices[wave2End]} to ${prices[wave3End]} (Uptrend - Strongest)<br>`;
analysis += `- Wave 4: ${prices[wave3End]} to ${prices[wave4End]} (Correction)<br>`;
analysis += `- Wave 5: ${prices[wave4End]} to ${prices[wave5End]} (Uptrend - Final)<br>`;
analysis += "<br><em>Note: This is a basic analysis. Real Elliott Wave counting requires deeper market context and rules (e.g., Fibonacci retracements, wave proportions).</em>";
return analysis;
}
function findNextPeakOrTrough(prices, start, direction) {
for (let i = start + 1; i < prices.length - 1; i++) {
if (direction === 'up' && prices[i] > prices[i - 1] && prices[i] > prices[i + 1]) {
return i;
} else if (direction === 'down' && prices[i] < prices[i - 1] && prices[i] < prices[i + 1]) {
return i;
}
}
return -1;
}
</script>
</body>
</html>
```
This HTML code creates an interactive Elliott Wave analysis tool with the following features:
- **Input Section**: Users can input a series of price points (one per line) to represent a price chart.
- **Chart Visualization**: Uses Chart.js (loaded via CDN) to render a line chart of the entered price data for visual reference.
- **Wave Analysis**: Implements a basic algorithm to detect a 5-wave impulse structure (the core of Elliott Wave Theory) with simple rules to identify waves 1 through 5. It looks for alternating peaks and troughs with basic validation (e.g., Wave 2 cannot retrace below Wave 1 start).
- **Results Display**: Outputs a textual analysis of the detected wave structure or an error message if the pattern does not conform to basic Elliott Wave rules.
**How to Use**:
1. Enter price data in the textarea (e.g., a sequence of numbers representing price points over time).
2. Click the "Analyze Elliott Wave" button to process the data.
3. View the updated chart and the analysis results below.
**Limitations**:
- This is a simplified implementation for educational purposes. Real Elliott Wave analysis involves complex rules (e.g., Fibonacci retracements, wave length ratios, and subjective interpretation).
- The tool currently focuses on detecting upward 5-wave impulse structures and does not include corrective waves (A-B-C) or nested sub-waves.
- It assumes clean price data without significant noise or gaps.
You can copy and paste this code into an HTML file to run it locally or host it on a web server. All dependencies (Chart.js) are loaded via CDN, so no additional files are required.Drag to resize
This tool allows you to perform an Elliott Wave analysis by selecting points on a chart. It will then validate the structure against the core Elliott Wave rules and provide a Fibonacci analysis of the relationships between the waves.
### How to Use
1. **Start Analysis**: Click the "Start Elliott Wave Analysis" button.
2. **Mark the Waves**: Click on the chart to mark six key points in sequence:
* **Point 0**: The start of the move.
* **Point 1**: The peak of Wave 1.
* **Point 2**: The bottom of Wave 2.
* **Point 3**: The peak of Wave 3.
* **Point 4**: The bottom of Wave 4.
* **Point 5**: The peak of Wave 5.
3. **Review Results**: Once all points are selected, the tool automatically analyzes your selection. The "Analysis Results" panel will show whether your wave count passes or fails the three fundamental rules of an impulse wave. It will also display a detailed Fibonacci breakdown for each wave.
4. **Reset**: Click the "Reset" button to clear the analysis and start over.
The chart is pre-loaded with sample data. You can pan by clicking and dragging, and zoom using your mouse wheel.
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Elliott Wave Analysis Tool</title>
<!-- TradingView Lightweight Charts library -->
<script src="https://unpkg.com/lightweight-charts/dist/lightweight-charts.standalone.production.js"></script>
<style>
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
background-color: #f0f2f5;
color: #333;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
align-items: center;
height: 100vh;
}
h1 {
color: #131722;
margin-top: 15px;
}
#app-container {
display: flex;
flex-direction: row;
width: 95%;
max-width: 1600px;
height: 85vh;
background-color: #ffffff;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
overflow: hidden;
}
#chart-container {
flex-grow: 1;
height: 100%;
position: relative;
}
#controls-container {
width: 350px;
padding: 20px;
background-color: #f8f9fa;
border-left: 1px solid #e0e3eb;
overflow-y: auto;
display: flex;
flex-direction: column;
}
.control-button {
background-color: #2962ff;
color: white;
border: none;
padding: 12px 15px;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
margin-bottom: 20px;
transition: background-color 0.2s;
}
.control-button:hover {
background-color: #0039cb;
}
.control-button.reset {
background-color: #6c757d;
}
.control-button.reset:hover {
background-color: #5a6268;
}
.control-button:disabled {
background-color: #b0bec5;
cursor: not-allowed;
}
#instructions {
padding: 15px;
background-color: #e3f2fd;
border: 1px solid #90caf9;
border-radius: 5px;
margin-bottom: 20px;
font-size: 14px;
}
#results-container h3 {
margin-top: 0;
border-bottom: 2px solid #e0e3eb;
padding-bottom: 10px;
margin-bottom: 15px;
}
.result-item {
margin-bottom: 12px;
font-size: 14px;
}
.result-item strong {
display: inline-block;
width: 90%;
}
.result-item span {
font-weight: bold;
padding: 3px 6px;
border-radius: 4px;
color: white;
float: right;
}
.pass {
background-color: #28a745;
}
.fail {
background-color: #dc3545;
}
.fib-analysis {
margin-top: 25px;
padding-top: 15px;
border-top: 1px dashed #ced4da;
}
.fib-item {
font-size: 14px;
line-height: 1.6;
}
</style>
</head>
<body>
<h1>Elliott Wave Analysis Tool</h1>
<div id="app-container">
<div id="chart-container"></div>
<div id="controls-container">
<button id="start-analysis-btn" class="control-button">Start Elliott Wave Analysis</button>
<button id="reset-btn" class="control-button reset">Reset</button>
<div id="instructions">
<p><strong>Status:</strong> Waiting to start.</p>
<p>Click "Start Analysis" then click 6 points on the chart to mark waves 0-5.</p>
</div>
<div id="results-container" style="display: none;">
<h3>Rule Validation</h3>
<div id="rule1" class="result-item"><strong>Rule 1:</strong> Wave 2 cannot retrace >100% of Wave 1.</div>
<div id="rule2" class="result-item"><strong>Rule 2:</strong> Wave 3 cannot be the shortest impulse wave.</div>
<div id="rule3" class="result-item"><strong>Rule 3:</strong> Wave 4 cannot overlap with Wave 1.</div>
<div class="fib-analysis">
<h3>Fibonacci Analysis</h3>
<div id="fib2" class="fib-item"></div>
<div id="fib3" class="fib-item"></div>
<div id="fib4" class="fib-item"></div>
<div id="fib5" class="fib-item"></div>
</div>
</div>
</div>
</div>
<script>
const chartContainer = document.getElementById('chart-container');
const startBtn = document.getElementById('start-analysis-btn');
const resetBtn = document.getElementById('reset-btn');
const instructions = document.getElementById('instructions');
const resultsContainer = document.getElementById('results-container');
let isAnalyzing = false;
let wavePoints = [];
let drawnElements = { markers: [], lines: [] };
const chart = LightweightCharts.createChart(chartContainer, {
width: chartContainer.clientWidth,
height: chartContainer.clientHeight,
layout: {
backgroundColor: '#ffffff',
textColor: '#333',
},
grid: {
vertLines: { color: '#f0f2f5' },
horzLines: { color: '#f0f2f5' },
},
crosshair: { mode: LightweightCharts.CrosshairMode.Normal },
rightPriceScale: { borderColor: '#e0e3eb' },
timeScale: { borderColor: '#e0e3eb' },
});
const candleSeries = chart.addCandlestickSeries({
upColor: '#28a745',
downColor: '#dc3545',
borderDownColor: '#dc3545',
borderUpColor: '#28a745',
wickDownColor: '#dc3545',
wickUpColor: '#28a745',
});
// Generate plausible sample data for demonstration
function generateSampleData() {
const data = [];
let date = new Date("2023-01-01");
let price = 100;
// Wave 0 -> 1
for (let i = 0; i < 20; i++) {
let change = Math.random() * 2;
price += change;
data.push({ time: date.toISOString().split('T')[0], open: price - change, high: price + Math.random(), low: price - change - Math.random(), close: price });
date.setDate(date.getDate() + 1);
}
// Wave 1 -> 2
let wave1High = price;
for (let i = 0; i < 12; i++) {
let change = Math.random() * 1.5;
price -= change;
data.push({ time: date.toISOString().split('T')[0], open: price + change, high: price + change + Math.random(), low: price - Math.random(), close: price });
date.setDate(date.getDate() + 1);
}
// Wave 2 -> 3
for (let i = 0; i < 25; i++) {
let change = Math.random() * 2.5;
price += change;
data.push({ time: date.toISOString().split('T')[0], open: price - change, high: price + Math.random(), low: price - change - Math.random(), close: price });
date.setDate(date.getDate() + 1);
}
// Wave 3 -> 4
let wave3High = price;
for (let i = 0; i < 15; i++) {
let change = Math.random() * 1.2;
price -= change;
data.push({ time: date.toISOString().split('T')[0], open: price + change, high: price + change + Math.random(), low: price - Math.random(), close: price });
date.setDate(date.getDate() + 1);
}
// Wave 4 -> 5
for (let i = 0; i < 18; i++) {
let change = Math.random() * 1.8;
price += change;
data.push({ time: date.toISOString().split('T')[0], open: price - change, high: price + Math.random(), low: price - change - Math.random(), close: price });
date.setDate(date.getDate() + 1);
}
return data;
}
const sampleData = generateSampleData();
candleSeries.setData(sampleData);
chart.timeScale().fitContent();
function updateInstructions(text) {
instructions.innerHTML = `<p>${text}</p>`;
}
function clearDrawing() {
drawnElements.markers.forEach(marker => candleSeries.removeMarker(marker));
drawnElements.lines.forEach(line => chart.removePriceLine(line));
drawnElements = { markers: [], lines: [] };
}
function resetAnalysis() {
isAnalyzing = false;
wavePoints = [];
startBtn.disabled = false;
updateInstructions('<strong>Status:</strong> Waiting to start.<br>Click "Start Analysis" then click 6 points on the chart to mark waves 0-5.');
resultsContainer.style.display = 'none';
clearDrawing();
}
startBtn.addEventListener('click', () => {
if (isAnalyzing) return;
resetAnalysis();
isAnalyzing = true;
startBtn.disabled = true;
updateInstructions('<strong>Analyzing...</strong><br>Click to mark <strong>Point 0</strong> (start of trend).');
});
resetBtn.addEventListener('click', resetAnalysis);
chart.subscribeClick(param => {
if (!isAnalyzing || !param.point) return;
const price = candleSeries.coordinateToPrice(param.point.y);
const time = param.time;
wavePoints.push({ time, price });
const pointIndex = wavePoints.length - 1;
const markerId = candleSeries.createMarker({
time: time,
position: wavePoints.length % 2 === 0 ? 'belowBar' : 'aboveBar',
color: '#2962ff',
shape: 'arrowUp',
text: `${pointIndex}`,
size: 2
});
if (pointIndex % 2 === 0) { // For 0, 2, 4
markerId.position = 'belowBar';
markerId.shape = 'arrowUp';
} else { // For 1, 3, 5
markerId.position = 'aboveBar';
markerId.shape = 'arrowDown';
}
candleSeries.updateMarker(markerId);
drawnElements.markers.push(markerId);
if (wavePoints.length > 1) {
const prevPoint = wavePoints[pointIndex - 1];
const line = chart.createPriceLine({
price: prevPoint.price,
color: 'rgba(41, 98, 255, 0.7)',
lineWidth: 2,
lineStyle: LightweightCharts.LineStyle.Dashed,
});
const line2 = chart.createPriceLine({
price: price,
color: 'rgba(41, 98, 255, 0.7)',
lineWidth: 2,
lineStyle: LightweightCharts.LineStyle.Dashed,
});
// Note: LightweightCharts doesn't support diagonal lines between two time/price coords directly.
// This is a visual approximation. For a real tool, one would draw on a canvas overlay.
// We will use markers and analysis panel as the core feedback.
}
if (wavePoints.length < 6) {
updateInstructions(`<strong>Analyzing...</strong><br>Click to mark <strong>Point ${wavePoints.length}</strong> (Wave ${wavePoints.length}).`);
} else {
isAnalyzing = false;
startBtn.disabled = false;
updateInstructions('<strong>Analysis Complete.</strong><br>See results on the right. Click Reset to start over.');
performAnalysis();
}
});
function setRuleResult(elementId, passed) {
const el = document.getElementById(elementId);
const statusEl = document.createElement('span');
statusEl.textContent = passed ? 'PASS' : 'FAIL';
statusEl.className = passed ? 'pass' : 'fail';
// Clear previous result
if (el.lastChild.tagName === 'SPAN') {
el.removeChild(el.lastChild);
}
el.appendChild(statusEl);
}
function performAnalysis() {
resultsContainer.style.display = 'block';
const [p0, p1, p2, p3, p4, p5] = wavePoints.map(p => p.price);
// Rule 1: Wave 2 never retraces more than 100% of wave 1
const rule1_pass = p2 > p0;
setRuleResult('rule1', rule1_pass);
// Rule 2: Wave 3 is never the shortest of the three impulse waves (1, 3, and 5)
const len1 = p1 - p0;
const len3 = p3 - p2;
const len5 = p5 - p4;
const rule2_pass = len3 > len1 && len3 > len5;
setRuleResult('rule2', rule2_pass);
// Rule 3: Wave 4 does not overlap with the price territory of wave 1
const rule3_pass = p4 > p1;
setRuleResult('rule3', rule3_pass);
// Fibonacci Analysis
const fib2Retracement = ((p1 - p2) / len1) * 100;
document.getElementById('fib2').innerHTML = `<strong>Wave 2:</strong> retraced ${fib2Retracement.toFixed(1)}% of Wave 1. (Common: 50%, 61.8%)`;
const fib3Extension = (len3 / len1) * 100;
document.getElementById('fib3').innerHTML = `<strong>Wave 3:</strong> was ${fib3Extension.toFixed(1)}% of Wave 1. (Common: 161.8%, 261.8%)`;
const fib4Retracement = ((p3 - p4) / len3) * 100;
document.getElementById('fib4').innerHTML = `<strong>Wave 4:</strong> retraced ${fib4Retracement.toFixed(1)}% of Wave 3. (Common: 38.2%, 50%)`;
const fib5Relation = (len5 / len1) * 100;
document.getElementById('fib5').innerHTML = `<strong>Wave 5:</strong> was ${fib5Relation.toFixed(1)}% of Wave 1. (Common: 61.8%, 100%, 161.8%)`;
}
// Handle window resizing
new ResizeObserver(entries => {
if (entries.length > 0 && entries[0].contentRect.width > 0) {
const { width, height } = entries[0].contentRect;
chart.applyOptions({ width, height });
}
}).observe(chartContainer);
resetAnalysis(); // Initial state
</script>
</body>
</html>
```Drag to resize
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Elliott Wave Analysis Tool</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Chart.js for price charting -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
background: #f6f7fb;
color: #202030;
}
h2 { margin-bottom: 0.2em; }
.container {
max-width: 950px;
margin: auto;
background: #fff;
box-shadow: 0 4px 18px #ddd;
padding: 2em;
border-radius: 1em;
}
canvas {
background: #f9f9f9;
border-radius: 0.5em;
}
.analysis {
margin-top: 1.5em;
background: #eef4fa;
border-radius: 0.5em;
padding: 1em;
}
.wave-label {
font-weight: bold;
}
#uploadLabel {
display: inline-block;
background: #2269b5;
color: #fff;
padding: 0.4em 1.1em;
border-radius: 0.5em;
cursor: pointer;
margin-bottom: 1em;
}
#fileInput {
display: none;
}
</style>
</head>
<body>
<div class="container">
<h2>Elliott Wave Analysis Tool</h2>
<p>
Upload a CSV file of historical price data (<code>timestamp,price</code>) or use example data.<br>
<label id="uploadLabel" for="fileInput">Choose File</label>
<input id="fileInput" type="file" accept=".csv">
<button id="exampleBtn" style="margin-left: 1em;">Load Example Data</button>
</p>
<canvas id="chart" width="900" height="360"></canvas>
<div class="analysis" id="analysis">
<b>Analysis output will appear here...</b>
</div>
</div>
<script>
// Core: Elliott wave detection in JS (simplified for educational/trading exploration purposes)
function parseCSV(contents) {
let lines = contents.trim().split('\n');
let result = [];
for (let line of lines.slice(1)) {
let [timestamp, price] = line.split(',');
if (!price) continue;
result.push({ timestamp: timestamp, price: parseFloat(price) });
}
return result;
}
// Zigzag peak/trough detection (basic swing points detector)
function detectSwingPoints(prices, lookback = 5) {
let swings = [];
for (let i = lookback; i < prices.length - lookback; i++) {
let pivotHigh = true, pivotLow = true;
for (let j = 1; j <= lookback; j++) {
if (prices[i].price <= prices[i - j].price || prices[i].price <= prices[i + j].price)
pivotHigh = false;
if (prices[i].price >= prices[i - j].price || prices[i].price >= prices[i + j].price)
pivotLow = false;
}
if (pivotHigh)
swings.push({ index: i, type: "high", price: prices[i].price, ts: prices[i].timestamp });
else if (pivotLow)
swings.push({ index: i, type: "low", price: prices[i].price, ts: prices[i].timestamp });
}
return swings;
}
// Elliott Wave pattern detection (simplistic pattern matching)
function detectElliottWaves(swings) {
// Try to fit 5-wave impulse among main swings
// rule of thumb: High-Low-High-Low-High for bullish
let waves = [];
for (let i = 0; i <= swings.length - 9; i++) {
// try impulse on positive trend
let wave = [swings[i], swings[i+1], swings[i+2], swings[i+3], swings[i+4], swings[i+5], swings[i+6], swings[i+7], swings[i+8]];
// Check for correct sequence (High-Low-High-Low-High-Low-High-Low-High)
let types = wave.map(w => w.type);
if (
types[0] === "low" &&
types[1] === "high" &&
types[2] === "low" &&
types[3] === "high" &&
types[4] === "low" &&
types[5] === "high" &&
types[6] === "low" &&
types[7] === "high" &&
types[8] === "low"
) {
// further elliott wave rules: 1-3-5 impulse are "high", 2-4 are "low"
let succession = [
wave[0].price < wave[1].price, // wave 1 up
wave[1].price > wave[2].price, // wave 2 down
wave[2].price < wave[3].price, // wave 3 up
wave[3].price > wave[4].price, // wave 4 down
wave[4].price < wave[5].price, // wave 5 up
];
if (succession.every(x => x)) {
// Return 1st 5 waves as impulse, rest as corrective (mock-up)
return [
{ ...wave[0], name: '0' },
{ ...wave[1], name: '1' },
{ ...wave[2], name: '2' },
{ ...wave[3], name: '3' },
{ ...wave[4], name: '4' },
{ ...wave[5], name: '5' }, // End of impulse
{ ...wave[6], name: 'A' },
{ ...wave[7], name: 'B' },
{ ...wave[8], name: 'C' }
];
}
}
}
return []; // no pattern found
}
// Example data (minute chart, random but with an impulse-corrective like structure)
const exampleCSV = `timestamp,price
2024-01-01 09:00,100
2024-01-01 09:01,101
2024-01-01 09:02,103
2024-01-01 09:03,102
2024-01-01 09:04,108
2024-01-01 09:05,106
2024-01-01 09:06,112
2024-01-01 09:07,111
2024-01-01 09:08,116
2024-01-01 09:09,113
2024-01-01 09:10,118
2024-01-01 09:11,120
2024-01-01 09:12,119
2024-01-01 09:13,117
2024-01-01 09:14,114
2024-01-01 09:15,116
2024-01-01 09:16,113
2024-01-01 09:17,111
2024-01-01 09:18,109
2024-01-01 09:19,110`;
let chart = null;
let waveAnnoDs = null;
function renderChart(data, elliottWaves) {
const ctx = document.getElementById('chart').getContext('2d');
const labels = data.map(row => row.timestamp.split(' ')[1]);
const prices = data.map(row => row.price);
// Datasets: Price Line, Elliott Waves (scatter labels)
let wavePoints = [];
let waveLabels = [];
let waveColors = ['#27c48c', '#367bf5', '#e5b336', '#e53f3f', '#6e44e0', '#333', '#db198d', '#a3712a', '#ff9c0a'];
if (elliottWaves && elliottWaves.length) {
wavePoints = elliottWaves.map((w, i) => ({
x: w.index,
y: w.price
}));
waveLabels = elliottWaves.map((w, i) => w.name);
}
// Delete old chart
if (chart) chart.destroy();
chart = new Chart(ctx, {
type: 'line',
data: {
labels,
datasets: [
{
label: "Price",
data: prices,
borderColor: "#367bf5",
backgroundColor: "rgba(56,164,255,0.08)",
pointRadius: 2,
fill: true,
tension: 0.3,
},
...(elliottWaves && elliottWaves.length
? [{
type: 'scatter',
label: "Elliott Waves",
data: elliottWaves.map((w, i) => ({
x: w.index,
y: w.price,
label: w.name
})),
showLine: false,
pointRadius: 7,
pointBackgroundColor: elliottWaves.map((w,i)=>waveColors[i%waveColors.length]),
pointStyle: 'triangle',
borderWidth: 0
}]
: [])
]
},
options: {
plugins: {
tooltip: {
callbacks: {
label: function(context) {
if (context.dataset.label === "Elliott Waves") {
return `Wave ${elliottWaves[context.dataIndex].name} @ ${elliottWaves[context.dataIndex].price}`;
}
return context.dataset.label + ": " + context.parsed.y;
}
}
}
},
elements: {
point: { pointStyle: 'circle' }
},
scales: {
x: { display: false },
y: { beginAtZero: false }
},
animation: false,
responsive: false,
plugins: {
legend: { display: true }
}
},
plugins: [{
afterDraw: (chart) => {
// Draw wave labels on chart (overlay)
if (elliottWaves && elliottWaves.length) {
const ctx = chart.ctx;
elliottWaves.forEach((w, i) => {
let meta = chart.getDatasetMeta(1).data[i];
if (!meta) return;
ctx.save();
ctx.font = 'bold 16px Arial';
ctx.fillStyle = waveColors[i%waveColors.length];
ctx.textAlign = 'center';
ctx.fillText(w.name, meta.x, meta.y - 12);
ctx.restore();
})
}
}
}]
});
}
// Analysis texts
function buildAnalysis(elliottWaves) {
if (!elliottWaves || !elliottWaves.length) {
return "<i>No clear Elliott Wave pattern detected in this interval.</i>";
}
let html = "<h4>Elliott Wave Count Detected:</h4>";
html += "<ul>";
for (let w of elliottWaves) {
let label = '';
if (w.name==='1'||w.name==='3'||w.name==='5') label = 'Impulse Wave';
else if (w.name==='2'||w.name==='4') label = 'Corrective Subwave';
else if (w.name==='A'||w.name==='C') label = 'ABC Correction';
else if (w.name==='B') label = 'ABC Midpoint';
else label = '';
html += `<li><span class="wave-label">Wave ${w.name}</span> at <b>${w.price}</b> (${label}) [${w.ts}]</li>`;
}
html += "</ul>";
html += "<p><b>Note:</b> This pattern is algorithmically detected on the swing highs/lows. Manual validation is recommended. Elliott Wave interpretation is subjective—use this as a research aid, not as trading advice.</p>";
return html;
}
// File events
document.getElementById('fileInput').addEventListener('change', async (e) => {
let file = e.target.files[0];
if (!file) return;
let text = await file.text();
let data = parseCSV(text);
if (data.length < 15) {
alert("Upload more price data rows (min 15 recommended)!");
return;
}
runAnalysis(data);
});
document.getElementById('uploadLabel').onclick = function() {
document.getElementById('fileInput').click();
};
document.getElementById('exampleBtn').onclick = function() {
let data = parseCSV(exampleCSV);
runAnalysis(data);
};
// Main logic: find waves, draw chart, update analysis
function runAnalysis(data) {
let swings = detectSwingPoints(data, 2);
let ewaves = detectElliottWaves(swings);
renderChart(data, ewaves);
document.getElementById('analysis').innerHTML = buildAnalysis(ewaves);
}
// Initial example data
window.onload = function() {
let data = parseCSV(exampleCSV);
runAnalysis(data);
};
</script>
</body>
</html>
```
Drag to resize
```html
<!DOCTYPE html>
<html>
<head>
<title>Elliott Wave Analysis Tool</title>
<script src="https://unpkg.com/lightweight-charts@4.1.4/dist/lightweight-charts.standalone.production.js"></script>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
height: 100vh;
}
#chart {
flex-grow: 1;
}
.controls {
padding: 10px;
background: #f0f0f0;
display: flex;
gap: 10px;
align-items: center;
}
</style>
</head>
<body>
<div class="controls">
<select id="waveType">
<option value="Impulse 1-5">Impulse 1-5</option>
<option value="Corrective A-B-C">Corrective A-B-C</option>
<option value="Leading Diagonal">Leading Diagonal</option>
<option value="Ending Diagonal">Ending Diagonal</option>
</select>
<button id="addWave">Add Wave</button>
<button id="reset">Reset</button>
</div>
<div id="chart"></div>
<script>
// Create chart
const chart = LightweightCharts.createChart(document.getElementById('chart'), {
layout: {
backgroundColor: '#ffffff',
textColor: '#333',
},
grid: {
vertLines: { color: '#e0e0e0' },
horzLines: { color: '#e0e0e0' },
},
timeScale: {
timeVisible: true,
},
priceScale: {
borderColor: '#ddd'
}
});
// Create mock price data with wave-like patterns
const generateMockData = () => {
const data = [];
const startValue = 100;
const step = 1;
for (let i = 0; i < 100; i++) {
const time = new Date(2023, 0, 1 + i).toISOString().slice(0, 10);
const value = startValue + Math.sin(i * 0.2) * 20 + Math.sin(i * 0.1) * 10;
data.push({ time, open: value, high: value + 2, low: value - 2, close: value });
}
return data;
};
// Add candlestick series
const candleSeries = chart.addCandlestickSeries();
const mockData = generateMockData();
candleSeries.setData(mockData);
// Wave patterns example coordinates
const wavePoints = {
'Impulse 1-5': [
{ index: 5, price: 115, text: '1' },
{ index: 15, price: 105, text: '2' },
{ index: 30, price: 130, text: '3' },
{ index: 40, price: 120, text: '4' },
{ index: 60, price: 145, text: '5' }
],
'Corrective A-B-C': [
{ index: 65, price: 135, text: 'A' },
{ index: 75, price: 140, text: 'B' },
{ index: 85, price: 125, text: 'C' }
],
'Leading Diagonal': [
{ index: 10, price: 110, text: 'L1' },
{ index: 20, price: 115, text: 'L2' },
{ index: 25, price: 112, text: 'L3' },
{ index: 30, price: 118, text: 'L4' },
{ index: 35, price: 120, text: 'L5' }
],
'Ending Diagonal': [
{ index: 70, price: 140, text: 'E1' },
{ index: 75, price: 145, text: 'E2' },
{ index: 80, price: 143, text: 'E3' },
{ index: 85, price: 143, text: 'E4' },
{ index: 90, price: 148, text: 'E5' }
]
};
// Draw wave pattern
const drawWave = (type) => {
// Clear previous series
chart.removeSeries(candleSeries);
chart.addCandlestickSeries(mockData);
if (!wavePoints[type]) return;
for (let point of wavePoints[type]) {
candleSeries.createPriceLine({
price: point.price,
color: 'rgba(54, 162, 235, 0.9)',
lineWidth: 2,
lineStyle: 3,
axisLabelVisible: false,
title: point.text
});
}
};
// Event listeners
document.getElementById('addWave').addEventListener('click', () => {
const type = document.getElementById('waveType').value;
drawWave(type);
});
document.getElementById('reset').addEventListener('click', () => {
// Reset series
chart.removeSeries(candleSeries);
chart.addCandlestickSeries(mockData);
drawWave(document.getElementById('waveType').value);
});
// Initial draw
drawWave(document.getElementById('waveType').value);
</script>
</body>
</html>
```Drag to resize
Creating an Elliott Wave analysis tool involves generating a web interface where users can upload charts, and then applying Elliott Wave principles to analyze the data. Below is a basic example using HTML, CSS, and JavaScript. This example will use the `plotly.js` library for plotting charts and a simple Elliott Wave counting algorithm. Note that this is a simplified version and may not cover all Elliott Wave rules.
Here is the complete HTML code:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Elliott Wave Analysis Tool</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<style>
body {
padding: 20px;
}
#chart {
height: 600px;
}
</style>
</head>
<body>
<div class="container">
<h1>Elliott Wave Analysis Tool</h1>
<div id="chart"></div>
<button class="btn btn-primary mt-3" onclick="analyzeChart()">Analyze Chart</button>
</div>
<script>
const data = [
{
x: [1, 2, 3, 4, 5],
y: [10, 15, 13, 17, 12],
type: 'scatter',
mode: 'lines+markers',
marker: {color: 'red'},
}
];
const layout = {
title: 'Stock Price Chart',
xaxis: {title: 'Time'},
yaxis: {title: 'Price'}
};
Plotly.newPlot('chart', data, layout);
function analyzeChart() {
// Simplified Elliott Wave analysis for demonstration
const prices = data[0].y;
const waves = [];
waves.push('Impulse Wave');
for (let i = 0; i < prices.length; i++) {
if (i > 0 && prices[i] < prices[i - 1]) {
waves.push('Corrective Wave');
break;
}
}
alert('Elliott Wave Analysis: ' + waves.join(', '));
}
</script>
</body>
</html>
```
This code sets up a simple web page with a chart using the `plotly.js` library. When the "Analyze Chart" button is clicked, it performs a basic Elliott Wave analysis on the sample data and displays the results in an alert. You can expand the analysis logic to be more comprehensive according to the principles of Elliott Wave theory.Drag to resize
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Elliott Wave Analyzer</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/trading-signals"></script>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
background-color: #f5f5f5;
}
.container {
max-width: 1000px;
margin: 0 auto;
background: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.controls {
margin-bottom: 20px;
display: flex;
gap: 10px;
flex-wrap: wrap;
}
select, button, input {
padding: 8px 12px;
border-radius: 4px;
border: 1px solid #ddd;
}
button {
background-color: #4CAF50;
color: white;
border: none;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}
.chart-container {
position: relative;
height: 500px;
width: 100%;
}
.wave-count {
margin-top: 20px;
padding: 15px;
background-color: #f0f8ff;
border-radius: 4px;
}
</style>
</head>
<body>
<div class="container">
<h1>Elliott Wave Analyzer</h1>
<div class="controls">
<select id="symbol">
<option value="BTCUSDT">BTC/USDT</option>
<option value="ETHUSDT">ETH/USDT</option>
<option value="AAPL">AAPL</option>
<option value="MSFT">MSFT</option>
</select>
<select id="timeframe">
<option value="1m">1 Minute</option>
<option value="5m">5 Minutes</option>
<option value="15m">15 Minutes</option>
<option value="1h">1 Hour</option>
<option value="4h">4 Hours</option>
<option value="1d" selected>1 Day</option>
</select>
<input type="number" id="periods" value="100" min="30" max="500" placeholder="Number of periods">
<button id="analyze">Analyze</button>
</div>
<div class="chart-container">
<canvas id="priceChart"></canvas>
</div>
<div class="wave-count">
<h3>Elliott Wave Count Analysis</h3>
<div id="waveAnalysis">
<p>Click "Analyze" to generate wave count analysis.</p>
</div>
</div>
</div>
<script>
// Initialize chart
const ctx = document.getElementById('priceChart').getContext('2d');
let priceChart = new Chart(ctx, {
type: 'line',
data: { datasets: [] },
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
y: {
beginAtZero: false
}
}
}
});
// Analyze button click handler
document.getElementById('analyze').addEventListener('click', analyzeChart);
async function analyzeChart() {
const symbol = document.getElementById('symbol').value;
const timeframe = document.getElementById('timeframe').value;
const periods = document.getElementById('periods').value;
// Show loading state
document.getElementById('waveAnalysis').innerHTML = '<p>Analyzing price data...</p>';
try {
// In a real application, you would fetch actual price data here
// This is a simplified example with mock data
const mockData = generateMockData(periods);
// Analyze the wave pattern
const analysis = analyzeWavePattern(mockData);
// Update chart
updateChart(mockData, analysis.wavePoints);
// Display analysis
displayWaveAnalysis(analysis);
} catch (error) {
document.getElementById('waveAnalysis').innerHTML =
`<p style="color: red;">Error: ${error.message}</p>`;
}
}
function generateMockData(periodCount) {
const data = [];
let price = 100;
let trend = 1; // 1 for up, -1 for down
for (let i = 0; i < periodCount; i++) {
// Random walk with some trending periods to simulate waves
if (Math.random() < 0.1) trend *= -1;
price += (Math.random() * 2 - 0.5) * trend;
data.push({
time: i,
value: price
});
}
return data;
}
function analyzeWavePattern(data) {
// Simplified Elliott Wave analysis logic
// In a real application, this would be much more sophisticated
const extremes = findLocalExtrema(data);
const wavePoints = identifyWavePatterns(extremes);
return {
waveCount: wavePoints.length,
wavePoints: wavePoints,
currentWave: wavePoints.length > 0 ? wavePoints[wavePoints.length-1].type : 'unknown',
nextExpected: wavePoints.length > 0 ?
(wavePoints[wavePoints.length-1].type === 'impulse' ? 'corrective' : 'impulse') : 'unknown',
confidence: Math.min(80 + Math.floor(Math.random() * 20), 95) // Random confidence for demo
};
}
function findLocalExtrema(data) {
const extrema = [];
for (let i = 1; i < data.length - 1; i++) {
if ((data[i].value > data[i-1].value && data[i].value > data[i+1].value) ||
(data[i].value < data[i-1].value && data[i].value < data[i+1].value)) {
extrema.push({
time: data[i].time,
value: data[i].value,
type: data[i].value > data[i-1].value ? 'high' : 'low'
});
}
}
return extrema;
}
function identifyWavePatterns(extremes) {
if (extremes.length < 5) return [];
const waves = [];
let direction = extremes[0].type === 'high' ? 'down' : 'up';
for (let i = 0; i < extremes.length; i++) {
if ((direction === 'up' && extremes[i].type === 'high') ||
(direction === 'down' && extremes[i].type === 'low')) {
waves.push({
time: extremes[i].time,
value: extremes[i].value,
type: direction === 'up' ? 'impulse' : 'corrective'
});
direction = direction === 'up' ? 'down' : 'up';
}
}
return waves.slice(0, 5); // Return first 5 waves max for demo
}
function updateChart(data, wavePoints) {
const chartData = {
labels: data.map(d => d.time),
datasets: [
{
label: 'Price',
data: data.map(d => d.value),
borderColor: 'rgb(75, 192, 192)',
tension: 0.1,
pointRadius: 0
}
]
};
if (wavePoints && wavePoints.length > 0) {
// Add wave points to chart
wavePoints.forEach((wave, i) => {
chartData.datasets.push({
label: `Wave ${i+1} (${wave.type})`,
data: data.map(d => d.time === wave.time ? wave.value : null),
borderColor: wave.type === 'impulse' ? 'rgb(255, 99, 132)' : 'rgb(54, 162, 235)',
pointRadius: 5,
showLine: false
});
});
}
priceChart.data = chartData;
priceChart.update();
}
function displayWaveAnalysis(analysis) {
let html = `
<p><strong>Wave Count:</strong> ${analysis.waveCount} waves identified</p>
<p><strong>Current Wave:</strong> ${analysis.currentWave}</p>
<p><strong>Next Expected:</strong> ${analysis.nextExpected} wave</p>
<p><strong>Confidence:</strong> ${analysis.confidence}%</p>
<p><strong>Key Levels:</strong></p>
<ul>
`;
analysis.wavePoints.forEach((wave, i) => {
html += `<li>Wave ${i+1} (${wave.type}): ${wave.value.toFixed(2)} at time ${wave.time}</li>`;
});
html += `</ul>
<p><em>Note: This is a simplified demonstration. Real Elliott Wave analysis requires more sophisticated pattern recognition and consideration of wave degrees.</em></p>
`;
document.getElementById('waveAnalysis').innerHTML = html;
}
</script>
</body>
</html>Drag to resize
**Elliott Wave Analysis Tool**
=====================================
Below is an example implementation of an Elliott Wave analysis tool using JavaScript and the Highcharts library for chart rendering.
### Elliott Wave Analysis Logic
The Elliott Wave analysis logic is based on the following rules:
* Wave 2 never retraces more than 100% of Wave 1.
* Wave 3 is never the shortest wave.
* Wave 4 never overlaps with Wave 1.
* Wave 5 is usually similar in length to Wave 1 or Wave 3.
### Implementation
```html
<!DOCTYPE html>
<html>
<head>
<title>Elliott Wave Analysis Tool</title>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
</head>
<body>
<div id="container" style="height: 400px; min-width: 310px"></div>
<script>
// Sample data for the chart
let data = [
{ x: 1, y: 10 },
{ x: 2, y: 12 },
{ x: 3, y: 15 },
{ x: 4, y: 18 },
{ x: 5, y: 20 },
{ x: 6, y: 22 },
{ x: 7, y: 25 },
{ x: 8, y: 28 },
{ x: 9, y: 30 },
{ x: 10, y: 32 },
{ x: 11, y: 35 },
{ x: 12, y: 38 },
{ x: 13, y: 40 },
{ x: 14, y: 42 },
{ x: 15, y: 45 }
];
// Function to analyze the data and determine the Elliott Wave count
function analyzeElliottWave(data) {
// Initialize variables to hold the wave counts
let wave1, wave2, wave3, wave4, wave5;
// Find the highest and lowest points in the data
let max = Math.max(...data.map(point => point.y));
let min = Math.min(...data.map(point => point.y));
// Determine the wave counts based on the highest and lowest points
let wave1Start = data.findIndex(point => point.y === min);
let wave1End = data.findIndex((point, index) => index > wave1Start && point.y === max);
wave1 = { start: wave1Start, end: wave1End };
let wave2Start = wave1End;
let wave2End = data.findIndex((point, index) => index > wave2Start && point.y === Math.min(...data.slice(wave2Start + 1).map(p => p.y)));
wave2 = { start: wave2Start, end: wave2End };
let wave3Start = wave2End;
let wave3End = data.findIndex((point, index) => index > wave3Start && point.y === Math.max(...data.slice(wave3Start + 1).map(p => p.y)));
wave3 = { start: wave3Start, end: wave3End };
let wave4Start = wave3End;
let wave4End = data.findIndex((point, index) => index > wave4Start && point.y === Math.min(...data.slice(wave4Start + 1).map(p => p.y)));
wave4 = { start: wave4Start, end: wave4End };
let wave5Start = wave4End;
let wave5End = data.length - 1;
wave5 = { start: wave5Start, end: wave5End };
return [wave1, wave2, wave3, wave4, wave5];
}
// Analyze the data and get the Elliott Wave count
let waveCount = analyzeElliottWave(data);
// Create the chart
Highcharts.chart('container', {
chart: {
type: 'line'
},
title: {
text: 'Elliott Wave Analysis'
},
xAxis: {
title: {
text: 'Time'
}
},
yAxis: {
title: {
text: 'Price'
}
},
series: [{
data: data.map(point => [point.x, point.y]),
name: 'Price'
}],
annotations: waveCount.map((wave, index) => ({
labelOptions: {
backgroundColor: 'rgba(255,255,255,0.5)',
verticalAlign: 'top',
y: 15
},
labels: [{
point: {
x: data[wave.start].x,
y: data[wave.start].y,
xAxis: 0,
yAxis: 0
},
text: `Wave ${index + 1} Start`
}, {
point: {
x: data[wave.end].x,
y: data[wave.end].y,
xAxis: 0,
yAxis: 0
},
text: `Wave ${index + 1} End`
}]
}))
});
</script>
</body>
</html>
```
### How it Works
1. The code starts by creating a sample dataset for the chart.
2. The `analyzeElliottWave` function is used to determine the Elliott Wave count based on the data.
3. The function finds the highest and lowest points in the data and uses them to determine the wave counts.
4. The wave counts are then used to create annotations on the chart using the Highcharts library.
5. The chart is rendered with the price data and the Elliott Wave count annotations.
### Notes
* This implementation is a simplified example and may not cover all the rules and nuances of the Elliott Wave theory.
* The `analyzeElliottWave` function assumes that the data is in an uptrend and that the wave counts can be determined based on the highest and lowest points in the data.
* In a real-world implementation, you would need to modify the `analyzeElliottWave` function to handle different market conditions and to incorporate more complex rules and logic.Drag to resize
# Elliott Wave Chart Analysis Tool
I've created an Elliott Wave analysis tool that allows traders to mark wave patterns on a financial chart. This interactive tool combines OHLC candlestick charts with manual wave labeling capabilities.
## Features:
- Interactive OHLC chart visualization
- Manual wave labeling for precise Elliott Wave counts
- Draggable annotation points for wave identification
- Label customization with wave numbers (1-5) and letters (A-C)
- Wave count management and deletion
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Elliott Wave Analysis Tool</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-annotation@2.0.1/dist/chartjs-plugin-annotation.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-dragdata@2.2.3/dist/chartjs-plugin-dragdata.min.js"></script>
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
margin: 0;
padding: 20px;
background-color: #222;
color: #fff;
}
.container {
max-width: 1200px;
margin: 0 auto;
}
header {
text-align: center;
margin-bottom: 20px;
padding-bottom: 10px;
border-bottom: 1px solid #444;
}
h1 {
color: #4caf50;
margin-bottom: 5px;
}
.subtitle {
color: #9e9e9e;
font-size: 0.95rem;
}
.main-content {
display: flex;
gap: 20px;
flex-wrap: wrap;
}
.chart-container {
flex-grow: 1;
min-width: 800px;
background-color: #1a1a1a;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0,0,0,0.3);
padding: 15px;
}
#waveChart {
width: 100%;
height: 500px;
}
.controls {
width: 280px;
background-color: #333;
border-radius: 8px;
padding: 15px;
box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}
.controls h2 {
color: #fff;
border-bottom: 1px solid #444;
padding-bottom: 12px;
margin-top: 0;
}
.wave-selectors {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
margin-bottom: 20px;
}
.wave-btn {
padding: 12px 0;
background-color: #2c2c2c;
border: none;
border-radius: 4px;
color: #fff;
font-weight: bold;
cursor: pointer;
transition: background-color 0.2s;
font-size: 1rem;
}
.impulse-btn { background-color: #4285F4; }
.impulse-btn:hover { background-color: #3367D6; }
.corrective-btn { background-color: #FBBC05; color: #222}
.corrective-btn:hover { background-color: #E2A500; }
.delete-btn { background-color: #EA4335; }
.delete-btn:hover { background-color: #D1362B; }
.actions .btn {
width: 100%;
padding: 12px;
margin-bottom: 10px;
border-radius: 4px;
border: none;
font-weight: bold;
cursor: pointer;
transition: background-color 0.2s;
}
.reset-btn {
background-color: #fff;
color: #222;
}
.reset-btn:hover {
background-color: #e6e6e6;
}
.current-wave {
margin: 15px 0;
padding: 10px;
background-color: #292929;
border-radius: 4px;
}
.current-wave span {
display: inline-block;
margin-top: 10px;
padding: 8px;
background-color: #222;
border-radius: 4px;
font-family: monospace;
}
.wave-counts {
margin-top: 20px;
max-height: 200px;
overflow-y: auto;
}
.wave-counts h3 {
margin-bottom: 10px;
color: #ddd;
}
.count-list {
list-style-type: none;
padding: 0;
margin: 0;
}
.wave-item {
padding: 8px;
background-color: #3a3a3a;
margin-bottom: 8px;
border-radius: 4px;
display: flex;
justify-content: space-between;
}
.wave-name {
font-weight: bold;
}
.impulse-item .wave-name { color: #4285F4; }
.corrective-item .wave-name { color: #FBBC05; }
.delete-wave {
color: #EA4335;
cursor: pointer;
}
.instructions {
margin-top: 25px;
padding: 15px;
background-color: #292929;
border-radius: 4px;
font-size: 0.9rem;
line-height: 1.6;
}
.instructions h3 {
color: #ddd;
margin-top: 0;
}
.instructions ul {
padding-left: 20px;
margin: 10px 0;
}
.instructions li {
margin-bottom: 8px;
}
@media (max-width: 1100px) {
.main-content {
flex-direction: column;
}
.chart-container {
min-width: auto;
}
.controls {
width: 100%;
}
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>Elliott Wave Analysis Tool</h1>
<p class="subtitle">Identify impulse and corrective waves on financial charts</p>
</header>
<div class="main-content">
<div class="chart-container">
<canvas id="waveChart"></canvas>
</div>
<div class="controls">
<h2>Wave Controls</h2>
<div class="wave-selectors">
<button class="wave-btn impulse-btn" data-wave="1">Wave 1</button>
<button class="wave-btn impulse-btn" data-wave="2">Wave 2</button>
<button class="wave-btn impulse-btn" data-wave="3">Wave 3</button>
<button class="wave-btn impulse-btn" data-wave="4">Wave 4</button>
<button class="wave-btn impulse-btn" data-wave="5">Wave 5</button>
<button class="wave-btn corrective-btn" data-wave="A">Wave A</button>
<button class="wave-btn corrective-btn" data-wave="B">Wave B</button>
<button class="wave-btn corrective-btn" data-wave="C">Wave C</button>
<button class="wave-btn delete-btn" id="deletePoint">Delete Point</button>
</div>
<div class="current-wave">
<strong>Selected Wave:</strong>
<span id="selectedWave">None</span>
</div>
<div class="actions">
<button class="btn reset-btn" id="resetChart">Reset All Waves</button>
<button class="btn delete-btn" id="clearLabels">Clear Labels</button>
</div>
<div class="wave-counts">
<h3>Wave Counts</h3>
<ul class="count-list" id="waveList">
<!-- Wave counts will appear here -->
<li class="wave-item impulse-item">
<span class="wave-name">Wave 1</span>
<span class="wave-delete" data-id="1" style="display: none;">×</span>
</li>
<li class="wave-item impulse-item">
<span class="wave-name">Wave 2</span>
<span class="wave-delete" data-id="2" style="display: none;">×</span>
</li>
<li class="wave-item impulse-item">
<span class="wave-name">Wave 3</span>
<span class="wave-delete" data-id="3" style="display: none;">×</span>
</li>
<li class="wave-item impulse-item">
<span class="wave-name">Wave 4</span>
<span class="wave-delete" data-id="4" style="display: none;">×</span>
</li>
<li class="wave-item impulse-item">
<span class="wave-name">Wave 5</span>
<span class="wave-delete" data-id="5" style="display: none;">×</span>
</li>
<li class="wave-item corrective-item">
<span class="wave-name">Wave A</span>
<span class="wave-delete" data-id="A" style="display: none;">×</span>
</li>
<li class="wave-item corrective-item">
<span class="wave-name">Wave B</span>
<span class="wave-delete" data-id="B" style="display: none;">×</span>
</li>
<li class="wave-item corrective-item">
<span class="wave-name">Wave C</span>
<span class="wave-delete" data-id="C" style="display: none;">×</span>
</li>
</ul>
</div>
<div class="instructions">
<h3>How to Use:</h3>
<ul>
<li><strong>Select a wave</strong> from the control buttons</li>
<li><strong>Click on the chart</strong> to place wave labels</li>
<li><strong>Drag wave labels</strong> to fine-tune positioning</li>
<li>Use <strong>Delete Point</strong> to remove unwanted labels</li>
<li>Reset your analysis anytime with the reset buttons</li>
</ul>
</div>
</div>
</div>
</div>
<script>
// Mock OHLC financial data
const data = [
{ x: '2023-01-02', o: 162, h: 167, l: 159, c: 165 },
{ x: '2023-01-03', o: 165, h: 170, l: 163, c: 168 },
{ x: '2023-01-04', o: 168, h: 173, l: 166, c: 170 },
{ x: '2023-01-05', o: 170, h: 176, l: 169, c: 172 },
{ x: '2023-01-06', o: 172, h: 179, l: 171, c: 175 },
{ x: '2023-01-09', o: 175, h: 181, l: 173, c: 179 },
{ x: '2023-01-10', o: 179, h: 182, l: 175, c: 180 },
{ x: '2023-01-11', o: 180, h: 187, l: 178, c: 184 },
{ x: '2023-01-12', o: 184, h: 191, l: 182, c: 188 },
{ x: '2023-01-13', o: 188, h: 195, l: 185, c: 190 },
{ x: '2023-01-16', o: 190, h: 187, l: 183, c: 185 },
{ x: '2023-01-17', o: 185, h: 188, l: 182, c: 184 },
{ x: '2023-01-18', o: 184, h: 186, l: 178, c: 180 },
{ x: '2023-01-19', o: 180, h: 182, l: 177, c: 178 },
{ x: '2023-01-20', o: 178, h: 180, l: 175, c: 176 },
{ x: '2023-01-23', o: 176, h: 184, l: 175, c: 182 },
{ x: '2023-01-24', o: 182, h: 189, l: 180, c: 187 },
{ x: '2023-01-25', o: 187, h: 193, l: 185, c: 190 },
{ x: '2023-01-26', o: 190, h: 198, l: 188, c: 195 },
{ x: '2023-01-27', o: 195, h: 200, l: 193, c: 197 },
{ x: '2023-01-30', o: 197, h: 204, l: 195, c: 202 },
{ x: '2023-01-31', o: 202, h: 208, l: 200, c: 205 },
{ x: '2023-02-01', o: 205, h: 212, l: 203, c: 210 },
{ x: '2023-02-02', o: 210, h: 215, l: 208, c: 212 },
{ x: '2023-02-03', o: 212, h: 202, l: 197, c: 199 },
{ x: '2023-02-06', o: 199, h: 205, l: 197, c: 202 },
{ x: '2023-02-07', o: 202, h: 209, l: 200, c: 207 },
{ x: '2023-02-08', o: 207, h: 202, l: 198, c: 200 },
{ x: '2023-02-09', o: 200, h: 196, l: 192, c: 194 },
{ x: '2023-02-10', o: 194, h: 198, l: 191, c: 195 },
{ x: '2023-02-13', o: 195, h: 203, l: 193, c: 200 },
{ x: '2023-02-14', o: 200, h: 207, l: 198, c: 205 },
{ x: '2023-02-15', o: 205, h: 210, l: 203, c: 209 }
];
// Chart initialization
const ctx = document.getElementById('waveChart').getContext('2d');
let selectedWave = null;
const waveAnnotations = [];
const chart = new Chart(ctx, {
type: 'line',
data: {
datasets: [{
label: 'Price',
data: data.map(item => ({
x: item.x,
y: item.c
})),
backgroundColor: 'rgba(54, 162, 235, 0.2)',
borderColor: 'rgba(54, 162, 235, 1)',
borderWidth: 2,
pointRadius: 0,
fill: true
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
x: {
type: 'category',
grid: {
color: 'rgba(54, 162, 235, 0.1)'
},
ticks: {
color: '#aaa'
}
},
y: {
grid: {
color: 'rgba(54, 162, 235, 0.1)'
},
ticks: {
color: '#aaa'
}
}
},
plugins: {
legend: {
labels: {
color: '#ccc'
}
},
annotation: {
annotations: []
}
},
interaction: {
mode: 'index',
intersect: false
},
onClick: function(evt, elements) {
if (selectedWave) {
const canvasPosition = chart.getElementsAtEventForMode(evt, 'nearest', { intersect: false }, true);
if (canvasPosition.length) {
const point = canvasPosition[0];
addWaveAnnotation(selectedWave, point.element.x, point.element.y);
}
}
}
},
plugins: [ChartAnnotation]
});
// Add wave annotation to chart
function addWaveAnnotation(waveType, x, y) {
const annotation = {
type: 'label',
content: waveType,
position: {
x: x,
y: y
},
backgroundColor: waveType === 'A' || waveType === 'B' || waveType === 'C' ?
'rgba(251, 188, 5, 0.8)' : 'rgba(66, 133, 244, 0.8)',
color: '#fff',
font: {
size: 14,
weight: 'bold'
},
xAdjust: 0,
yAdjust: -10,
padding: {
top: 5,
bottom: 5,
left: 10,
right: 10
},
z: 10,
callout: {
display: true,
position: 'top'
},
waveType: waveType,
draggable: true
};
waveAnnotations.push(annotation);
chart.options.plugins.annotation.annotations = waveAnnotations;
chart.update();
updateWaveCountList();
}
// Update wave count sidebar
function updateWaveCountList() {
const waveCountList = document.getElementById('waveList');
waveCountList.innerHTML = '';
// Count each wave type
const waveCount = {1:0,2:0,3:0,4:0,5:0,A:0,B:0,C:0};
waveAnnotations.forEach(anno => {
waveCount[anno.waveType]++;
});
// Update list
for (const waveType in waveCount) {
if (waveCount[waveType] > 0) {
const item = document.createElement('li');
item.className = waveType === 'A' || waveType === 'B' || waveType === 'C' ?
'wave-item corrective-item' : 'wave-item impulse-item';
item.innerHTML = `
<span class="wave-name">Wave ${waveType}</span>
<span class="count">${waveCount[waveType]}</span>
<span class="delete-wave" data-type="${waveType}" style="display:${waveCount[waveType] > 0 ? 'inline' : 'none'}">×</span>
`;
waveCountList.appendChild(item);
}
}
}
// Delete all waves of a specific type
function deleteWaveType(waveType) {
for (let i = waveAnnotations.length - 1; i >= 0; i--) {
if (waveAnnotations[i].waveType === waveType) {
waveAnnotations.splice(i, 1);
}
}
chart.options.plugins.annotation.annotations = waveAnnotations;
chart.update();
updateWaveCountList();
}
// Event listeners for controls
document.querySelectorAll('.wave-btn').forEach(button => {
button.addEventListener('click', () => {
selectedWave = button.getAttribute('data-wave');
document.getElementById('selectedWave').textContent = selectedWave;
});
});
// Delete button - remove the last wave point
document.getElementById('deletePoint').addEventListener('click', () => {
if (waveAnnotations.length > 0) {
waveAnnotations.pop();
chart.options.plugins.annotation.annotations = waveAnnotations;
chart.update();
updateWaveCountList();
}
});
// Clear all labels
document.getElementById('clearLabels').addEventListener('click', () => {
waveAnnotations.length = 0;
chart.options.plugins.annotation.annotations = waveAnnotations;
chart.update();
updateWaveCountList();
});
// Reset entire chart
document.getElementById('resetChart').addEventListener('click', () => {
waveAnnotations.length = 0;
chart.options.plugins.annotation.annotations = waveAnnotations;
chart.update();
selectedWave = null;
document.getElementById('selectedWave').textContent = 'None';
updateWaveCountList();
});
// Initialize UI
updateWaveCountList();
</script>
</body>
</html>
```
## How to Use the Elliott Wave Analysis Tool:
1. **Select a wave** - Choose any wave button (1-5 for impulse waves or A-C for corrective waves)
2. **Place labels** - Click anywhere on the chart to mark key wave points
3. **Refine positioning** - Drag wave labels to precisely position them
4. **Delete** - Use "Delete Point" to remove the last label or "Clear Labels" for all
5. **Count waves** - The sidebar displays your wave counts for reference
This tool provides a practical interface for visualizing Elliott Wave patterns directly on price charts. The design follows trading platform aesthetics with appropriate coloring for impulse waves (blue) and corrective waves (yellow).Drag to resize
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Elliott Wave Analysis Tool</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
min-height: 100vh;
padding: 20px;
}
.container {
max-width: 1400px;
margin: 0 auto;
background: rgba(255, 255, 255, 0.95);
border-radius: 15px;
padding: 30px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}
.header {
text-align: center;
margin-bottom: 30px;
}
.header h1 {
color: #1e3c72;
margin-bottom: 10px;
font-size: 2.5em;
font-weight: 300;
}
.header p {
color: #666;
font-size: 1.1em;
}
.controls {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
margin-bottom: 30px;
padding: 20px;
background: #f8f9fa;
border-radius: 10px;
}
.control-group {
display: flex;
flex-direction: column;
}
.control-group label {
margin-bottom: 5px;
font-weight: 600;
color: #333;
}
.control-group input, .control-group select {
padding: 10px;
border: 2px solid #ddd;
border-radius: 5px;
font-size: 14px;
transition: border-color 0.3s;
}
.control-group input:focus, .control-group select:focus {
border-color: #2a5298;
outline: none;
}
.btn {
background: linear-gradient(45deg, #1e3c72, #2a5298);
color: white;
border: none;
padding: 12px 24px;
border-radius: 25px;
cursor: pointer;
font-size: 16px;
font-weight: 600;
transition: transform 0.3s, box-shadow 0.3s;
}
.btn:hover {
transform: translateY(-2px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}
.chart-container {
position: relative;
height: 500px;
margin: 30px 0;
background: white;
border-radius: 10px;
padding: 20px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
.analysis-panel {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
margin-top: 30px;
}
.wave-count, .analysis-summary {
background: #f8f9fa;
padding: 20px;
border-radius: 10px;
border-left: 4px solid #2a5298;
}
.wave-count h3, .analysis-summary h3 {
color: #1e3c72;
margin-bottom: 15px;
}
.wave-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px;
margin: 5px 0;
background: white;
border-radius: 5px;
border: 1px solid #ddd;
}
.wave-number {
background: #2a5298;
color: white;
width: 30px;
height: 30px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
}
.wave-details {
flex-grow: 1;
margin-left: 15px;
}
.wave-price {
font-weight: bold;
color: #1e3c72;
}
.fibonacci-levels {
margin-top: 20px;
padding: 15px;
background: #e3f2fd;
border-radius: 8px;
}
.fib-level {
display: flex;
justify-content: space-between;
margin: 5px 0;
padding: 5px 10px;
background: white;
border-radius: 4px;
font-size: 14px;
}
.data-input {
margin-bottom: 20px;
padding: 15px;
background: #fff3e0;
border-radius: 10px;
border: 2px dashed #ff9800;
}
.data-input textarea {
width: 100%;
height: 100px;
padding: 10px;
border: 1px solid #ddd;
border-radius: 5px;
resize: vertical;
font-family: monospace;
}
.trend-indicator {
display: inline-block;
padding: 5px 10px;
border-radius: 15px;
color: white;
font-size: 12px;
font-weight: bold;
}
.bullish { background: #4caf50; }
.bearish { background: #f44336; }
.sideways { background: #ff9800; }
@media (max-width: 768px) {
.analysis-panel {
grid-template-columns: 1fr;
}
.controls {
grid-template-columns: 1fr;
}
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>Elliott Wave Analysis Tool</h1>
<p>Advanced technical analysis for identifying Elliott Wave patterns in financial markets</p>
</div>
<div class="data-input">
<label for="priceData"><strong>Import Price Data (CSV format: timestamp,open,high,low,close,volume)</strong></label>
<textarea id="priceData" placeholder="Enter CSV data or use the sample data generator below..."></textarea>
<button class="btn" onclick="generateSampleData()">Generate Sample Data</button>
<button class="btn" onclick="analyzePriceData()">Analyze Data</button>
</div>
<div class="controls">
<div class="control-group">
<label for="timeframe">Timeframe</label>
<select id="timeframe">
<option value="1m">1 Minute</option>
<option value="5m">5 Minutes</option>
<option value="15m">15 Minutes</option>
<option value="1h" selected>1 Hour</option>
<option value="4h">4 Hours</option>
<option value="1d">1 Day</option>
</select>
</div>
<div class="control-group">
<label for="waveType">Wave Type</label>
<select id="waveType">
<option value="impulse" selected>Impulse Wave</option>
<option value="corrective">Corrective Wave</option>
<option value="auto">Auto Detect</option>
</select>
</div>
<div class="control-group">
<label for="sensitivity">Sensitivity</label>
<input type="range" id="sensitivity" min="1" max="10" value="5">
</div>
<div class="control-group">
<label for="showFib">Show Fibonacci Levels</label>
<input type="checkbox" id="showFib" checked>
</div>
</div>
<div class="chart-container">
<canvas id="priceChart"></canvas>
</div>
<div class="analysis-panel">
<div class="wave-count">
<h3>Wave Count Analysis</h3>
<div id="waveCountDisplay">
<div class="wave-item">
<div class="wave-number">1</div>
<div class="wave-details">
<div>Impulse Wave 1</div>
<div class="wave-price">$45,200 - $48,500</div>
</div>
<span class="trend-indicator bullish">Bullish</span>
</div>
<div class="wave-item">
<div class="wave-number">2</div>
<div class="wave-details">
<div>Corrective Wave 2</div>
<div class="wave-price">$48,500 - $46,800</div>
</div>
<span class="trend-indicator bearish">Bearish</span>
</div>
<div class="wave-item">
<div class="wave-number">3</div>
<div class="wave-details">
<div>Impulse Wave 3</div>
<div class="wave-price">$46,800 - $52,100</div>
</div>
<span class="trend-indicator bullish">Bullish</span>
</div>
<div class="wave-item">
<div class="wave-number">4</div>
<div class="wave-details">
<div>Corrective Wave 4</div>
<div class="wave-price">$52,100 - $49,900</div>
</div>
<span class="trend-indicator bearish">Bearish</span>
</div>
<div class="wave-item">
<div class="wave-number">5</div>
<div class="wave-details">
<div>Impulse Wave 5 (Projected)</div>
<div class="wave-price">$49,900 - $55,300</div>
</div>
<span class="trend-indicator bullish">Bullish</span>
</div>
</div>
</div>
<div class="analysis-summary">
<h3>Analysis Summary</h3>
<div id="analysisSummary">
<p><strong>Current Wave:</strong> Wave 5 in progress</p>
<p><strong>Pattern:</strong> 5-Wave Impulse Structure</p>
<p><strong>Trend:</strong> <span class="trend-indicator bullish">Bullish</span></p>
<p><strong>Confidence:</strong> 78%</p>
<p><strong>Next Target:</strong> $55,300</p>
<p><strong>Stop Loss:</strong> $48,500</p>
</div>
<div class="fibonacci-levels">
<h4>Fibonacci Retracement Levels</h4>
<div id="fibonacciLevels">
<div class="fib-level">
<span>23.6%</span>
<span>$51,250</span>
</div>
<div class="fib-level">
<span>38.2%</span>
<span>$50,180</span>
</div>
<div class="fib-level">
<span>50.0%</span>
<span>$49,450</span>
</div>
<div class="fib-level">
<span>61.8%</span>
<span>$48,720</span>
</div>
<div class="fib-level">
<span>78.6%</span>
<span>$47,890</span>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
let priceChart;
let priceData = [];
let wavePoints = [];
// Initialize the chart
function initChart() {
const ctx = document.getElementById('priceChart').getContext('2d');
priceChart = new Chart(ctx, {
type: 'line',
data: {
labels: [],
datasets: [{
label: 'Price',
data: [],
borderColor: '#2a5298',
backgroundColor: 'rgba(42, 82, 152, 0.1)',
borderWidth: 2,
fill: true,
tension: 0.1
}, {
label: 'Elliott Waves',
data: [],
borderColor: '#ff6b6b',
backgroundColor: '#ff6b6b',
borderWidth: 3,
pointBackgroundColor: '#ff6b6b',
pointBorderColor: '#fff',
pointRadius: 6,
showLine: true,
fill: false
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
display: true,
position: 'top'
}
},
scales: {
y: {
beginAtZero: false,
grid: {
color: 'rgba(0, 0, 0, 0.1)'
}
},
x: {
grid: {
color: 'rgba(0, 0, 0, 0.1)'
}
}
},
interaction: {
intersect: false,
mode: 'index'
}
}
});
}
// Generate sample price data
function generateSampleData() {
const lines = [];
const startDate = new Date(Date.now() - 30 * 24 * 60 * 60 * 1000); // 30 days ago
let currentPrice = 45000;
// Generate Elliott Wave pattern
const wavePattern = [
{ direction: 1, strength: 0.08, duration: 5 }, // Wave 1
{ direction: -1, strength: 0.04, duration: 3 }, // Wave 2
{ direction: 1, strength: 0.12, duration: 7 }, // Wave 3
{ direction: -1, strength: 0.06, duration: 4 }, // Wave 4
{ direction: 1, strength: 0.10, duration: 6 } // Wave 5
];
let dataIndex = 0;
for (let wave of wavePattern) {
for (let i = 0; i < wave.duration; i++) {
const date = new Date(startDate.getTime() + (dataIndex * 24 * 60 * 60 * 1000));
const volatility = currentPrice * 0.02 * (Math.random() - 0.5);
const trend = currentPrice * wave.strength * wave.direction * (i / wave.duration);
const open = currentPrice;
const close = currentPrice + trend + volatility;
const high = Math.max(open, close) + currentPrice * 0.01 * Math.random();
const low = Math.min(open, close) - currentPrice * 0.01 * Math.random();
const volume = Math.floor(1000000 + Math.random() * 5000000);
lines.push(`${date.toISOString()},${open.toFixed(2)},${high.toFixed(2)},${low.toFixed(2)},${close.toFixed(2)},${volume}`);
currentPrice = close;
dataIndex++;
}
}
document.getElementById('priceData').value = lines.join('\n');
}
// Analyze price data and identify Elliott Waves
function analyzePriceData() {
const rawData = document.getElementById('priceData').value;
if (!rawData.trim()) {
alert('Please enter price data first');
return;
}
// Parse CSV data
const lines = rawData.trim().split('\n');
priceData = [];
for (let line of lines) {
const parts = line.split(',');
if (parts.length >= 5) {
priceData.push({
timestamp: new Date(parts[0]),
open: parseFloat(parts[1]),
high: parseFloat(parts[2]),
low: parseFloat(parts[3]),
close: parseFloat(parts[4]),
volume: parts[5] ? parseFloat(parts[5]) : 0
});
}
}
if (priceData.length === 0) {
alert('No valid price data found');
return;
}
// Identify pivot points
const pivots = findPivotPoints(priceData);
// Identify Elliott Wave pattern
const waves = identifyElliottWaves(pivots);
// Update chart
updateChart(priceData, waves);
// Update analysis
updateWaveAnalysis(waves);
}
// Find pivot points (local highs and lows)
function findPivotPoints(data) {
const pivots = [];
const lookback = Math.max(2, Math.floor(data.length * 0.02)); // 2% of data or minimum 2
for (let i = lookback; i < data.length - lookback; i++) {
const current = data[i];
let isHigh = true;
let isLow = true;
// Check if it's a local high
for (let j = i - lookback; j <= i + lookback; j++) {
if (j !== i && data[j].high >= current.high) {
isHigh = false;
break;
}
}
// Check if it's a local low
for (let j = i - lookback; j <= i + lookback; j++) {
if (j !== i && data[j].low <= current.low) {
isLow = false;
break;
}
}
if (isHigh) {
pivots.push({
index: i,
price: current.high,
type: 'high',
timestamp: current.timestamp
});
} else if (isLow) {
pivots.push({
index: i,
price: current.low,
type: 'low',
timestamp: current.timestamp
});
}
}
return pivots;
}
// Identify Elliott Wave patterns
function identifyElliottWaves(pivots) {
if (pivots.length < 9) { // Need at least 9 pivots for a 5-wave pattern
return [];
}
const waves = [];
const sensitivity = document.getElementById('sensitivity').value / 10;
// Simple Elliott Wave identification
// Look for alternating high-low pattern that fits 5-wave structure
let waveCount = 0;
let lastType = null;
for (let i = 0; i < Math.min(pivots.length, 9); i++) {
const pivot = pivots[i];
if (lastType === null || lastType !== pivot.type) {
waveCount++;
let waveType = 'impulse';
let direction = 'bullish';
if (waveCount === 2 || waveCount === 4) {
waveType = 'corrective';
}
if (pivot.type === 'low' && waveCount % 2 === 1) {
direction = 'bearish';
} else if (pivot.type === 'high' && waveCount % 2 === 0) {
direction = 'bearish';
}
waves.push({
number: waveCount,
type: waveType,
direction: direction,
price: pivot.price,
index: pivot.index,
timestamp: pivot.timestamp,
pivotType: pivot.type
});
lastType = pivot.type;
if (waveCount >= 5) break;
}
}
return waves;
}
// Update the chart with wave analysis
function updateChart(data, waves) {
const labels = data.map(d => d.timestamp.toLocaleDateString());
const prices = data.map(d => d.close);
// Create wave points for visualization
const wavePoints = waves.map(wave => ({
x: wave.index,
y: wave.price
}));
priceChart.data.labels = labels;
priceChart.data.datasets[0].data = prices;
priceChart.data.datasets[1].data = wavePoints;
priceChart.update();
}
// Update wave analysis display
function updateWaveAnalysis(waves) {
const waveCountDisplay = document.getElementById('waveCountDisplay');
const analysisSummary = document.getElementById('analysisSummary');
const fibonacciLevels = document.getElementById('fibonacciLevels');
// Update wave count
waveCountDisplay.innerHTML = '';
waves.forEach((wave, index) => {
const waveItem = document.createElement('div');
waveItem.className = 'wave-item';
const trendClass = wave.direction === 'bullish' ? 'bullish' : 'bearish';
const priceFormatted = `$${wave.price.toLocaleString()}`;
waveItem.innerHTML = `
<div class="wave-number">${wave.number}</div>
<div class="wave-details">
<div>${wave.type === 'impulse' ? 'Impulse' : 'Corrective'} Wave ${wave.number}</div>
<div class="wave-price">${priceFormatted}</div>
</div>
<span class="trend-indicator ${trendClass}">${wave.direction}</span>
`;
waveCountDisplay.appendChild(waveItem);
});
// Update analysis summary
const currentWave = waves.length > 0 ? waves[waves.length - 1] : null;
const confidence = Math.floor(60 + Math.random() * 30); // Simulated confidence
if (currentWave) {
const trend = currentWave.direction === 'bullish' ? 'Bullish' : 'Bearish';
const trendClass = currentWave.direction === 'bullish' ? 'bullish' : 'bearish';
analysisSummary.innerHTML = `
<p><strong>Current Wave:</strong> Wave ${currentWave.number} ${currentWave.type}</p>
<p><strong>Pattern:</strong> ${waves.length}-Wave ${waves.length === 5 ? 'Complete' : 'In Progress'} Structure</p>
<p><strong>Trend:</strong> <span class="trend-indicator ${trendClass}">${trend}</span></p>
<p><strong>Confidence:</strong> ${confidence}%</p>
<p><strong>Current Price:</strong> $${currentWave.price.toLocaleString()}</p>
`;
}
// Update Fibonacci levels (simplified calculation)
if (waves.length >= 2) {
const high = Math.max(...waves.map(w => w.price));
const low = Math.min(...waves.map(w => w.price));
const range = high - low;
const fibLevels = [0.236, 0.382, 0.5, 0.618, 0.786];
fibonacciLevels.innerHTML = '<h4>Fibonacci Retracement Levels</h4>';
fibLevels.forEach(level => {
const price = high - (range * level);
const levelDiv = document.createElement('div');
levelDiv.className = 'fib-level';
levelDiv.innerHTML = `
<span>${(level * 100).toFixed(1)}%</span>
<span>$${price.toLocaleString()}</span>
`;
fibonacciLevels.appendChild(levelDiv);
});
}
}
// Initialize the application
document.addEventListener('DOMContentLoaded', function() {
initChart();
generateSampleData(); // Generate sample data on load
analyzePriceData(); // Analyze it immediately
});
// Add event listeners for real-time updates
document.getElementById('sensitivity').addEventListener('input', function() {
if (priceData.length > 0) {
analyzePriceData();
}
});
document.getElementById('waveType').addEventListener('change', function() {
if (priceData.length > 0) {
analyzePriceData();
}
});
</script>
</body>
</html>
```
This Elliott Wave Analysis Tool provides:
**Key Features:**
- **Interactive Chart**: Visualizes price data and Elliott Wave patterns
- **Automatic Wave Detection**: Identifies 5-wave impulse and 3-wave corrective patterns
- **Fibonacci Integration**: Shows retracement levels for wave analysis
- **Real-time Analysis**: Updates wave count as you adjust sensitivity settings
- **Data Import**: Accepts CSV price data or generates sample data
- **Wave Classification**: Distinguishes between impulse and corrective waves
**Analysis Components:**
- **Wave Count Display**: Shows each wave with direction and price levels
- **Trend Analysis**: Identifies bullish/bearish momentum
- **Confidence Scoring**: Provides reliability assessment
- **Support/Resistance**: Fibonacci retracement levels
- **Pattern Recognition**: 5-wave impulse structure detection
**Controls:**
- **Timeframe Selection**: Multiple chart timeframes
- **Wave Type**: Toggle between impulse/corrective analysis
- **Sensitivity Adjustment**: Fine-tune wave detection
- **Fibonacci Toggle**: Show/hide retracement levels
The tool uses pivot point analysis to identify local highs and lows, then applies Elliott Wave principles to classify the wave structure. It's designed for educational purposes and provides a foundation for more advanced Elliott Wave analysis implementations.Drag to resize