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 = {"metadata":[{
    	"colName":"g", 
      "colType":"String", 
      "colIndex":0
		}, {
    	"colName":"n", 
      "colType":"String", 
      "colIndex":1
    }, {
    	"colName":"h", 
      "colType":"Numeric", 
      "colIndex":2
    }, {
    	"colName":"r", 
      "colType":"Numeric", 
      "colIndex":3
    }],
  "resultset":[
  		// Group | Nationality | Persons | Rest
      //-------+-------------+---------+------
      ["ACC",      "FR",         13,       4],
      ["ACC",      "GR",          2,      15],
      ["ACC",      "CH",          1,      16],
      ["ACC","GB",1,16],["AIS","ES",13,42],["AIS","PT",8,47],
      ["AIS","CH",5,50],["AIS","PL",5,50],["AIS","FR",5,50],
      ["AIS","DE",3,52],["AIS","RU",3,52],["AIS","IT",3,52],
      ["AIS","GB",3,52],["AIS","GR",2,53],["DHO","IT",2,2],
      ["DHO","BE",1,3],["DHO","FR",1,3],["EF","FR",4,7],["EF","SE",2,9],
      ["EF","BE",1,10],["EF","CH",1,10],["EF","DE",1,10],
      ["EF","GB",1,10],["EF","SK",1,10],["RPC","FR",4,5],
      ["RPC","PL",2,7],["RPC","AT",1,8],["RPC","HU",1,8],
      ["RPC","PT",1,8],["TPR","FR",6,14],["TPR","ES",3,17],
      ["TPR","PT",3,17],["TPR","GR",2,18],["TPR","AT",1,19],
      ["TPR","BG",1,19],["TPR","DE",1,19],["TPR","GB",1,19],
      ["TPR","RO",1,19],["TPR","SE",1,19],["FAP","DE",1,0]
    ],
    "queryInfo":{"totalRows":"40"}
  };
            
var bc = new pvc.BarChart({
    canvas: "cccExample",
    width:  400,
    height: 600,
    colors: ['green', 'blue'],
    animate:    true,
    selectable: true,
    hoverable:  true,
    legend:     true,
    stacked:    true,
    legendPosition: 'bottom',
    orientation: 'horizontal',
    baseAxisComposite: true,
    baseAxisGrid: true,
    barSizeMax: 50,
    
    dimensions: {
			g: {"colType":"String","colIndex":0},
      n: {"colType":"String","colIndex":1},
      h: {"colType":"Numeric","colIndex":2},
      r: {"colType":"Numeric","colIndex":3}
    },
    
    // Logical row structure always places...