Line Chart - Previous Week Comparison

Visual role binding to special discriminator dimension

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

  def.setDebug(5);

  var cdaData = {
    "resultset": [
      ["2021-01-01", "2020-12-25", 24, 34],
      ["2021-01-02", "2020-12-26", 83, 90],
      ["2021-01-03", "2020-12-27", 14, 43],
      ["2021-01-04", "2020-12-28", 87, 85],
      ["2021-01-05", "2020-12-29", 32, 36],
      ["2021-01-06", "2020-12-30", 51, 37],
      ["2021-01-07", "2020-12-31", 63, 36],
      ["2021-01-08", "2021-01-01", 56, 17],
      ["2021-01-09", "2021-01-02", 32, 62],
      ["2021-01-10", "2021-01-03", 18, 76],
      ["2021-01-11", "2021-01-04", 34, 20],
      ["2021-01-12", "2021-01-05", 48, 42],
      ["2021-01-13", "2021-01-06", 86, 28],
      ["2021-01-14", "2021-01-07", 62, 68],
      ["2021-01-15", "2021-01-08", 39, 40],
      ["2021-01-16", "2021-01-09", 62, 50],
      ["2021-01-17", "2021-01-10", 39, 70],
      ["2021-01-18", "2021-01-11", 75, 83],
      ["2021-01-19", "2021-01-12", 77, 79],
      ["2021-01-20", "2021-01-13", 22, 53]
    ],
    "metadata": [{
      "colIndex": 0,
      "colType": "String",
      "colName": "date"
    }, {
      "colIndex": 1,
      "colType": "String",
      "colName": "datePrevious"
    }, {
      "colIndex": 2,
      "colType": "Numeric",
      "colName": "value"
    }, {
      "colIndex": 3,
      "colType": "Numeric",
      "colName": "valuePrevious"
    }]
  };

  new pvc.LineChart({
      canvas: "cccExample",
      width: 400,
      height: 400,
      animate: false,
      selectable: true,
      hoverable: true,
      legend: true,
      crosstabMode: false,

      // Give local names to each column
      readers: [
        "date",
        "datePrev",
        "value",
        "valuePrev"
      ],

			// Give  local labels to each dimension
      // Activate timeseries
      dimensions: {
        date: {
          valueType: Date,
          label: "Date"
        },
        datePrev: {
          valueType: Date,
          label: "Date (Previous Week)"
   ...