title: dimple js values in bar chart outside chart
body: <p>I am trying to add bar chart values of y-axis (cost) in the dimple js bar chart. Values are adding but outside of the chart as I think it fails to find the correct scale for the x-axis. Any suggestions?</p>
  
  <p>Here is the jsfiddle: <a href="http://jsfiddle.net/Ra2xS/27/" rel="nofollow">http://jsfiddle.net/Ra2xS/27/</a></p>
  
  <pre><code>    var dim = {"width":590,"height":450}; //chart container width
      var data = [{"date":"01-02-2010","cost":"11.415679194952766"},{"date":"01-03-2010","cost":"10.81875691467018"},{"date":"01-04-2010","cost":"12.710197879070897"}];
  
  
      function barplot(id,dim,data)
      {
          keys = Object.keys(data[0]);
          var xcord = keys[0];
          var ycord = keys[1];
          var svg = dimple.newSvg(id, dim.width, dim.height);
  
          var myChart = new dimple.chart(svg,data);
          myChart.setBounds(60, 30, 505, 305);        
  
          var x = myChart.addCategoryAxis("x", xcord);
          //var x = myChart.addTimeAxis("x", xcord, "%d-%m-%Y","%b %Y");
          x.addOrderRule(xcord);
          x.showGridlines = true;
          //x.timePeriod = d3.time.months;
  
          var y = myChart.addMeasureAxis("y", ycord);
          y.showGridlines = true;
          y.tickFormat = ',.1f';    
  
          var s = myChart.addSeries(null, dimple.plot.bar);
          var s1 = myChart.addSeries(null, dimple.plot.line);
          s1.lineWeight = 3;
          s1.lineMarkers = true;
  
          myChart.draw(1500);
  
              s.shapes.each(function(d) {
  
                  // Get the shape as a d3 selection
                  var shape = d3.select(this),
  
                  // Get the height and width from the scales
                  height = myChart.y + myChart.height - y._scale(d.height);
                  width = x._scale(d.width); //I think here is the problem
  
                  //alert(d.width);
                  // Add a text label for the value
                  svg.append("text")
  
                  // Position in the centre of the shape (vertical position is
                  // manually set due to cross-browser problems with baseline)
                  .attr("x", parseFloat(shape.attr("x")) + width / 2 - 15)
                  .attr("y", parseFloat(shape.attr("y")) - height / 2)
  
                  // Centre align
                  .style("text-anchor", "middle")
                  .style("font-size", "10px")
                  .style("font-family", "sans-serif")
  
                  // Make it a little transparent to tone down the black
                  .style("opacity", 0.7)
  
                  // Format the number
                  .text(d3.format(",.2f")(d.yValue));
              });     
      }
  
  barplot("body",dim,data);
  </code></pre>