@rongmz/trading-charts
Version:
This is a d3 based charting library for stocks and finance world. If the question is, why another chart library? - Coz, I find no "open-source" library fits my requirements.
103 lines • 3.56 kB
HTML
<html><head><meta name="viewport" content="width=device-width,initial-scale=1"/><title>@rongmz/trading-charts</title><style>html,
body {
margin: 0;
padding: 0;
}</style></head><body><div id="root"></div><script>function checkLoadComplete() {
if (!window.rongmz) setTimeout(checkLoadComplete, 1000);
else {
const chart = new rongmz.TradingChart(
{
candle: {
candle: {
type: 'candle',
dataId: 'candle',
tsValue: d => new Date(d[0]),
data: d => ({ o: d[1], h: d[3], l: d[2], c: d[4] }),
color: d => (d[1] > d[4]) ? '#e41a1c' : '#4daf4a'
},
hlc: {
type: 'area',
dataId: 'candle',
tsValue: d => new Date(d[0]),
data: d => (d[3] + 3),
color: 'red',
baseY: d => (d[2] - 3),
colorBaseY: '#007723',
areaColor: '#8cfead33',
}
},
volume: {
volume: {
type: 'bar',
dataId: 'candle',
tsValue: d => new Date(d[0]),
data: d => d[5],
color: d => (d[1] > d[4]) ? '#e41a1c90' : '#4daf4a90'
}
},
macd: {
macdLine: {
type: 'dashed-line',
dataId: 'macd',
tsValue: d => new Date(d.ts),
data: d => d.v,
color: 'red',
},
macdLineBar: {
type: 'var-bar',
dataId: 'macd',
tsValue: d => new Date(d.ts),
data: d => d.v,
color: d => (d.v > -0.05) ? '#e41a1c90' : '#4daf4a90',
baseY: -0.05,
}
},
macdArea: {
macdLine: {
type: 'area',
dataId: 'macd',
tsValue: d => new Date(d.ts),
data: d => d.v,
// baseY: -0.05
}
}
},
{
width: 900, height: 700, watermarkText: '@rongmz/trading-charts', subGraph: {
candle: {
lineWidth: 1,
title: 'JINDALSTEL_NSE',
titlePlacement: 'top-right',
titleFontSize: '20px Arial',
titleFontColor: '#000',
},
volume: {
yScaleTitle: 'Volume'
}
}
}
);
// fetch data and set
fetch("/data.json", {
"headers": { "accept": "application/json" },
"method": "GET"
}).then(res => res.json())
.then(data => {
console.log('data=', data);
chart.setData(data);
});
// fetch data and set
fetch("/annotations.json", {
"headers": { "accept": "application/json" },
"method": "GET"
}).then(res => res.json())
.then(data => {
console.log('annotations json=', data);
chart.setAnnotations(data);
});
chart.initialize();
// attach the chart
chart.attach(document.getElementById('root'));
}
}
checkLoadComplete();</script><script src="%40rongmz/trading-charts.js"></script></body></html>