dimple js values in bar chart outside chart

Question

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?

Here is the jsfiddle: http://jsfiddle.net/Ra2xS/27/

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

Answer 1

You can get the x position and bar width directly from the elements. The y position you can get by passing the height to the scale -- no need for offsets.

.attr("x", parseFloat(shape.attr("x")) + parseFloat(shape.attr("width"))/2)
.attr("y", y._scale(d.height))

Complete demo here. I've added a small vertical offset to the labels so they don't overlap with the circles/line.