1

I have created various Charts using Arithemtic(constant scale) on Y-axis. Now I wish to create one with a Logarithmic Y axis.

Eg: The distance between 1 and 2 should be same as 2 and 4

Any Ideas on the scaling method

Thanks

Iterator
  • 20,250
  • 12
  • 75
  • 111
Akash
  • 4,956
  • 11
  • 42
  • 70

2 Answers2

1

You can use Morris.js to draw the charts.

Then you can extend Morris and modify the transY function to do the logarithmic scale like this:

(function () {
    var $, MyMorris;

    MyMorris = window.CbyMorris = {};
    $ = jQuery;

    MyMorris = Object.create(Morris);

    MyMorris.Grid.prototype.gridDefaults["yLogScale"] = false;

    MyMorris.Grid.prototype.transY = function (y) {
        if (!this.options.horizontal) {
            if (this.options.yLogScale) {
                return this.bottom - (this.height * Math.log((y + 1) - this.ymin) / Math.log(this.ymax / (this.ymin + 1)));
            } else {
                return this.bottom - (y - this.ymin) * this.dy;
            }
        } else {
            return this.left + (y - this.ymin) * this.dy;
        }
    };
}).call(this);

Then set the yLogScale parameter to true in your Morris config:

yLogScale: true

Please refer to my full answer to see the result: https://stackoverflow.com/a/39878478/1351076

Community
  • 1
  • 1
krlzlx
  • 5,752
  • 14
  • 47
  • 55
1

Does 'Arithemtic' refer to a particular program or plugin? Otherwise, if you just mean you have a list of x and y values then put the y values through a log function and plot that. What language are you programming in?

Edit

Hey Sorry it took me a while to get back to you. Is this the code you're looking for?

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Demo</title>
    
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script>

        var test = {
            x_values: [0,10,20,30,40,50,60,70,80,90,100],
            y_values: [0,10,20,30,40,50,60,70,80,90,100],
            convert_values_to_log10: function (values) {
                var i=0;
                var converted_values = []
                for (i=0; i<values.length; i++) {
                    converted_values[i] = Math.log(values[i])/Math.LN10
                }
            return converted_values;
            }
            
        }
        
        $(document).ready(function(){
          $('#x_vals').text(test.x_values.toString());
          $('#y_vals').text(test.y_values.toString());
          $('#y10_vals').text(test.convert_values_to_log10(test.y_values).toString());
        });
        
    </script>
    
  </head>
  <body>

    <h2>x values = </h2>
    <p id="x_vals"></p>
    <h2>y values = </h2>
    <p id="y_vals"></p>
    <h2>log10 y values = </h2>
    <p id="y10_vals"></p>

  </body>
</html>
Community
  • 1
  • 1
AJP
  • 26,547
  • 23
  • 88
  • 127
  • Hi, its in HTML 5 (javascript), Arithemtic means fixed, eg: the distance between 10 to 20 is same a 20, 30, on the other hand in case of Log Charts, the distance between 10 to 20 is same as 20 to 40 (double) – Akash Aug 20 '11 at 18:07