Skip to content

Commit

Permalink
top chart changes
Browse files Browse the repository at this point in the history
  • Loading branch information
@webmaster444
webmaster444 committed Oct 16, 2018
1 parent 6390673 commit b6e6b18
Show file tree
Hide file tree
Showing 8 changed files with 116 additions and 209 deletions.
58 changes: 13 additions & 45 deletions bottomchart.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,19 +71,14 @@ function bottomChart() {
})]).nice();

// y.domain([minimal, maximal]).nice();

// var barwidth = width / genData.length;


var tmp_divider = TCount[period][interval];
var barwidth = width / 8;

var candlewidth = (Math.floor(barwidth * 0.9) / 2) * 2 + 1;
var delta = Math.round((barwidth - candlewidth) / 2);

var valuelinepv = d3.svg.line().x(function(d) {return x(d.Date);}).y(function(d) {return tmp_y(d['PV']);});
var valuelinetv = d3.svg.line().x(function(d) {return x(d.Date);}).y(function(d) {return tmp_y(d['TV']);});
var valuelinenv = d3.svg.line().x(function(d) {return x(d.Date);}).y(function(d) {return tmp_y(d['NV']);});
var valuelineps = d3.svg.line().x(function(d) {return x(d.Date);}).y(function(d) {return tmp_y(d['PS']);});
var valuelineema12 = d3.svg.line().x(function(d) {return x(d.Date);}).y(function(d) {return tmp_y(d['ema']);});
var valuelineema26 = d3.svg.line().x(function(d) {return x(d.Date);}).y(function(d) {return tmp_y(d['ema']);});

Expand All @@ -93,7 +88,7 @@ function bottomChart() {
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

svg.append("defs").append("clipPath")
.attr("id", "clip")
.attr("id", "clip2")
.append("rect")
.attr("width", width)
.attr("height", height);
Expand Down Expand Up @@ -238,8 +233,7 @@ function bottomChart() {
})
.on("mousemove", mousemove)
.call(zoom).on("wheel.zoom", null);

console.log(genData);

