Metric Dot chart with Center-Lines

by duarteleao

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.1.19/require.min.js"></script>
<script src="//webdetails.github.io/ccc/charts/lib/amd/require.config.js"></script>
<script src="//webdetails.github.io/ccc/charts/lib/q01-01.js"></script>
<div id="cccExample" />

JavaScript

require([
  "ccc/pvc", 
  "ccc/def", 
  "ccc/protovis"
], function(pvc, def, pv) {

  // def.setDebug(16);
  new pvc.MetricDotChart({
      canvas:      'cccExample',
      width:       600,
      height:      500,
      legend:      true,
      legendAlign: 'right',
      animate:     false,
      axisGrid:    true,
      axisZeroLine: false,
      selectable:  true,
      hoverable:   true,
      contentMargins:  20,
      contentPaddings: 10,
      extensionPoints: {
          xAxisGrid_add: plotCenteredLine('x'),
          yAxisGrid_add: plotCenteredLine('y')
      }
  })
  .setData(testLDot2)
  .render();

  function plotCenteredLine(orient) {
      var a = orient === 'x' ? 'left' : 'bottom';
      var len_a   = pvc.BasePanel.parallelLength[a];
      var olen_a  = pvc.BasePanel.orthogonalLength[a];
      var obeg_a  = pvc.BasePanel.relativeAnchor[a];
      var oend_a  = pvc.BasePanel.oppositeAnchor[obeg_a];
      return function() {
          var rule = new pv.Rule()
          .data([null])
          //.extend(null)
          .zOrder(0)
          .lineWidth(1)
          .antialias(false)
          .strokeStyle('gray')
          [len_a](null)
          [obeg_a](function() {
              var li = this.getContext().panel._layoutInfo;
              return li.gridMargins[obeg_a];
          })
          [oend_a](function() {
              var li = this.getContext().panel._layoutInfo;
              return li.gridMargins[oend_a];
          })
          [a](function() {
              var li = this.getContext().panel._layoutInfo;
              return li.gridMargins[a] + li.gridSize[olen_a] / 2;
          });

          return rule;
      };
  }
});