Bar Chart - Stacked And Grouped

by Óscar Gómez Alcañiz

HTML

<script src="https://test-pentaho-ctools-dashboards.web.cern.ch/resources/vendor/libs/jquery.tipsy.js"></script>
<script src="https://test-pentaho-ctools-dashboards.web.cern.ch/resources/vendor/libs/protovis.js"></script>
<script src="https://test-pentaho-ctools-dashboards.web.cern.ch/resources/vendor/libs/protovis-msie.js"></script>
<script src="https://test-pentaho-ctools-dashboards.web.cern.ch/resources/vendor/libs/tipsy.js"></script>
<script src="https://test-pentaho-ctools-dashboards.web.cern.ch/resources/vendor/libs/def.js"></script>
<script src="https://test-pentaho-ctools-dashboards.web.cern.ch/resources/vendor/libs/pvc-r2.0.js"></script>
<script src="https://test-pentaho-ctools-dashboards.web.cern.ch/resources/vendor/libs/q01-01.js"></script>
<script src="https://test-pentaho-ctools-dashboards.web.cern.ch/resources/vendor/libs/bp.js"></script>
<link rel="stylesheet" href="https://test-pentaho-ctools-dashboards.web.cern.ch/resources/vendor/libs/tipsy.css">
<div id="cccExample" />

JavaScript

var countryData = {
    "resultset": [
        //               |       |      Payments
        // Status        |  ISO  |----------+------------
        //               |       | Received | Outstanding
        ["Member State",   "AT",     2000,      1900   ],
        ["Member State",   "BE",     2000,      2200   ],
        ["Member State",   "...",       0,         0   ],
        ["Associate",      "RO",     1500,      1600   ],
        ["Associate",      "RS",     1500,      1650   ],
        ["Candidate",      "TR",     1200,      1000   ],
        ["Candidate",      "PK",     1200,       950   ]
    ],
    "metadata": [
        {"colType": "String",  "colName": "status"},
        {"colType": "String",  "colName": "iso"},
        {"colType": "Numeric", "colName": "paid" }, 
        {"colType": "Numeric", "colName": "outstanding" }
    ]
};
            
new pvc.BarChart({
    canvas: "cccExample",
    width:  600,
    height: 400,
    colors: ['green', 'blue'],
    animate:    true,
    selectable: true,
    hoverable:  true,
    legend:     true,
    stacked:    true,
    legendPosition: 'bottom',
    baseAxisComposite: true,
    baseAxisGrid: true,
    barSizeMax: 50,
    
    // Logical row structure always places crosstab columns in "column role" as first columns.
    // Col | Row | Val
    readers: ['account, status, iso'],
    
    visualRoles: {
        series:   'paid, outstanding, account',
        category: 'status, iso',
        //value: 'paid, outstanding'
    },
    
     // Extreme Makeover of Composite axis - totally unadvisable!
    extensionPoints: {
        // Hide grid lines separating by status
        baseAxisGrid_visible: function() { 
          if (this.scene.previousSibling) {
          	return this.scene.atoms.status.value !== this.scene.previousSibling.atoms.status.value;
          }
        },
        baseAxisGrid_strokeStyle: 'gray'
    }, 
    
    // TODO: There's no extension point for the "bar" that outlines the cells of the...