index.html

<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<style>
.graph { width: 150px; height: 150px; }
.graph path { stroke: steelblue; }
</style>

<div class="graph" data-discounts="-31.0,-31.0,-32.0,-32.0,-32.0,-32.0,-32.0,-31.0,-31.0,-32.0,-32.0,-32.0,-32.0,-32.0,-31.0,-31.14,-30.9,-30.93,-30.91,-30.66,-28.25,-30.91,-31.71,-31.11,-31.0,-31.16,-31.91,-31.63,-31.42,-31.24,-31.12,-31.23,-31.23,-31.1,-30.7,-30.62,-30.42,-30.61,-30.65,-30.46,-30.46,-30.46,-30.84,-30.73,-30.76,-29.51,-29.54,-29.54,-29.57,-29.83,-29.83,-29.83,-29.79,-29.75,-29.75,-29.5,-29.42,-30.12,-30.12,-30.22,-30.35,-30.36,-30.63,-30.68,-30.53,-29.59,-30.45,-30.52,-30.55,-30.55,-30.62,-30.33,-31.02,-31.02,-31.02,-31.02,-30.96,-30.96,-30.95,-30.43,-29.98,-29.98,-29.98,-30.02,-30.11,-30.05,-30.05,-31.16,-31.17,-31.14,-31.18,-30.88,-30.82,-30.39,-31.02,-31.09,-31.1,-31.12,-31.14,-30.04,-30.65,-30.02,-31.75,-31.75,-31.71,-32.07,-32.08,-32.12,-32.12,-32.1,-32.11,-31.88,-31.87,-31.62,-31.63,-31.91,-32.18,-32.16,-32.16,-32.53,-32.5,-32.57,-32.59,-32.51,-32.61,-31.38,-32.41,-32.19,-32.17,-33.04,-33.26,-33.26,-32.96,-32.54,-32.34,-32.29,-32.35,-32.23,-32.24,-32.13,-32.06,-32.06,-30.66,-30.78,-30.83,-30.75,-30.86,-30.57,-30.83,-30.67,-30.75,-30.76,-30.75,-30.82,-30.51,-30.53,-30.47,-29.99,-29.99,-29.79,-30.36,-30.52,-30.51,-30.68,-31.2,-31.35,-31.43,-31.83,-31.69,-31.56,-31.23,-31.31,-31.33,-31.33,-31.31,-31.42,-31.72,-31.75,-31.74,-31.27,-31.26,-31.32,-31.36,-29.03,-28.17,-28.77,-28.96,-29.03,-29.3,-29.09,-29.09,-28.33"><svg width="90" height="17" transform="translate(10,6)"></div>
<script>
  jQuery(function() {
  var $container, discounts, height, line, margin, svg, width, x, xAxis, y, yAxis;
  $container = $('.graph');
  discounts = $container.attr('data-discounts').split(',');
  console.log(discounts.length);
  margin = {
    top: 6,
    right: 10,
    bottom: 6,
    left: 10
  };
  width = $container.width() - margin.left - margin.right;
  height = $container.height() - margin.top - margin.bottom;
  x = d3.scale.linear().range([0, width]).domain([0, discounts.length]);
  y = d3.scale.linear().range([height, 0]).domain([d3.max(discounts), d3.min(discounts)]);
  xAxis = d3.svg.axis().scale(x).orient('bottom');
  yAxis = d3.svg.axis().scale(y).orient('left');
  line = d3.svg.line().x(function(d, i) {
    return x(i);
  }).y(function(d) {
    return y(d);
  });
  svg = d3.select('.graph').append('svg').attr('width', width).attr('height', height).attr('transform', "translate(" + margin.left + "," + margin.top + ")").append('g');
  return svg.append('path').attr('d', line(discounts)).style('fill', 'transparent');
});
</script>