Focus and Context charts (Categorical base axis)

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="cccExample1"></div>
<div id="log">&nbsp;</div>

CSS

#log {
    font: 12px sans-serif;
}

JavaScript

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

    var masterChart = new pvc.BarChart({
        canvas: "cccExample1",
        width:   600,
        height:  200,    
        title:   "Context Chart",
        animate: false,

        selectable: true,
        selectionMode: 'focuswindow',
        clearSelectionMode: 'none',

        selectionChangedAction: function(selected) {
            var fw = this.chart.focusWindow.base;
            $('#log').text("Count: " + selected.length + " Range: " + [fw.begin, fw.end, fw.length]);

            // TODO: refresh focus chart
        },

        extensionPoints: {
            // Focused Window Bg (behind elements) [pv.Bar]
            //focusWindowBg_fillStyle: 'rgba(100, 0, 0, 0.2)',

            // Focused Window Fg (in front of elements) [pv.Bar]
            //focusWindow_fillStyle: 'rgba(100, 0, 0, 0.2)',

            // Begin and End out of focus areas [pv.Bar] (should not have Base in the name :-( )
            //focusWindowBaseCurtain_fillStyle: 'transparent',

            // Base direction - Begin And End Grip [pv.Bar]
            //focusWindowBaseGripBegin_fillStyle: 'red',
            //focusWindowBaseGripEnd_fillStyle:   'green'
        }
    })
    .setData(relational_01, {crosstabMode: false})
    .render();
});