Added scale (linear, log) option to AutoScaleAxis.

site/data/pages/getting-started.yml

@@ -727,7 +727,14 @@ sections:
                               default <code>Chartist.StepAxis</code> X-Axis, we can completely remove the labels from our data,
                               once we use a different axis than the step based one. Also you can see now from the
                               data series is that we are specifying 2-dimensional values directly.
-
+                  - type: live-example
+                    data:
+                      title: Logarithmic scaled axes
+                      level: 6
+                      id: example-axis-log
+                      classes: ct-golden-section
+                      intro: >
+                               Use the <code>scale</code> option to change each axis to logarithmic scale.
             - type: sub-section
               data:
                 title: Fixed stuff can be sweet too!

site/examples/example-axis-log.js

@@ -0,0 +1,22 @@
+new Chartist.Line('.ct-chart', {
+  series: [[
+    {x: 1, y: 11000},
+    {x: 2, y: 5000},
+    {x: 4, y: 300},
+    {x: 8, y: 12.5},
+    {x: 16, y: 1.25},
+    {x: 32, y: 0.25},
+    {x: 100, y: 0.0625},
+  ]]
+}, {
+  axisX: {
+    type: Chartist.AutoScaleAxis,
+    onlyInteger: true,
+    scale: 'log2'
+  }, 
+  axisY: {
+    type: Chartist.AutoScaleAxis,
+    onlyInteger: false,
+    scale: 'log10'
+  }  
+});

src/scripts/axes/auto-scale-axis.js

@@ -27,20 +27,45 @@
     // Usually we calculate highLow based on the data but this can be overriden by a highLow object in the options
     var highLow = options.highLow || Chartist.getHighLow(data.normalized, options, axisUnit.pos);
     this.bounds = Chartist.getBounds(chartRect[axisUnit.rectEnd] - chartRect[axisUnit.rectStart], highLow, options.scaleMinSpace || 20, options.onlyInteger);
-    this.range = {
-      min: this.bounds.min,
-      max: this.bounds.max
-    };
-
+
+    var scale = options.scale || 'linear'; 
+    var match = scale.match(/^([a-z]+)(\d+)?$/);
+    this.scale = {
+      type : match[1],
+      base : Number(match[2])
+    }
+    if (this.scale.type === 'log') {
+      var base = this.scale.base;
+      var minDecade = Math.floor(log(this.bounds.low, base));
+      var maxDecade = Math.ceil(log(this.bounds.high, base));
+      this.bounds.min = Math.pow(base, minDecade);
+      this.bounds.max = Math.pow(base, maxDecade);
+      this.bounds.values = [];
+      for(var decade = minDecade; decade <= maxDecade; ++decade) {
+        this.bounds.values.push(Math.pow(base, decade));
+      }
+    }
+
     Chartist.AutoScaleAxis.super.constructor.call(this,
       axisUnit,
       chartRect,
       this.bounds.values,
       options);
   }
 
+  function log(val, base) {
+    return Math.log(val) / Math.log(base);
+  }
+
   function projectValue(value) {
-    return this.axisLength * (+Chartist.getMultiValue(value, this.units.pos) - this.bounds.min) / this.bounds.range;
+    var v = +Chartist.getMultiValue(value, this.units.pos);
+    if (this.scale.type === 'log') {
+      var max = this.bounds.max;
+      var min = this.bounds.min;
+      var base = this.scale.base;
+      return this.axisLength / log(max / min, base) * log(v / min, base);
+    }
+    return this.axisLength * (v - this.bounds.min) / this.bounds.range;      
   }
 
   Chartist.AutoScaleAxis = Chartist.Axis.extend({