Line Chart - Previous Month Comparison

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

// See related fiddles:
// 1. https://jsfiddle.net/duarteleao/vgmou5nx/
// 2. https://jsfiddle.net/duarteleao/02m1znou/

    def.setDebug(5);

    var cdaData = {
        "resultset": [
            // DatePrev | ValuePrev | Date | Value |
            ["2014-02-24",  70,   "2014-03-24", 55],
            ["2014-02-25",  20,   "2014-03-25",  5],
            [null,          null, "2014-03-26", 30],
            ["2014-02-27",  60,   "2014-03-27", 30],
            ["2014-02-28",  25,   "2014-03-28", 10],
            [null,          null, "2014-03-29", 20],
            [null,          null, "2014-03-30", 25],
            [null,          null, "2014-03-31", 20]
        ],
        "metadata": [
            {"colType": "String",  "colName": "datePrev"},
            {"colType": "Numeric", "colName": "valuePrev"},
            {"colType": "String",  "colName": "date"}, 
            {"colType": "Numeric", "colName": "value"}
        ]
    };

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

        crosstabMode: false,

        readers: [
            // Logical row structure always places 
            // discrete columns at the left.
            "datePrev", 
            "date", 
            "valuePrev", 
            "value",

            // Add dummy series dimensions, 
            // to make up the legend text.
            {
                names: "seriesPrev",
                reader: function(vitem, out) {
                    // Google DataTable style cells
                    // are accepted by CCC
                    out.seriesPrev = {
                        v: "prev", 
                        f: "Previous Month"
                    };
                }
            },
            {
                names: "series",
               ...