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); });