Source

django-spotnet / spotnet / stats / templates / spotnet_stats / daily_posts.html

Full commit
{% extends "spotnet_stats/index.html" %}
{% load i18n %}


{% block content %}
  <style>

    path {
      fill: steelblue;
    }

    .axis text {
      font: 10px sans-serif;
      text-shadow: 0px 0px 3px white;
    }

    .axis path, .axis line {
      fill: none;
      stroke: #000;
      shape-rendering: crispEdges;
    }

  </style>
  <h2>{% trans "Daily posts" %}</h2>
  <div class="gallery" id="chart" style="width: 100%;"></div>

<!--  <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/d3/2.10.0/d3.v2.min.js"></script> -->
  <script type="text/javascript" src="http://d3js.org/d3.v2.js"></script>

  <script>

{% comment %}
  var data = {
{% for year, months in postings.iteritems %}
      {{ year }}: {
  {% for month, days in months.iteritems %}
          {{ month }}: {
    {% for day, posts in days.iteritems %}
              {{ day}}: {{ posts }},
    {% endfor %}
          },
  {% endfor %}
      },
{% endfor %}
  };


  var data = [
{% for year, months in postings.iteritems %}
  {% for month, days in months.iteritems %}
    {% for day, posts in days.iteritems %}
//      {"{{ year }} {{ month }} {{ day }}":
      {{ posts }},
    {% endfor %}
  {% endfor %}
{% endfor %}
  ];

{% endcomment %}


var data = {{ postings_list }};

// months minus one because js expects the range [0, 11]
var date_start = new Date({{ date_start.year }}, {{ date_start.month }} - 1, {{ date_start.day }});
var date_end = new Date({{ date_end.year }}, {{ date_end.month }} - 1, {{ date_end.day }});




var n = 1, // number of layers
    m = {{ dayspan }}, // number of samples per layer
    stack = d3.layout.stack().offset("zero")(data_to_stream()),
    margin = {top: 10, right: 10, bottom: 10, left: 10};

margin.vert = margin.top  + margin.bottom;
margin.horz = margin.left + margin.right;

var width = document.getElementById('chart').offsetWidth,
    height = width / 2.3,
    mx = m - 1,
    // the maximum value across all layers
    my = d3.max(stack, function(d) {
      return d3.max(d, function(d) {
        return d.y0 + d.y;
      });
    });

my = 1200; // To clip that one huge value

var area = d3.svg.area()
    // the x coord for a value
    .x(function(d) { return d.x * (width - margin.horz) / mx + margin.left; })
    // the y coord for the bottom of t
    .y0(function(d) { return height - d.y0 * (height - margin.vert) / my - margin.bottom; })
    .y1(function(d) { return height - (d.y + d.y0) * (height - margin.vert) / my - margin.bottom; });

var vis = d3.select("#chart")
  .append("svg")
//    .attr("width",  width;
    .attr("height", height);

vis.selectAll("path")
    .data(stack)
  .enter().append("path")
    .attr("d", area);




function data_to_stream() {
    var stream = []
    for (n = 0; n < data.length; n++) {
        stream[n] = {
            x: n,
            y: data[n], // < 2000 ? data[n] : 1500,
        };
    }
    return [stream];
}





//format = d3.time.format("%b %Y");
//date = format(date_str);



var scale = d3.time.scale() //.utc()
    .domain([date_start, date_end])
    .range([margin.left, width - margin.right]);
    //.nice(d3.time.days.utc)

var xAxis = d3.svg.axis()
    .scale(scale)
    .orient("top")
    .tickPadding(8);

  vis.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + (height - margin.bottom) + ")")
      .call(xAxis);



var yscale = d3.scale.linear()
    .domain([my, 0])
    .range([margin.bottom, height - margin.top]); // pixel height

var yAxis = d3.svg.axis()
    .scale(yscale)
    .orient("right")
    .tickPadding(8);

  vis.append("g")
      .attr("class", "y axis")
      .attr("transform", "translate(" + margin.left + ")")
      .call(yAxis);


  </script>
{% endblock %}