title: How to display d3 elements on a gridster box?
body: <p>I am trying to create an area chart using <code>d3</code>, using this array:</p>
  
  <pre><code>var jsonResObj = {
                 initial_hours: [
                    1800, 1700, 1030, 1130, 950, 1249, 1225, 1821, 1250,
                    1505, 38, 130, 1520, 1600, 1330, 1930, 1806, 1535
                  ]
                };
  </code></pre>
  
  <p>The code for the axis and the chart is here:</p>
  
  <pre><code>var margin = {top: 20, right: 20, bottom: 40, left: 50},
          width = 350 - margin.left - margin.right,
          height = 400 - margin.top - margin.bottom,
          days = jsonResObj.initial_hours.length;
  
      var x = d3.scale.linear()
      .domain([0, days])
      .range([0, width]);
  
      var y = d3.scale.linear()
      .domain([0, d3.max(jsonResObj.initial_hours)])
      .range([height, 0]);
  
      var xAxis = d3.svg.axis()
      .scale(x)
      .orient("bottom");
  
      var yAxis = d3.svg.axis()
      .scale(y)
      .orient("left");
  
      var area = d3.svg.area()
      .x(function(d) { return x(days); })
      .y0(height)
      .y1(function(d) { return y(jsonResObj.initial_hours); });
  
      var svg = d3.select("#box1").append("svg")
      .attr("width", width + margin.left + margin.right)
      .attr("height", height + margin.top + margin.bottom)
      .append("g")
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
  
      svg.append("path")
      .datum(jsonResObj)
      .attr("class", "area")
      .attr("d", area);
  
      svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis);
  
      svg.append("g")
      .attr("class", "y axis")
      .call(yAxis);
  </code></pre>
  
  <p>My <code>Gridster</code> box:</p>
  
  <pre><code>&lt;li data-sizey="3" data-sizex="3" data-col="3" data-row="1"&gt;
      &lt;div class="gridster-box" id="box1"&gt;
          &lt;div class="handle-resize"&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/li&gt;
  </code></pre>
  
  <p>When I load my page, only the axes show up and the <code>area</code> selector
  is <code>0px * 0px</code></p>
  
  <p>How do I draw these area charts in my <code>gridster</code> box?</p>