159 lines
5.0 KiB
JavaScript
159 lines
5.0 KiB
JavaScript
var AreaChart = {
|
|
margin: {top: 20, right: 0, bottom: 40, left: 80},
|
|
|
|
init: function(svg, html_tag_attr, dataset, xTimeParse, xAxisFormat, yTicks){
|
|
this.html_tag_attr = html_tag_attr;
|
|
|
|
//var div = d3.select(this.html_tag_attr).append("div")
|
|
d3.select(this.html_tag_attr).append("div")
|
|
.attr("class", "tooltip")
|
|
.style("opacity", 0);
|
|
|
|
// set the dimensions and margins of the graph
|
|
var width = $(this.html_tag_attr).width() - this.margin.left - this.margin.right,
|
|
height = $(this.html_tag_attr).height() - this.margin.top - this.margin.bottom;
|
|
|
|
// parse the date / time
|
|
var parseTime = d3.timeParse(xTimeParse);
|
|
|
|
// set the ranges
|
|
var x = d3.scaleTime().range([0, width]);
|
|
var y = d3.scaleLinear().range([(height), this.margin.top]);
|
|
|
|
// define the area
|
|
var area = d3.area()
|
|
.x(function(d) { return x(d.x); })
|
|
.y0(height)
|
|
.y1(function(d) { return y(+d.y); });
|
|
|
|
// define the line
|
|
var valueline = d3.line()
|
|
.x(function(d) { return x(d.x); })
|
|
.y(function(d) { return y(+d.y); });
|
|
//.y(function(d) { return y(d.y); });
|
|
|
|
//var svg = this.svg(html_tag_attr, width, height, this.margin);
|
|
|
|
// format the dataset
|
|
dataset.forEach(function(d) {
|
|
d.x = parseTime(d.x);
|
|
d.y = +d.y;
|
|
});
|
|
|
|
// Scale the range of the dataset
|
|
x.domain(d3.extent(dataset, function(d) { return d.x; }));
|
|
y.domain([0, d3.max(dataset, function(d) { return +d.y + 10; })]).ticks(2);
|
|
|
|
// set the gradient
|
|
//svg.append("linearGradient") <== THIS ONE WORKS
|
|
// .attr("id", "area-gradient")
|
|
// .attr("gradientUnits", "userSpaceOnUse")
|
|
// .attr("x1", 0).attr("y1", y(0))
|
|
// .attr("x2", 0).attr("y2", y(20000))
|
|
// .selectAll("stop")
|
|
// .data([
|
|
// {offset: "40%", color: "#efffef"},
|
|
// {offset: "80%", color: "#efffef", opacity:0.8}
|
|
// ])
|
|
// .enter().append("stop")
|
|
// .attr("offset", function(d) { return d.offset; })
|
|
// .attr("stop-color", function(d) { return d.color; });
|
|
var max = d3.max(dataset, function(d) { return +d.y + 10; });
|
|
svg.append("linearGradient") //<== THIS ONE IS FOR TEST
|
|
.attr("id", "area-gradient")
|
|
.attr("gradientUnits", "userSpaceOnUse")
|
|
.attr("x1", 0).attr("y1", y(0))
|
|
.attr("x2", 0).attr("y2", y(max))
|
|
//.attr("x3", 0).attr("y3", y(17000))
|
|
//.attr("x4", 0).attr("y4", y(18000))
|
|
.selectAll("stop")
|
|
.data([
|
|
{offset: "20%", color: "red", opacity:0.5},
|
|
{offset: "40%", color: "orange", opacity:0.2},
|
|
{offset: "80%", color: "yellow", opacity:0.2},
|
|
{offset: "100%", color: "green", opacity:0.5}
|
|
])
|
|
.enter().append("stop")
|
|
.attr("offset", function(d) { return d.offset; })
|
|
.attr("stop-color", function(d) { return d.color; });
|
|
|
|
|
|
|
|
// add the area
|
|
svg.append("path")
|
|
.data([dataset])
|
|
.attr("class", "area")
|
|
.attr("d", area);
|
|
|
|
// Add the valueline path.
|
|
svg.append("path")
|
|
.data([dataset])
|
|
.attr("fill", "none")
|
|
.attr("class", "line")
|
|
//.attr("stroke", "green")
|
|
.attr("stroke-width", "1.5px")
|
|
.attr("d", valueline);
|
|
|
|
// Add the X Axis
|
|
svg.append("g")
|
|
.attr("class", "axis")
|
|
.attr("transform", "translate(0," + height + ")")
|
|
.call(d3.axisBottom(x)
|
|
.tickFormat(d3.timeFormat(xAxisFormat)))
|
|
.selectAll("text")
|
|
.attr("dx", "-.8em")
|
|
.attr("dy", ".95em");
|
|
|
|
// Add the Y Axis
|
|
svg.append("g")
|
|
.attr("class", "axis")
|
|
.call(d3.axisLeft(y).ticks(yTicks))
|
|
.selectAll("text")
|
|
.style("text-anchor", "end")
|
|
;
|
|
|
|
}, //ENDOF init: function()
|
|
|
|
addLine: function(svg, html_tag_attr, dataset, xTimeParse, color){
|
|
// set the dimensions and margins of the graph
|
|
var width = $(this.html_tag_attr).width() - this.margin.left - this.margin.right,
|
|
height = $(this.html_tag_attr).height() - this.margin.top - this.margin.bottom;
|
|
|
|
// parse the date / time
|
|
var parseTime = d3.timeParse(xTimeParse);
|
|
|
|
// set the ranges
|
|
var x = d3.scaleTime().range([0, width]);
|
|
var y = d3.scaleLinear().range([height, 0]);
|
|
|
|
// define the line
|
|
var valueline = d3.line()
|
|
.x(function(d) { return x(d.x); })
|
|
.y(function(d) { return y(+d.y); });
|
|
//.y(function(d) { return y(d.y); });
|
|
|
|
//var svg = this.svg(html_tag_attr, width, height, this.margin);
|
|
|
|
// format the dataset
|
|
dataset.forEach(function(d) {
|
|
d.x = parseTime(d.x);
|
|
d.y = +d.y;
|
|
});
|
|
|
|
// Scale the range of the dataset
|
|
x.domain(d3.extent(dataset, function(d) { return d.x; }));
|
|
y.domain([0, d3.max(dataset, function(d) { return +d.y + 10; })]).ticks(2);
|
|
|
|
// Add the valueline path.
|
|
svg.append("path")
|
|
.data([dataset])
|
|
.attr("fill", "none")
|
|
.attr("stroke", color)
|
|
.attr("stroke-width", "2px")
|
|
.attr("d", valueline)
|
|
;
|
|
|
|
}, //ENDOG addLine: function()
|
|
|
|
}; //ENDOF LineChart
|