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:  450,
        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) {
                    // Always hide the last band cause 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();
});