Line chart with values normalized by series

by duarteleao

HTML

<link rel="stylesheet" href="http://www.webdetails.pt/ctools/charts/lib/tipsy.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.19/require.min.js"></script>
<script src="http://webdetails.github.io/ccc/charts/lib/amd/require.config.js"></script>
<script src="http://webdetails.github.io/ccc/charts/lib/q01-01.js"></script>
<div id="cccExample" />

JavaScript

require([
  "ccc/pvc", 
  "ccc/def", 
  "ccc/protovis"
], function(pvc, def, pv) {

  new pvc.LineChart({
      canvas: "cccExample",
      width:  700,
      height: 400,
      title:  "Line chart with values normalized by series",
      animate:    true,
      clickable:  true,
      selectable: true,
      hoverable:  true,
      legend:     true,
      legendPosition: 'right',
      axisGrid:   true,
      dotsVisible: true,
      nullInterpolationMode: 'linear',
      // This is just to force creating the "value" dimension, normally.
      readers: ['series, category, value'],

      valueRole: 'valueNormalized',
      dimensions: {
          valueNormalized: {valueType: Number, label: "Value"},
          value: {isHidden: true}
      },
      calculations: [
          {
              names: 'valueNormalized',
              calculation: function(datum, out) {
                  var series = datum.atoms.series.value;
                  var value  = datum.atoms.value.value;
                  var seriesSum = 100; // <-- TODO: lookup pre-computed series sums dictionary...
                  out.valueNormalized = value != null && seriesSum != 0 ? (value/seriesSum) : null;
              }
          }
      ] 
  })
  .setData(relationalCitiesDaily, {crosstabMode: false })
  .render();
});