Metric Dot with Quadrants

by Steve SanPietro

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 in an array
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 A Begin - How can I put this inside of a loop?
                ////
            
                // Line 1
                .def('l0', function() {
                    var ccc = this.getContext();
                    var scale = ccc.chart.axes.base.scale;
                    var li = ccc.panel._layoutInfo;
                    return li.paddings.left + scale(x_values[0]);
                })
            
                // Line 2
                .def('l1', function() {
                    var ccc = this.getContext();
                    var scale = ccc.chart.axes.base.scale;
                    var li = ccc.panel._layoutInfo;
                    return li.paddings.left + scale(x_values[1]);
                })
                
                ////
                // Section A End
                ////
            
            ;

        ////
        // Section B Begin - I'm able to successfully loop this part
        ////   
            
            for (i = 0; i < x_values.length; i++) {
                // The name of the .def function defined above
                var fn_name = 'this.parent.l' + i + '()';
                // Draw the lines
                    panel
                    .add(pv.Rule)
                    .top(0)
                    .left  (function() { return eval(fn_name);     })
                    .height(function() { return this.parent.height(); })
                    .width(null)
;      

            }
 
        ////
        // Section B End
        ////               
            
  ...