Bar Chart - Stacked And Grouped

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 budgetAnalisysData = {
        "resultset": [
            //         |         |      Account
            // Product | Quarter |--------+---------
            //         |         | Budget | Actual
            ["Coffee",   "Q1",     2000,    1900   ],
            ["Coffee",   "Q2",     2000,    2200   ],
            ["Tea",      "Q1",     1500,    1600   ],
            ["Tea",      "Q2",     1500,    1650   ],
            ["Milk",     "Q1",     1200,    1000   ],
            ["Milk",     "Q2",     1200,     950   ]
        ],
        "metadata": [
            {"colType": "String",  "colName": "product"},
            {"colType": "String",  "colName": "quarter"},
            {"colType": "Numeric", "colName": "budget" }, 
            {"colType": "Numeric", "colName": "actual" }
        ]
    };

    new pvc.BarChart({
        canvas: "cccExample",
        width:  500,
        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: ['account, product, quarter, value'],

        visualRoles: {
            series:   'quarter, account',
            category: 'product, account'
            //value: 'value'
        },

        // Extreme Makeover of Composite axis - totally unadvisable!
        extensionPoints: {
            // Hide 1st row of labels (leaf nodes)
            baseAxisLabel_visible: function(s) { return s.depth < 1;  },

            // Move axis up
            baseAxis_bottom: function() { 
...