Built with blockbuilder.org
forked from anonymous's block: Try Area Chart
license: mit |
Built with blockbuilder.org
forked from anonymous's block: Try Area Chart
<!DOCTYPE html> | |
<meta charset="utf-8"> | |
<style> | |
:root .grid-stack-item > .ui-resizable-handle { | |
filter: none; | |
} | |
#info-watchlist th:last-child, #info-watchlist th:first-child { | |
margin: 0; | |
width: 5px; | |
} | |
#bar-chart-info{ | |
color: #4A9AD5; | |
font-size: 12px; | |
font-family: 'Roboto-Regular'; | |
padding: 0; | |
} | |
#line-chart-info{ | |
font-size: 12px; | |
font-family: 'Roboto-Regular'; | |
padding: 0; | |
} | |
#delete-new-row, | |
#delete-row, | |
#add-new-account-tr, | |
#drag-tr { | |
cursor: pointer; | |
} | |
#info-watchlist td:first-child { | |
padding-left: 2px; | |
padding-right: 2px; | |
} | |
#info-watchlist tr.space > td, | |
#add-new-account-tr { | |
padding-top: 1em !important; | |
padding-bottom: 1em !important; | |
} | |
#toggle-icon { | |
list-style:none; | |
position: absolute; | |
right: 0; | |
padding: 0; | |
width: 100px; | |
font-size: 14px; | |
font-style: 'Roboto-Regular'; | |
background-color: white; | |
border: 1px solid; | |
display: none; | |
z-index: 999; | |
} | |
#toggle-icon li { | |
color: #3ac8f8; | |
padding: 5px; | |
border-bottom: 1px solid; | |
} | |
.grid .tick { | |
stroke: lightgrey; | |
opacity: 0.7; | |
} | |
.grid path { | |
stroke-width: 0; | |
} | |
.area-chart.above { | |
fill: lightsteelblue; | |
stroke-width: 0; | |
} | |
.area-chart.below{ | |
fill: red; | |
stroke-width: 0; | |
} | |
.overlay { | |
fill: none; | |
pointer-events: all; | |
} | |
.focus circle { | |
fill: none; | |
stroke: steelblue; | |
} | |
// path { | |
// stroke: steelblue; | |
// stroke-width: 2; | |
// fill: none; | |
// } | |
#toggle-icon li:hover { | |
background: #9FD0EC; | |
color: white; | |
cursor: pointer; | |
} | |
#save-current-edit { | |
position: absolute; | |
right: 1em; | |
top: 0.6em; | |
font-size: 1.4em; | |
color: rgb(193, 236, 158); | |
cursor: pointer; | |
} | |
#cancel-current-edit { | |
position: absolute; | |
right: 2.4em; | |
top: 0.6em; | |
font-size: 1.4em; | |
color: red; | |
cursor: pointer; | |
} | |
#ellipsis-icon{ | |
position: absolute; | |
right: 1em; | |
top: 0.9em; | |
font-size: 1.2em; | |
color: #9FD0EC; | |
} | |
.no-hover{ | |
pointer-events: none; | |
} | |
#ellipsis-icon:hover{ | |
cursor: pointer; | |
} | |
.legend-inline { | |
display: inline-block; | |
width: auto; | |
} | |
#widget-heading-link:hover{ | |
color: #9FD0EC; | |
cursor: pointer; | |
} | |
.header-widget { | |
padding-left: 1.5em; | |
padding-right: 1.5em; | |
margin-top: -0.6em; | |
} | |
.line-path { | |
fill: none; | |
stroke: #818384; | |
stroke-width: 1px; | |
} | |
li.filter-dropdown:hover{ | |
background: #81B6E5; | |
color: #fff; | |
} | |
li.filter-dropdown.selected{ | |
background: #81B6E5; | |
color: #fff; | |
} | |
.axis { | |
font: 10px sans-serif; | |
} | |
.tick line{ | |
opacity: 0.8; | |
stroke-dasharray: 5 5; | |
} | |
.must-show{ | |
display: inline; | |
} | |
</style> | |
<script src="https://d3js.org/d3.v4.min.js"></script> | |
<body> | |
<script> | |
var data = [ | |
{date: "30-Apr-12", close: "53.98"}, | |
{date: "29-Apr-12", close: "67.00"}, | |
{date: "28-Apr-12", close: "89.70"}, | |
{date: "27-Apr-12", close: "67.00"}, | |
{date: "26-Apr-12", close: "89.70"}, | |
{date: "25-Apr-12", close: "99.00"}, | |
{date: "24-Apr-12", close: "130.28"}, | |
{date: "23-Apr-12", close: "166.70"}, | |
{date: "22-Apr-12", close: "234.98"}, | |
{date: "21-Apr-12", close: "345.44"}, | |
{date: "20-Apr-12", close: "234.98"}, | |
{date: "19-Apr-12", close: "345.44"}, | |
{date: "18-Apr-12", close: "443.34"}, | |
{date: "17-Apr-12", close: "543.70"}, | |
{date: "16-Apr-12", close: "580.13"}, | |
{date: "15-Apr-12", close: "605.23"}, | |
{date: "14-Apr-12", close: "322.77"}, | |
{date: "13-Apr-12", close: "105.23"}, | |
{date: "12-Apr-12", close: "-422.77"}, | |
{date: "11-Apr-12", close: "-126.20"}, | |
{date: "10-Apr-12", close: "-88.44"}, | |
{date: "9-Apr-12", close: "-236.23"}, | |
{date: "8-Apr-12", close: "-433.68"}, | |
{date: "7-Apr-12", close: "-524.31"}, | |
{date: "6-Apr-12", close: "-629.32"}, | |
{date: "5-Apr-12", close: "-433.68"}, | |
{date: "4-Apr-12", close: "224.31"}, | |
{date: "3-Apr-12", close: "529.32"}, | |
{date: "2-Apr-12", close: "318.63"}, | |
{date: "1-Apr-12", close: "99.55"} | |
]; | |
var margin = {top: 20, right: 35, bottom: 25, left: 35}, | |
width = 680 - margin.left - margin.right, | |
height = 280 - margin.top - margin.bottom; | |
//Beautify the date | |
var parseDate = d3.timeParse("%d-%b-%y"); | |
//Get the Amount of alerts for tooltip | |
var bisectDate = d3.bisector(function(d) { | |
return d.date; | |
}).left; | |
var x = d3.scaleTime().range([0, width]); | |
var y = d3.scaleLinear().range([height, 0]); | |
var xAxis = d3.axisBottom(x).ticks(5); | |
var yAxis = d3.axisLeft(y).ticks(5); | |
var area = d3.area() | |
.x(function(d) { | |
return x(d.date); | |
}) | |
.y0(height) | |
.y1(function(d) { | |
return y(d.close); | |
}); | |
var valueline = d3.line() | |
.x(function(d) { | |
return x(d.date); | |
}) | |
.y(function(d) { | |
return y(d.close); | |
// return y(d.close) >= 0 ? y(0) : y(d.close); | |
}); | |
// var valueline2 = d3.line() | |
// .x(function(d) { | |
// return x(d.date); | |
// }) | |
// .y(function(d) { | |
// return d.close < 0 ? y(0) : y(d.close); | |
// }); | |
var svg = d3.select("body") | |
.append("svg") | |
.attr("width", width + margin.left + margin.right) | |
.attr("height", height + margin.top + margin.bottom) | |
.append("g") | |
.attr("transform", "translate(" + margin.left + "," + margin.top + ")"); | |
function make_x_axis() { // function for the x grid lines | |
return d3.axisBottom(x) | |
.ticks(5) | |
} | |
function make_y_axis() { // function for the y grid lines | |
return d3.axisLeft(y) | |
.ticks(5) | |
} | |
data.forEach(function(d) { | |
d.date = parseDate(d.date); | |
d.close = +d.close; | |
}); | |
data.sort(function(a, b) { return a.date - b.date; }); | |
// Scale the range of the data | |
x.domain(d3.extent(data, function(d) { return d.date; })); | |
y.domain( [d3.min(data, function(d) { return d.close; }), d3.max(data, function(d) { return d.close; })] ); | |
svg.append("path") | |
.datum(data) | |
.attr("class", "area-chart above") | |
.style("stroke", "blue") | |
.style("stroke-width", "1") | |
.attr("d", area.y0(function(d){ return y(Math.min(d.close, 0)); })); | |
// Add the filled area | |
svg.append("path") | |
.datum(data) | |
.attr("class", "area-chart below") | |
.style("stroke", "black") | |
.style("stroke-width", "1") | |
.attr("d", area.y1(function(d){ return Math.max(y(0), -y(d.close))})); | |
svg.append("g") // Draw the y Grid lines | |
.attr("class", "grid") | |
.call(make_y_axis() | |
.tickSize(-width, 0, 0) | |
.tickFormat("") | |
) | |
// Add the valueline path. | |
// svg.append("path") | |
// .datum(data) | |
// .style("stroke", "white") | |
// .style("stroke-width", "2") | |
// .style("fill", "none") | |
// .attr("class", "line-chart") | |
// .attr("d", valueline); | |
svg.append("path") | |
.datum(data) | |
// .style("stroke", "blue") | |
.style("stroke-width", "2") | |
.style("fill", "none") | |
.attr("class", "line-chart") | |
.attr("d", valueline) | |
// Add the X Axis | |
svg.append("g") | |
.attr("class", "x axis") | |
.attr("transform", "translate(0," + height + ")") | |
.call(xAxis) | |
// Add the Y Axis | |
svg.append("g") | |
.attr("class", "y axis") | |
.call(yAxis) | |
svg.append("rect") | |
.attr("class", "overlay") | |
.attr("width", width) | |
.attr("height", height); | |
function mousemove() { | |
var x0 = x.invert(d3.mouse(this)[0]), | |
i = bisectDate(data, x0, 1), | |
d0 = data[i - 1], | |
d1 = data[i], | |
d = x0 - d0.period > d1.period - x0 ? d1 : d0; | |
// var nx = x(d) + (x.bandwidth() / 2); | |
focus.attr("transform", "translate(" + x(d.date) + "," + y(d.close) + ")"); | |
focus.select("text").text(d.close); | |
} | |
// Tooltip | |
var focus = svg.append("g") | |
.attr("class", "focus") | |
.style("display", "none"); | |
focus.append("circle").attr("r", 4.5); | |
focus.append("text").attr("x", 9).attr("dy", ".35em"); | |
svg.append("rect") | |
.attr("class", "overlay") | |
.attr("width", width) | |
.attr("height", height) | |
.on("mouseover", function() { focus.style("display", null); }) | |
.on("mouseout", function() { focus.style("display", "none"); }) | |
.on("mousemove", mousemove); | |
</script> | |
</script> |