Bar Chart - Stacked And Grouped with two plots

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) {

  var cdaData = {
    "resultset": [
      // year, month, series, num, rate
      [2017, "Jan", "a", 55, 0.30],
      [2017, "Jan", "b", 50, 0.20],
      [2017, "Fev", "a", 35, 0.20],
      [2017, "Fev", "b", 30, 0.05],
      [2017, "Mar", "a", 55, 0.15],
      [2017, "Mar", "b", 50, 0.20],
      [2017, "Apr", "a", 35, 0.20],
      [2017, "Apr", "b", 30, 0.15],
      [2018, "Jan", "a", 25, 0.15],
      [2018, "Jan", "b", 20, 0.10],
      [2018, "Fev", "a", 30, 0.15],
      [2018, "Fev", "b", 25, 0.10],
      [2018, "Mar", "a", 25, 0.10],
      [2018, "Mar", "b", 20, 0.05],
      [2018, "Apr", "a", 30, 0.05],
      [2018, "Apr", "b", 25, 0.02]
    ],
    "metadata": [{
        "colType": "Numeric",
        "colName": "year"
      },
      {
        "colType": "String",
        "colName": "month"
      },
      {
        "colType": "String",
        "colName": "series"
      },
      {
        "colType": "Numeric",
        "colName": "num"
      },
      {
        "colType": "Numeric",
        "colName": "rate"
      }
    ]
  };

  var barDistanceRatio = 1/6;
  var year = 2018;
  
  new pvc.BarChart({
      canvas: "cccExample",
      width: 600,
      height: 400,
      animate: false,
      selectable: true,
      hoverable: true,
      legend: true,
      legendPosition: "top",
      
      crosstabMode: false,
      readers: [
        // Logical row structure always places 
        // discrete columns at the left.
        "month", "series", "year", "num", "rate"
      ],

      dimensions: {
        month: {valueType: String},
        year:  {valueType: Number, format: "#", isDiscrete: true},
        num:   {valueType: Number},
        rate:  {valueType: Number, format: "#,0%"},
      },

      // Use the year to split the data between plots
      dataPartRole: "year",
      baseAxisTicks: true,
      
      // Percentage of filled space in each category band (month).
     ...