olli/dabo
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

initial charts

Browse Source
This commit is contained in:
olli 2024-07-15 16:34:01 +02:00
parent 9fab344720
commit 2bdc7d3ab2
2 changed files with 365 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
data/charts.html Normal file
View File

@ -0,0 +1,23 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0"
/>
<title>Charts</title>
<script type="text/javascript" src="lightweight-charts.standalone.production.js"></script>
<style>
body {
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<div id="container" style="position: absolute; width: 100%; height: 100%"></div>
<script type="text/javascript" src="charts.js"></script>
</body>
</html>

342
data/charts.js Normal file
View File

@ -0,0 +1,342 @@
const urlParams = new URLSearchParams(window.location.search);
const symbol = urlParams.get('symbol');
const time = urlParams.get('time');
//window.dispatchEvent(new Event('resize'));
function timeToLocal(originalTime) {
const d = new Date(originalTime * 1000);
return Date.UTC(d.getFullYear(), d.getMonth(), d.getDate(), d.getHours(), d.getMinutes(), d.getSeconds(), d.getMilliseconds()) / 1000;
}
function parseCSV(data) {
const rows = data.split("\n");
const result = [];
let start = Math.max(rows.length - 298, 0);
let lastElements = rows.slice(start)
for (let i = start; i < rows.length; i++) {
const cols = rows[i].split(",");
if (cols.length >= 23 && cols.every(element => element !== undefined && element !== null)) { // check for existing lines
// parse the date so seconds since 1970
cols[0] = Date.parse(cols[0])/1000,result.push(cols);
cols[0] = timeToLocal(cols[0]);
// coloring for MACD-Histogram
if (cols[20] < 0) {
cols[100] = "orange";
if (cols[23] > 20) {
cols[100] = "red";
}
}
else {
cols[100] = "lightgreen";
if (cols[23] > 20) {
cols[100] = "green";
}
}
}
else {
console.log("invalid line on linenr " + i + ": " +rows[i]);
}
}
return result;
}
// Create the Lightweight Chart within the container element
const chart = LightweightCharts.createChart(document.getElementById('container'),
{
rightPriceScale: {
minimumWidth: 100,
borderVisible: false
},
height: 500,
crosshair: {
mode: 0,
},
timeScale: {
timeVisible: true,
secondsVisible: false,
},
layout: {
background: {
type: 'solid',
color: '#222',
},
textColor: '#DDD',
},
grid: {
vertLines: { color: '#444' },
horzLines: { color: '#444' },
},
});
chart.applyOptions({
watermark: {
visible: true,
fontSize: 18,
horzAlign: 'top',
vertAlign: 'left',
color: '#DDD',
text: symbol + " " + time,
}});
// define chart
const candleSeries = chart.addCandlestickSeries();
const lineSeriesEMA12 = chart.addLineSeries({ color: 'red', lineWidth: 1, priceLineVisible: false});
const lineSeriesEMA26 = chart.addLineSeries({ color: 'pink', lineWidth: 1, lineStyle: 2, priceLineVisible: false});
const lineSeriesEMA50 = chart.addLineSeries({ color: 'cyan', lineWidth: 1, priceLineVisible: false});
const lineSeriesEMA100 = chart.addLineSeries({ color: 'yellow', lineWidth: 1, priceLineVisible: false});
const lineSeriesEMA200 = chart.addLineSeries({ color: 'white', lineWidth: 1, priceLineVisible: false});
const lineSeriesEMA400 = chart.addLineSeries({ color: 'orange', lineWidth: 1, priceLineVisible: false});
const lineSeriesEMA800 = chart.addLineSeries({ color: 'purple', lineWidth: 1, priceLineVisible: false});
// RSI Chart
const chartrsi = LightweightCharts.createChart(document.getElementById("container"),
{
rightPriceScale: {
minimumWidth: 100,
borderVisible: false
},
height: 200,
timeScale: {
visible: false,
},
layout: {
background: {
type: 'solid',
color: '#222',
},
textColor: '#DDD',
},
grid: {
vertLines: { color: '#444' },
horzLines: { color: '#444' },
},
});
chartrsi.applyOptions({
watermark: {
visible: true,
fontSize: 18,
horzAlign: 'top',
vertAlign: 'left',
color: '#DDD',
text: 'RSI 5,14,21',
}});
const lineSeriesRSI5 = chartrsi.addLineSeries({ color: 'orange', lineWidth: 1, lineStyle: 2, priceLineVisible: false});
const lineSeriesRSI14 = chartrsi.addLineSeries({ color: 'yellow', lineWidth: 2, priceLineVisible: false});
const lineSeriesRSI21 = chartrsi.addLineSeries({ color: 'lightgreen', lineWidth: 1, lineStyle: 2, priceLineVisible: false});
// MACD Chart
const chartmacd = LightweightCharts.createChart(document.getElementById("container"),
{
rightPriceScale: {
minimumWidth: 100,
borderVisible: false
},
height: 200,
timeScale: {
timeVisible: true,
secondsVisible: false,
},
layout: {
background: {
type: 'solid',
color: '#222',
},
textColor: '#DDD',
},
grid: {
vertLines: { color: '#444' },
horzLines: { color: '#444' },
},
});
chartmacd.applyOptions({
watermark: {
visible: true,
fontSize: 18,
horzAlign: 'top',
vertAlign: 'left',
color: '#DDD',
text: 'MACD 12 26',
}});
const lineSeriesMACD = chartmacd.addLineSeries({ color: 'blue', lineWidth: 1, lineStyle: 0, priceLineVisible: false});
const lineSeriesMACDSignal = chartmacd.addLineSeries({ color: 'orange', lineWidth: 1, lineStyle: 0, priceLineVisible: false});
const histogramSeriesMACD = chartmacd.addHistogramSeries({
priceFormat: {
type: 'volume',
color: 'orange',
},
//priceScaleId: '', // set as an overlay by setting a blank priceScaleId
});
fetch("/botdata/asset-histories/" + symbol + ".history." + time + ".csv")
.then(response => response.text())
.then(data => {
const parsedData = parseCSV(data);
// OHLC Data
const bars = parsedData.map(item => ({
time: item[0],
open: item[1],
high: item[2],
low: item[3],
close: item[4]
}));
candleSeries.setData(bars);
// EMA Data
candleSeries.setData(bars);
const lineSeriesEMA12Data = parsedData.map(item => ({
time: item[0],
value: item[8]
}));
lineSeriesEMA12.setData(lineSeriesEMA12Data);
const lineSeriesEMA26Data = parsedData.map(item => ({
time: item[0],
value: item[9]
}));
lineSeriesEMA26.setData(lineSeriesEMA26Data);
const lineSeriesEMA50Data = parsedData.map(item => ({
time: item[0],
value: item[10]
}));
lineSeriesEMA50.setData(lineSeriesEMA50Data);
const lineSeriesEMA100Data = parsedData.map(item => ({
time: item[0],
value: item[11]
}));
lineSeriesEMA100.setData(lineSeriesEMA100Data);
const lineSeriesEMA200Data = parsedData.map(item => ({
time: item[0],
value: item[12]
}));
lineSeriesEMA200.setData(lineSeriesEMA200Data);
const lineSeriesEMA400Data = parsedData.map(item => ({
time: item[0],
value: item[13]
}));
lineSeriesEMA400.setData(lineSeriesEMA400Data);
const lineSeriesEMA800Data = parsedData.map(item => ({
time: item[0],
value: item[14]
}));
lineSeriesEMA800.setData(lineSeriesEMA800Data);
// RSI Data
const lineSeriesRSI5Data = parsedData.map(item => ({
time: item[0],
value: item[15]
}));
lineSeriesRSI5.setData(lineSeriesRSI5Data);
const lineSeriesRSI14Data = parsedData.map(item => ({
time: item[0],
value: item[16]
}));
lineSeriesRSI14.setData(lineSeriesRSI14Data);
const lineSeriesRSI21Data = parsedData.map(item => ({
time: item[0],
value: item[17]
}));
lineSeriesRSI21.setData(lineSeriesRSI21Data);
// MACD Data
const lineSeriesMACDData = parsedData.map(item => ({
time: item[0],
value: item[18]
}));
lineSeriesMACD.setData(lineSeriesMACDData);
const lineSeriesMACDSignalData = parsedData.map(item => ({
time: item[0],
value: item[19]
}));
lineSeriesMACDSignal.setData(lineSeriesMACDSignalData);
const histogramSeriesMACDData = parsedData.map(item => ({
time: item[0],
value: item[20],
color: item[100]
}));
histogramSeriesMACD.setData(histogramSeriesMACDData);
});
// Lines for price levels
fetch("/botdata/asset-histories/" + symbol + ".history.csv.levels")
.then(response => response.text())
.then(text => {
const levels = text.split('\n');
levels.forEach(function(level) {
candleSeries.createPriceLine({price: level, color: "darkblue", lineWidth: 0.5, lineStyle: 0, axisLabelVisible: true, title: 'Level'});
});
});
// Sync charts timeScale
chart.timeScale().fitContent();
chart.timeScale().subscribeVisibleLogicalRangeChange(timeRange => {
chartrsi.timeScale().setVisibleLogicalRange(timeRange);
chartmacd.timeScale().setVisibleLogicalRange(timeRange);
});
chartrsi.timeScale().subscribeVisibleLogicalRangeChange(timeRange => {
chart.timeScale().setVisibleLogicalRange(timeRange);
});
chartmacd.timeScale().subscribeVisibleLogicalRangeChange(timeRange => {
chart.timeScale().setVisibleLogicalRange(timeRange);
});
function getCrosshairDataPoint(series, param) {
if (!param.time) {
return null;
}
const dataPoint = param.seriesData.get(series);
return dataPoint || null;
}
function syncCrosshair(chart, series, dataPoint) {
if (dataPoint) {
chart.setCrosshairPosition(dataPoint.value, dataPoint.time, series);
return;
}
chart.clearCrosshairPosition();
}
chart.subscribeCrosshairMove(param => {
const dataPoint = getCrosshairDataPoint(lineSeriesEMA50, param);
syncCrosshair(chartrsi, lineSeriesRSI14, dataPoint);
const dataPointmacd = getCrosshairDataPoint(lineSeriesEMA50, param);
syncCrosshair(chartmacd, lineSeriesMACD, dataPointmacd);
});
chartrsi.subscribeCrosshairMove(param => {
const dataPoint = getCrosshairDataPoint(lineSeriesRSI14, param);
syncCrosshair(chart, lineSeriesEMA50, dataPoint);
const dataPointmacd = getCrosshairDataPoint(lineSeriesRSI14, param);
syncCrosshair(chartmacd, lineSeriesMACD, dataPointmacd);
});
chartmacd.subscribeCrosshairMove(param => {
const dataPoint = getCrosshairDataPoint(lineSeriesMACD, param);
syncCrosshair(chart, lineSeriesEMA50, dataPoint);
const dataPointrsi = getCrosshairDataPoint(lineSeriesMACD, param);
syncCrosshair(chartrsi, lineSeriesRSI14, dataPointrsi);
});