Metric Dot with Quadrants

HTML

<script src="http://www.webdetails.pt/ctools/charts/lib/jquery.tipsy.js"></script>
<script src="http://www.webdetails.pt/ctools/charts/lib/protovis.js"></script>
<script src="http://www.webdetails.pt/ctools/charts/lib/protovis-msie.js"></script>
<script src="http://www.webdetails.pt/ctools/charts/lib/tipsy.js"></script>
<script src="http://www.webdetails.pt/ctools/charts/lib/def.js"></script>
<script src="http://www.webdetails.pt/ctools/charts/lib/pvc-r2.0.js"></script>
<script src="http://www.webdetails.pt/ctools/charts/lib/q01-01.js"></script>
<script src="http://www.webdetails.pt/ctools/charts/lib/bp.js"></script>
<link rel="stylesheet" href="http://www.webdetails.pt/ctools/charts/lib/tipsy.css">
<div id="cccExample" />

JavaScript

// X intercept values hard coded
var x_values = [30, 60];

new pvc.MetricDotChart({
    canvas:   "cccExample",
    width:    500,
    height:   400,
    axisGrid: true,
    axisZeroLine: false,
    selectable: true,
    
    extensionPoints: {
        
    	plot_add: function() {
            var panel = new pv.Panel()
                // Quadrant rules above grid, but below dots.
                .zOrder(-1)                       
            ;

        ////
        // Section B Begin
        ////   
            
        //for (var i = 0; i < x_values.length; i++) {
          //  var x = x_values[i];
            // Lines
            panel
            .add(pv.Rule)
            .data(x_values)
            .top(0)
            .left  (
                function(d) {                 
                this.index * 20 + 15
                var ccc = this.parent.getContext();
                var scale = ccc.chart.axes.base.scale;
                var li = ccc.panel._layoutInfo;
                return li.paddings.left + scale(d);                                     
            })
            .height(function() { return this.parent.height(); })
            .width(null)
            ;      
        //}
         

        ////
        // Section B End
        ////               
            
            return panel;      
       
        }
    }
})

.setData(testLDot2)
.render();