function mousemove() {
var x0 = x.invert(d3.mouse(this)[0]);
var y0 = y.invert(d3.mouse(this)[1]);
Expand Down Expand Up @@ -274,19 +268,19 @@ function bottomChart() {

}

function zoomed() {
console.log('here');
function zoomed() {
var vis_startDomain = Date.parse(x.domain()[0]);
var vis_endDomain = Date.parse(x.domain()[1]);
svg.select(".xaxis").call(xAxis);


var new_genData = genData.filter(function(d){
if(d.Date > vis_startDomain && d.Date <vis_endDomain){
if(d.Date > vis_startDomain && d.Date <=vis_endDomain){
return d;
}
});

console.log(new_genData);

pan_y.domain([d3.min(new_genData, function(d) {
return d.l;
}), d3.max(new_genData, function(d) {
Expand Down Expand Up @@ -326,46 +320,20 @@ function bottomChart() {
});;

bar_y.domain([0, d3.max(new_genData, function(d) {
return d["Volume"];
return d["v"];
})]).nice();

// d3.selectAll('.volume').data(genData)
d3.selectAll('.volume').data(genData).attr("x", function(d) {
return x(d.Date) - candlewidth/2
return x(d.Date) - barwidth / 2;
}).attr("y", function(d) {
return bar_y(d['Volume']);
return bar_y(d['v']);
}).attr("height", function(d) {
return bar_y(0) - bar_y(d['Volume']);
return bar_y(0) - bar_y(d['v']);
});

tmp_y.domain(d3.extent(new_genData, function(d) {return d['PV'];})).nice();
d3.selectAll(".pvline")
.attr("d", valuelinepv(new_genData));

tmp_y.domain(d3.extent(new_genData, function(d) {return d['PS'];})).nice();
d3.selectAll(".psline")
.attr("d", valuelineps(new_genData));

tmp_y.domain(d3.extent(new_genData, function(d) {return d['TV'];})).nice();
d3.selectAll(".tvline")
.attr("d", valuelinetv(new_genData));

tmp_y.domain(d3.extent(new_genData, function(d) {return d['NV'];})).nice();
d3.selectAll(".nvline")
.attr("d", valuelinenv(new_genData));


// tmp_y.domain(d3.extent(genData, function(d) {return d['PS'];})).nice();
// d3.selectAll(".psline").attr("d", valuelineps(genData));

// tmp_y.domain(d3.extent(genData, function(d) {return d['TV'];})).nice();
// d3.selectAll(".tvline").attr("d", valuelinetv(genData));

// tmp_y.domain(d3.extent(genData, function(d) {return d['NV'];})).nice();
// d3.selectAll(".nvline").attr("d", valuelinenv(genData));

var new_ema12 = ema12.filter(function(d){
if(d.Date > vis_startDomain && d.Date <vis_endDomain){
if(d.Date > vis_startDomain && d.Date <=vis_endDomain){
return d;
}
});
Expand All @@ -377,7 +345,7 @@ function bottomChart() {
// d3.selectAll(".ema12line").attr("d", valuelineema12(ema12));

var new_ema26 = ema26.filter(function(d){
if(d.Date > vis_startDomain && d.Date <vis_endDomain){
if(d.Date > vis_startDomain && d.Date <=vis_endDomain){
return d;
}
});
Expand Down
35 changes: 12 additions & 23 deletions csareachart.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,8 +20,10 @@ function areachart() {
// var x = d3.time.scale()
// .domain([startDomain, endDomain])
// .range([width / genData.length / 2, width - width / genData.length / 2]);

var x = d3.scale.ordinal().domain(genData.map(function(d){return d.dt})).rangeBands([0,width]);

var x = d3.time.scale()
.domain([startDomain, endDomain])
.range([width / 8 / 2, (width - width / 8 / 2 )]);

var y = d3.scale.linear()
.rangeRound([height, 0]);
Expand All @@ -39,15 +41,15 @@ function areachart() {
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var new1_genData = data.filter(function(d){
if(d.Date > startDomain && d.Date <endDomain){
if(d.Date > startDomain && d.Date <= endDomain){
return d;
}
});

y.domain(d3.extent(data, function(d) {
y.domain(d3.extent(new1_genData, function(d) {
return d[MValue];
}));

})).nice();
console.log(y.domain());

var xtickdelta = Math.ceil(60 / (width / data.length))
xAxis.tickValues(x.domain().filter(function(d, i) {
Expand All @@ -59,24 +61,11 @@ function areachart() {
.attr("transform", "translate(" + width + ",0)")
.call(yAxis.orient("right").tickFormat("").tickSize(0));

// var barwidth = width / genData.length;
var barwidth = x.rangeBand();
var fillwidth = (Math.floor(barwidth * 0.9) / 2) * 2 + 1;
var bardelta = Math.round((barwidth - fillwidth) / 2);

var valueline = d3.svg.line()
.x(function(d) {
return x(d.dt) + barwidth / 2;
})
.y(function(d) {
return y(d[MValue]);
}).interpolate('basis');

var area = d3.svg.area()
.x(function(d) { return x(d.dt)+barwidth/2; })
.y0(height)
.y1(function(d) { return y(d[MValue]); })
.interpolate('basis');
.x(function(d) { return x(d.Date); })
.y0(height)
.y1(function(d) { return y(d[MValue]); })
.interpolate('basis');

var defs = svg.append("defs");

Expand Down
13 changes: 8 additions & 5 deletions csbars.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,10 @@ function barchart() {
}
});

var x = d3.scale.ordinal().domain(new1_genData.map(function(d){return d.Date})).rangeBands([0,width]);
// var x = d3.scale.ordinal().domain(new1_genData.map(function(d){return d.Date})).rangeBands([0,width]);
var x = d3.time.scale()
.domain([startDomain, endDomain])
.range([width / 8 / 2, (width - width / 8 / 2 )]);
var y = d3.scale.linear()
.rangeRound([height, 0]);

Expand All @@ -44,10 +47,10 @@ function barchart() {
.attr("transform", "translate(" + width + ",0)")
.call(yAxis.orient("right").tickFormat("").tickSize(0));

var fillwidth = x.rangeBand();
var barwidth = width / 8;

var mbar = svg.selectAll("." + mname + "bar")
.data([new1_genData])
.data([data])
.enter().append("g")
.attr("class", mname + "bar");

Expand All @@ -58,7 +61,7 @@ function barchart() {
.enter().append("rect")
.attr("class", mname + "fill")
.attr("x", function(d) {
return x(d.Date);
return x(d.Date) - barwidth / 2;
})
.attr("y", function(d) {
return y(d[MValue]);
Expand All @@ -69,7 +72,7 @@ function barchart() {
.attr("height", function(d) {
return y(0) - y(d[MValue]);
})
.attr("width", fillwidth);
.attr("width", barwidth);
});
} // barrender
barrender.mname = function(value) {
Expand Down
5 changes: 4 additions & 1 deletion cschart.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -267,13 +267,16 @@ rect.pane{
display: block;
}

g.sticks,g.candles, g.volumebar{
g.sticks,g.candles, g.volumebar, g.sv_barbar{
clip-path: url(#clip);
}
path.line{
clip-path: url(#clip);
}

g.tvbar{
clip-path: url(#clip2);
}
#radioes2 label.active{font-weight: 700;color: #2f2681;text-decoration: underline;}
.list-inline{
text-align: left;
Expand Down
40 changes: 10 additions & 30 deletions cslinechart.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,10 @@ function linechart() {
// .domain([startDomain, endDomain])
// .range([width / genData.length / 2, width - width / genData.length / 2]);

var x = d3.scale.ordinal().domain(genData.map(function(d){return d.dt})).rangeBands([0,width]);
// var x = d3.scale.ordinal().domain(genData.map(function(d){return d.dt})).rangeBands([0,width]);
var x = d3.time.scale()
.domain([startDomain, endDomain])
.range([width / 8 / 2, (width - width / 8 / 2 )]);

var y = d3.scale.linear()
.rangeRound([height, 0]);
Expand All @@ -37,14 +40,14 @@ function linechart() {
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var new1_genData = data.filter(function(d){
if(d.Date > startDomain && d.Date <endDomain){
if(d.Date > startDomain && d.Date <=endDomain){
return d;
}
});

y.domain(d3.extent(data, function(d) {
y.domain(d3.extent(new1_genData, function(d) {
return d[MValue];
})).nice();
}));


var xtickdelta = Math.ceil(60 / (width / data.length))
Expand All @@ -56,38 +59,15 @@ function linechart() {
.attr("class", "axis yaxis")
.attr("transform", "translate(" + width + ",0)")
.call(yAxis.orient("right").tickFormat("").tickSize(0));

// var barwidth = width / genData.length;
var barwidth = x.rangeBand();
var fillwidth = (Math.floor(barwidth * 0.9) / 2) * 2 + 1;
var bardelta = Math.round((barwidth - fillwidth) / 2);


var valueline = d3.svg.line()
.x(function(d) {
return x(d.dt) + barwidth / 2;
return x(d.Date);
})
.y(function(d) {
return y(d[MValue]);
}).interpolate('basis');

var defs = svg.append("defs");

var gradients = defs.append('linearGradient').attr('id','path_grad').attr("x1", "0%")
.attr("x2", "0%")
.attr("y1", "0%")
.attr("y2", "100%");

gradients.append("stop")
.attr('class', 'start')
.attr("offset", '0%')
.attr("stop-color", "#597356")
.attr("stop-opacity", 1);
gradients.append("stop")
.attr('class', 'end')
.attr("offset", "100%")
.attr("stop-color", "#2F323C")
.attr("stop-opacity", 1);


svg.append("path")
.attr("class", mname + "line line")
.attr("d", valueline(data))
Expand Down
2 changes: 2 additions & 0 deletions csmain.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -123,12 +123,14 @@ function calcema(period, data) {
var tmp = new Object;
tmp['dt'] = data[0]['dt'];
tmp['ema'] = isma;
tmp['Date'] = Date.parse(data[0]['dt']);

emares.push(tmp);

for (var i = 1; i < data.length; i++) {
var tmp_arr = new Object;
tmp_arr['dt'] = data[i]['dt'];
tmp_arr['Date'] = Date.parse(tmp_arr['dt']);
var tmp_ema = (data[i]['c'] - emares[i - 1]['ema']) * multiplier + emares[i - 1]['ema'];
tmp_arr['ema'] = tmp_ema;
emares.push(tmp_arr);
Expand Down
21 changes: 8 additions & 13 deletions emchart.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,10 @@ function emachart() {
function emalinerender(selection) {
selection.each(function(data) {

// var x = d3.time.scale()
// .domain([startDomain, endDomain])
// .range([width / genData.length / 2, (width - width / genData.length / 2 )]).nice();
var x = d3.scale.ordinal().domain(genData.map(function(d){return d.dt})).rangeBands([0,width]);
var x = d3.time.scale()
.domain([startDomain, endDomain])
.range([width / 8 / 2, (width - width / 8 / 2 )]);

var y = d3.scale.linear()
.rangeRound([height, 0]);

Expand All @@ -26,27 +26,22 @@ function emachart() {
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var new1_genData = data.filter(function(d){
if(d.Date > startDomain && d.Date <endDomain){
if(d.Date > startDomain && d.Date <= endDomain){
return d;
}
});
y.domain(d3.extent(data, function(d) { return d.ema; })).nice();


var xtickdelta = Math.ceil(60/(width/data.length))
xAxis.tickValues(x.domain().filter(function(d, i) { return !((i+Math.floor(xtickdelta/2)) % xtickdelta); }));

svg.append("g")
.attr("class", "axis yaxis")
.attr("transform", "translate(" + width + ",0)")
.call(yAxis.orient("right").tickFormat("").tickSize(0));

var barwidth = x.rangeBand();
// var fillwidth = (Math.floor(barwidth*0.9)/2)*2+1;
// var bardelta = Math.round((barwidth-fillwidth)/2);

.call(yAxis.orient("right").tickFormat("").tickSize(0));

var valueline = d3.svg.line()
.x(function(d) { return x(d.dt) + barwidth /2; })
.x(function(d) { return x(d.Date)})
.y(function(d) { return y(d.ema); })
.interpolate('basis');

Expand Down
Loading

0 comments on commit b6e6b18

Please sign in to comment.