var data = [{"end_time":"2013-01-01","value":25.00},{"end_time":"2013-01-02","value":0.00},{"end_time":"2013-01-03","value":25.00},{"end_time":"2013-01-04","value":159.00},{"end_time":"2013-01-05","value":84.00},{"end_time":"2013-01-06","value":0.00},{"end_time":"2013-01-07","value":64.00},{"end_time":"2013-01-08","value":84.00},{"end_time":"2013-01-09","value":84.00},{"end_time":"2013-01-10","value":0.00},{"end_time":"2013-01-11","value":89.00},{"end_time":"2013-01-12","value":75.00},{"end_time":"2013-01-13","value":0.00},{"end_time":"2013-01-14","value":50.00},{"end_time":"2013-01-15","value":50.00},{"end_time":"2013-01-16","value":174.00},{"end_time":"2013-01-17","value":84.00},{"end_time":"2013-01-18","value":0.00},{"end_time":"2013-01-19","value":393.00},{"end_time":"2013-01-20","value":134.00},{"end_time":"2013-01-21","value":282.00},{"end_time":"2013-01-22","value":25.00},{"end_time":"2013-01-23","value":149.00},{"end_time":"2013-01-24","value":0.00},{"end_time":"2013-01-25","value":124.00},{"end_time":"2013-01-26","value":100.00},{"end_time":"2013-01-27","value":134.00},{"end_time":"2013-01-28","value":168.00},{"end_time":"2013-01-29","value":379.00},{"end_time":"2013-01-30","value":193.00},{"end_time":"2013-01-31","value":0.00}]
var m = [80, 80, 80, 80],
w = 700 - m[1] - m[3],
h = 250 - m[0] - m[2],
parse = d3.time.format("%Y-%m-%d").parse;
var x = d3.time.scale().range([0, w]),
y = d3.scale.linear().range([h, 0]),
xAxis = d3.svg.axis().scale(x).tickSize(-h).tickFormat(d3.time.format("%-m/%d")),
yAxis = d3.svg.axis().scale(y).ticks(2).orient("right");
var area = d3.svg.area()
.interpolate("linear")
.x(function (d) {
return x(d.end_time);
})
.y0(h)
.y1(function (d) {
return y(d.value);
});
var line = d3.svg.line()
.interpolate("linear")
.x(function (d) {
return x(d.end_time);
})
.y(function (d) {
return y(d.value);
});
data.forEach(function (d) {
d.end_time = parse(d.end_time);
d.value = +d.value;
});
var total = 0
for (var i = 0, len = data.length; i < len; i++) {
total += data[i].value;
}
x.domain([data[0].end_time, data[data.length - 1].end_time]);
y.domain([0, d3.max(data, function (d) {
return d.value;
})]).nice();
var svg = d3.select("body").append("svg:svg")
.attr("width", w + m[1] + m[3])
.attr("height", h + m[0] + m[2])
.append("svg:g")
.attr("transform", "translate(" + m[3] + "," + m[0] + ")");
svg.append("svg:path")
.attr("class", "area")
.attr("d", area(data));
svg.append("svg:g")
.attr("class", "x axis")
.attr("transform", "translate(1," + h + ")")
.call(xAxis);
svg.append("svg:g")
.attr("class", "y axis")
.attr("transform", "translate(" + w + ",0)")
.call(yAxis);
svg.selectAll("line.y")
.data(y.ticks(5))
.enter().append("line")
.attr("x1", 0)
.attr("x2", w)
.attr("y1", y)
.attr("y2", y)
.style("stroke", "#000000")
.style("stroke-opacity", 0.06);
svg.append("svg:path")
.attr("class", "line")
.attr("d", line(data));
svg.append("svg:text")
.attr("x", 80)
.attr("y", -10)
.attr("text-anchor", "end")
.text('Gross Volume')
.style("stroke", "#444")
.style("fill", "#000")
.style("stroke-width", .2)
.style("font-size", "12px")
.style("font-weight", "bold");
svg.append("svg:text")
.attr("x", w)
.attr("y", -10)
.attr("text-anchor", "end")
.text('$' + total.toFixed(2) + " total")
.style("stroke", "#008cdd")
.style("fill", "#008cdd")
.style("stroke-width", .2)
.style("font-size", "12px")
.style("font-weight", "bold");
svg.selectAll("circle")
.data(data)
.enter().append("circle")
.attr("fill", "#008cdd")
.attr("r", 4)
.attr('cx', function (d) {
return x(d.end_time);
})
.attr('cy', function (d) {
return y(d.value);
});