Bar Chart with a calculated discrete dimension feeding the color role

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>
<script src="//webdetails.github.io/ccc/charts/lib/q01-01.js"></script>
<div id="cccExample" />

JavaScript

require(["ccc/pvc", "ccc/def"], function(pvc, def) {
  
  var VALUE_COLUMN_INDEX = 2;
  var data = relational_04;
  var refValue = null;

  // Determine the reference value to be the "value" of the first row.
  var resultset = data && data.resultset;
  if (resultset && resultset.length) {
    refValue = resultset[0][VALUE_COLUMN_INDEX];
  }

  new pvc.BarChart({
      canvas: "cccExample",
      width: 600,
      height: 500,
      animate: false,
      legend: true,
      dimensions: {
        "salaryRange": {
          label: "Salary Range",
          // Hide from the tooltip
          isHidden: true,
          formatter: function(value) {
            if (value === null) {
              return "";
            }

            switch (value) {
              case "salaryRange1":
                return "Reference";

              case "salaryRange2":
                return "Below";
            }

            return "Unknown";
          }
        }
      },
      colorMap: {
        "salaryRange1": "green",
        "salaryRange2": "red"
      },
      calculations: [{
        names: "salaryRange",
        calculation: function(datum, outAtoms) {

          var value = datum.atoms.value.value;
          if (value === null) {
            return null;
          }

          if (refValue === null) {
            return null;
          }

          outAtoms.salaryRange = (value >= refValue) ?
            "salaryRange1" :
            "salaryRange2";
        }
      }],
      colorRole: "salaryRange"
    })
    .setData(data, {
      crosstabMode: true,
      dataCategoriesCount: 2
    })
    .render();
});