Bar Chart - Stacked And Grouped II

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>
<div id="cccExample" />

JavaScript

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

// NOTE: this type of bar layout can be achieved in a simpler way
// as in: https://jsfiddle.net/duarteleao/qtor38hx/

    var demandVsSalesData = {
        "resultset": [
            // Date       | Product | PctDemand | PctSales | PctForecast |
            ["14-03-2014",  "Hat",    70,         55,        65  ],
            ["14-03-2014",  "Glove",  20,         15,        20  ],
            ["14-03-2014",  "Shirt",  10,         30,        15  ],
            ["21-03-2014",  "Hat",    60,         60,        null],
            ["21-03-2014",  "Glove",  25,         20,        null],
            ["21-03-2014",  "Shirt",  15,         20,        null]
        ],
        "metadata": [
            {"colType": "String",  "colName": "date"},
            {"colType": "String",  "colName": "product"},
            {"colType": "Numeric", "colName": "demand" }, 
            {"colType": "Numeric", "colName": "sales" },
            {"colType": "Numeric", "colName": "forecast" }
        ]
    };

    new pvc.BarChart({
        canvas: "cccExample",
        width:  400,
        height: 400,    
        animate:    false,
        selectable: true,
        hoverable:  true,
        legend:     true,
        stacked:    true,
        legendPosition: 'right',
        baseAxisComposite: true,
        baseAxisGrid: true,
        barSizeMax: 50,

        // Logical row structure always places 
        // crosstab columns in "column role" as first columns.
        // Col... | Row... | Val
        readers: ['measure, date, product, value'],

        visualRoles: {
            series:   'product',
            // series:   'product, measure',
            category: 'date, measure'
            //value: 'value'
        },

        // Extreme Makeover of Composite axis - totally unadvisable!
        extensionPoints: {
            // Hide 1st row of labels (leaf nodes)
            _baseAxisLabel_visible: function(s)...