Bar Chart with Static Overlapped Bars — using dataPartRole

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 dataset = {
    resultset: [
      ["Fundamentals", 73,  43], 
      ["Maternal Newborn", 83,  20], 
      ["Mental Health", 120, 120], 
      ["Pharmacolgy", 30,  15]
    ],
    metadata: [
     {colName: "category", colType: "String" }, 
     {colName: "total",    colType: "Numeric"},
     {colName: "partial",  colType: "Numeric"}
    ]
  };

  var seriesOrder = ["total", "partial"];

  new pvc.BarChart({
    canvas: "cccExample",
    width:  500,
    height: 400,

    // Data source
    crosstabMode: true,

    dimensions: {
      "category": {
        label: "Practice",
      },
      "series": {
        label: "Measure",

        // Dimensions bound to dataPart
        // visual role are hidden by default.
        isHidden: false,

        // Change series labels
        formatter: function(value) {
          switch(value) {
            case "total":   return "Total #";
            case "partial": return "Partial #";
          }
          return value;
        },

        // Fix total/partial order
        comparer: function(a, b) {
          return def.compare(
              seriesOrder.indexOf(a),
              seriesOrder.indexOf(b));
        }
      }
    },

    colors: ["#333333", "#39A74A"],

    dataPartRole: "series",

    plots: [
      // Main plot (type bar)
      {
        name: "main", 
        dataPart: "total",
        barSizeMax: 30
      },

      // Second plot
      {
        type:      "bar",
        dataPart:  "partial",
        barSizeMax: 30
      }
    ],

    // Proportion of Band occupied vs free space
    //baseAxisBandSizeRatio: 0.6,

    orthoAxisOffset: 0.02,

    // Interaction
    animate: false,
    selectable: true,
    hoverable: true,

    // Panels
    legend: true,
    legendPosition: "right"
  })
  .setData(dataset)
  .render();
});