Line Chart with Simulated Log Scale

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) {
   
    // FIXME!!
    
    def.setDebug(16);
    
    // Protovis formatter for the original values 
    // (you may need to adjust the number of decimal places)
    var rawFormatter = pv.Format.createFormatter(
            pv.Format.number().fractionDigits(0, 2));

    new pvc.LineChart({
        canvas: "cccExample",
        width:  400,
        height: 400,    
        title: "Line Chart with Simulated Log Scale",
        animate:    false,
        selectable: true,
        hoverable:  true,
        legend:     true,
        dotsVisible: true,
        orthoAxisGrid: true,

        // DO NOT activate stacking. It has no meaning in a log scale!!
        stacked: false,

        // Hide minor ticks, cause these are drawn midway between major ticks;
        // not at the correct 5*10^n position...
        orthoAxisMinorTicks: false,

        // Show original values in tick labels
        orthoAxisTickFormatter: function(v) {
            return rawFormatter(Math.pow(10, v));
        },

        orthoAxisOriginIsZero: false,
        leafContentOverflow: 'hidden', // hack to hide bar-charts drawing bug!

        // Force tick and grid step to be 1.
        //   Hack 1. Ensure only 1x, 2x, 5x ticks steps are generated:
        orthoAxisTickExponentMin: 0,
        orthoAxisTickExponentMax: 0,

        //   Hack 2. Exclude 2x and 5x steps unless it gets really clobbered.
        orthoAxisLabelSpacingMin: 0.1, // em.s

        //   Hack 3. Force ticks to align with plot ends.
        orthoAxisDomainRoundMode: 'tick',

        dimensions: {
            "value": {
                 // Convert Values to its log_10.
                 // Original value, v, remains accessible in datum.rawValue .
                 // Negative values are converted to null
                 // (they're not representable with a log scale).
                 converter: function(v) {
                        if(v != null)...