Horizontal Line and Label At the Maximum Value.

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", 
  "ccc/protovis"
], function(pvc, def, pv) {
    // Transform the data.
    
    // https://stackoverflow.com/questions/11526504/minimum-and-maximum-date
    var dateMax = new Date(8640000000000000);
    var pvFormat = pv.Format.date("%Y-%m-%d");
    
    var rows = relational_01.resultset;
    var R = rows.length;
    for(var i = 0; i < R; i++) {
        var row = rows[i];
        var sourceValue = row[1];
        if(sourceValue != null) {
            var value = pvFormat.parse(sourceValue);
            row[1] = new Date(dateMax - value);
        }
    }
    
    new pvc.LineChart({
        canvas: "cccExample",
        width:  450,
        height: 350,
        timeSeries: true,
        timeSeriesFormat: "%Y-%m-%d",
        legend: true,
        dimensions: {
          "category": {
             // Fix what shows up in the tooltip
             formatter: function(value) {
                 if(value == null) {
                     return "";
                 }
                 
                 var realValue = new Date(dateMax - value);
                 return pvFormat.format(realValue);
             }
          }
        },
        
        // Fix the axis's ticks.
        baseAxisTickFormatter: function(value) {
           var realValue = new Date(dateMax - value);
           return this.format(realValue);
        }
    })
    .setData(relational_01, {crosstabMode: false})
    .render();
});