wefra/lib/d3-v6-oop/area_chart.js

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