How to Add trades and zoomable feature.
Closed this issue · 1 comments
mng4 commented
I created a chart with the help of codes in http://techanjs.org/ . I'm not able to figure out how to add zoom function and declare trades data.
If you have to add those to feature how would you do?
mng4 commented
`var techanSite = techanSite || {};
techanSite.bigchart = function(a, b) {
"use strict";
function c(c) {
function d(d) {
var l = d.append("svg"),
s = l.append("defs");
s.append("clipPath").attr("id", "ohlcClip").append("rect").attr("x", 0).attr("y", 0), s.append("clipPath").attr("id", "supstanceClip").append("rect").attr("x", -g.margin.left).attr("y", 0), s.selectAll(".indicatorClip").data([0, 1]).enter().append("clipPath").attr("id", function(a, b) {
return "indicatorClip-" + b
}).attr("class", "indicatorClip").append("rect").attr("x", 0), l.append("text").attr("class", "version").style("text-anchor", "end").text("TechanJS v" + b.version + ", D3 v" + a.version), l = l.append("g").attr("class", "chart").attr("transform", "translate(" + g.margin.left + "," + g.margin.top + ")"), l.append("text").attr("class", "symbol").attr("x", 5).attr("y", 15).text(c.name), l.append("g").attr("class", "x axis bottom"), l.append("g").attr("class", "x axis top");
var t = l.append("g").attr("class", "ohlc").attr("transform", "translate(0,0)");
t.append("g").attr("class", "y axis"), t.append("g").attr("class", "closeValue annotation up"), t.append("g").attr("class", "volume").attr("clip-path", "url(#ohlcClip)"), t.append("g").attr("class", "candlestick").attr("clip-path", "url(#ohlcClip)"), t.append("g").attr("class", "indicator sma ma-0").attr("clip-path", "url(#ohlcClip)"), t.append("g").attr("class", "indicator sma ma-1").attr("clip-path", "url(#ohlcClip)"), t.append("g").attr("class", "indicator ema ma-2").attr("clip-path", "url(#ohlcClip)"), t.append("g").attr("class", "percent axis"), t.append("g").attr("class", "volume axis");
var u = l.selectAll("svg > g.indicator").data(["macd", "rsi"]).enter().append("g").attr("class", function(a) {
return a + " indicator"
});
u.append("g").attr("class", "axis right"), u.append("g").attr("class", "axis left"), u.append("g").attr("class", "indicator-plot").attr("clip-path", function(a, b) {
return "url(#indicatorClip-" + b + ")"
}), l.append("g").attr("class", "crosshair ohlc"), l.append("g").attr("class", "crosshair macd"), l.append("g").attr("class", "crosshair rsi"), l.append("g").attr("class", "trendlines analysis").attr("clip-path", "url(#ohlcClip)"), l.append("g").attr("class", "supstances analysis");
var v = n.accessor(),
w = c.preroll,
x = h.slice(w);
i.domain(b.scale.plot.time(h).domain()), j.domain(b.scale.plot.ohlc(x).domain()), k.domain(b.scale.plot.percent(j, v(h[w])).domain()), m.domain(b.scale.plot.volume(x).domain());
var z = b.indicator.macd()(h);
D.domain(b.scale.plot.macd(z).domain());
var A = b.indicator.rsi()(h);
E.domain(b.scale.plot.rsi(A).domain()), i.zoomable().domain([w, h.length]), e(d), l.select("g.candlestick").datum(h).call(n), l.select("g.closeValue.annotation").datum([h[h.length - 1]]).call(y), l.select("g.volume").datum(h).call(r), l.select("g.sma.ma-0").datum(b.indicator.sma().period(10)(h)).call(o), l.select("g.sma.ma-1").datum(b.indicator.sma().period(20)(h)).call(p), l.select("g.ema.ma-2").datum(b.indicator.ema().period(50)(h)).call(q), l.select("g.macd .indicator-plot").datum(z).call(F), l.select("g.rsi .indicator-plot").datum(A).call(K), l.select("g.crosshair.ohlc").call(P), l.select("g.crosshair.macd").call(Q), l.select("g.crosshair.rsi").call(R), l.select("g.trendlines").datum(c.trendlines).call(S).call(S.drag), l.select("g.supstances").datum(c.supstances).call(T).call(T.drag), d.call(f)
}
function e(a) {
g.width = a.node().clientWidth, g.height = a.node().clientHeight, g.plot.width = g.width - g.margin.left - g.margin.right, g.plot.height = g.height - g.margin.top - g.margin.bottom, g.ohlc.height = .67777777 * g.plot.height, g.indicator.height = .144444 * g.plot.height, g.indicator.padding = .01111111111 * g.plot.height, g.indicator.top = g.ohlc.height + g.indicator.padding, g.indicator.bottom = g.indicator.top + g.indicator.height + g.indicator.padding;
var b = [0, g.plot.width],
c = [g.ohlc.height, 0],
d = Math.min(10, Math.round(g.height / 70)),
e = Math.min(10, Math.round(g.width / 130));
l.range([g.indicator.top, g.indicator.bottom]), i.range(b), s.ticks(e), t.ticks(e), j.range(c), w.ticks(d), k.range(j.range()), z.ticks(d), m.range([c[0], c[0] - .2 * c[0]]), B.ticks(Math.min(3, Math.round(g.height / 150))), u.translate([0, g.plot.height]), x.translate([b[1], 0]), y.translate([b[1], 0]), D.range([l(0) + g.indicator.height, l(0)]), E.range([l(1) + g.indicator.height, l(1)]), H.translate([b[1], 0]), M.translate([b[1], 0]), P.verticalWireRange([0, g.plot.height]), Q.verticalWireRange([0, g.plot.height]), R.verticalWireRange([0, g.plot.height]), a.select("svg").attr("width", g.width).attr("height", g.height), a.select("text.version").attr("x", g.width - 5).attr("y", g.height), a.selectAll("defs #ohlcClip > rect").attr("width", g.plot.width).attr("height", g.ohlc.height), a.selectAll("defs #supstanceClip > rect").attr("width", g.width).attr("height", g.ohlc.height), a.selectAll("defs .indicatorClip > rect").attr("y", function(a, b) {
return l(b)
}).attr("width", g.plot.width).attr("height", g.indicator.height), a.select("g.x.axis.bottom").attr("transform", "translate(0," + g.plot.height + ")"), a.select("g.ohlc g.y.axis").attr("transform", "translate(" + b[1] + ",0)"), a.selectAll("g.indicator g.axis.right").attr("transform", "translate(" + b[1] + ",0)"), a.selectAll("g.indicator g.axis.left").attr("transform", "translate(" + b[0] + ",0)")
}
function f(a) {
var b = a.select("svg");
b.select("g.x.axis.bottom").call(s), b.select("g.x.axis.top").call(t), b.select("g.ohlc .axis").call(w), b.select("g.volume.axis").call(B), b.select("g.percent.axis").call(z), b.select("g.macd .axis.right").call(G), b.select("g.rsi .axis.right").call(L), b.select("g.macd .axis.left").call(I), b.select("g.rsi .axis.left").call(N), b.select("g.candlestick").call(n.refresh), b.select("g.closeValue.annotation").call(y.refresh), b.select("g.volume").call(r.refresh), b.select("g .sma.ma-0").call(o.refresh), b.select("g .sma.ma-1").call(p.refresh), b.select("g .ema.ma-2").call(q.refresh), b.select("g.macd .indicator-plot").call(F.refresh), b.select("g.rsi .indicator-plot").call(K.refresh), b.select("g.crosshair.ohlc").call(P.refresh), b.select("g.crosshair.macd").call(Q.refresh), b.select("g.crosshair.rsi").call(R.refresh), b.select("g.trendlines").call(S.refresh), b.select("g.supstances").call(T.refresh).selectAll("g.data .supstance").attr("clip-path", "url(#ohlcClip)")
}
var g = {
width: null,
height: null,
margin: {
top: 25,
right: 50,
bottom: 25,
left: 50
},
plot: {
width: null,
height: null
},
ohlc: {
height: null
},
indicator: {
height: null,
padding: null,
top: null,
bottom: null
}
},
h = c.ohlc,
i = b.scale.financetime(),
j = a.scaleLinear(),
k = j.copy(),
l = a.scaleLinear(),
m = a.scaleLinear(),
n = b.plot.candlestick().xScale(i).yScale(j),
o = b.plot.sma().xScale(i).yScale(j),
p = b.plot.sma().xScale(i).yScale(j),
q = b.plot.ema().xScale(i).yScale(j),
r = b.plot.volume().accessor(n.accessor()).xScale(i).yScale(m),
s = a.axisBottom(i),
t = a.axisTop(i),
u = b.plot.axisannotation().orient("bottom").axis(s).format(a.timeFormat("%Y-%m-%d")).width(65),
v = b.plot.axisannotation().orient("top").axis(t).format(a.timeFormat("%Y-%m-%d")).width(65),
w = a.axisRight(j),
x = b.plot.axisannotation().orient("right").axis(w).format(a.format(",.2f")),
y = b.plot.axisannotation().orient("right").accessor(n.accessor()).axis(w).format(a.format(",.2f")),
z = a.axisLeft(k).tickFormat(a.format("+.1%")),
A = b.plot.axisannotation().orient("left").axis(z),
B = a.axisRight(m).ticks(3).tickFormat(a.format(",.3s")),
C = b.plot.axisannotation().orient("right").axis(B).width(35),
D = a.scaleLinear(),
E = a.scaleLinear(),
F = b.plot.macd().xScale(i).yScale(D),
G = a.axisRight(D).ticks(3),
H = b.plot.axisannotation().orient("right").axis(G).format(a.format(",.2s")),
I = a.axisLeft(D).ticks(3),
J = b.plot.axisannotation().orient("left").axis(I).format(a.format(",.2s")),
K = b.plot.rsi().xScale(i).yScale(E),
L = a.axisRight(E).ticks(3),
M = b.plot.axisannotation().orient("right").axis(L).format(a.format(",.2s")),
N = a.axisLeft(E).ticks(3),
O = b.plot.axisannotation().orient("left").axis(N).format(a.format(",.2s")),
P = b.plot.crosshair().xScale(i).yScale(j).xAnnotation([u, v]).yAnnotation([x, A, C]),
Q = b.plot.crosshair().xScale(i).yScale(D).xAnnotation([u, v]).yAnnotation([H, J]),
R = b.plot.crosshair().xScale(i).yScale(E).xAnnotation([u, v]).yAnnotation([M, O]),
S = b.plot.trendline().xScale(i).yScale(j),
T = b.plot.supstance().xScale(i).yScale(j).annotation([x, A]);
return d.resize = function(a) {
a.call(e).call(f)
}, d
}
return c(techanSite.data.array[Math.round(Math.random())])
}(d3, techan);`