Bar chart with alternate shadowed bands

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

  new pvc.BarChart({
      canvas: "cccExample",
      width:  500,
      height: 400,
      animate:    true,
      clickable:  true,
      selectable: true,
      hoverable:  true,
      legend:     true,
      legendPosition: 'top',
      axisGrid:    true,
      panelSizeRatio: 0.6,
      extensionPoints: {
        baseAxisGrid_add: function() {
          var width;

          // Shadow Panel
          return new pv.Panel()
            .zOrder(-50)
            .visible(function(scene) {
              // Hide the last band cause the scene it is fictitious.
              if(this.index === scene.parent.childNodes.length) { 
                return false; 
              }

              return !(this.index % 2);
            })
            .width(function() { 
              if(width == null) {
                var scale = this.getContext()
                .chart.axes.base.scale;
                width = scale.range().step;
              }
              return width; 
            })
            .fillStyle('rgba(0,0,250, 0.3)');
        }
      }
  })
  .setData(relational_04, {crosstabMode: false })
  .render();
});