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 hard coded
var x_value0 = 30;
var x_value1 = 70;

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
                ////
            
                // 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_value0);
                })
            
                // 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_value1);
                })
                
                ////
                // Section A End
                ////
            
            ;

        ////
        // Section B Begin
        ////   
            
        // Line 1
            panel
            .add(pv.Rule)
            .top(0)
            .left  (function() { return this.parent.l0();     })
            .height(function() { return this.parent.height(); })
            .width(null)
            ;      
            
        // Line 2
            panel
            .add(pv.Rule)
            .top(0)
            .left  (function() { return this.parent.l1();     })
            .height(function() { return this.parent.height(); })
            .width(null)
            ;            

        ////
        // Section B End
        ////               
            
            return panel;      
      ...