Question

Does anyone have any idea how to create a logarithmic chart in FLOT?

Basically I am trying to create a chart that looks like the one shown here (top left):
http://leto.net/plot/examples/logarithms.html

However, I have given it a try using the same options but it doesn’t show the chart the same way. I think there must have been a lot of changes to FLOT since then considering that the post is quite old.

If anyone has any idea, please do let me know.

Thanks.

Answer 1

You can do this using the “transform” option on the yaxis.

See work here.

$(function () {
    // setup plot
    function sampleFunction(x1, x2, func) {
        var d = [ ];
        var step = (x2-x1)/300;
        for (var i = x1; i < x2; i += step )
            d.push([i, func( i ) ]);

        return d;
    }

    var options1 = {
        lines: { show: true },
        xaxis: { ticks: 4 },
        yaxis: { ticks: [0.001,0.01,0.1,1,10,100],
                 transform: function(v) {return Math.log(v+0.0001); /*move away from zero*/},
                 tickDecimals: 3 },
        grid: { hoverable: true, clickable: true, color: "#999" }
    };

    var data1 = sampleFunction( 0, 5, function(x){ return Math.exp(x)*Math.sin(x)*Math.sin(x) } );

    var plot1 = $.plot($("#chart1"),  [ { label: "exp(x)sin(x)^2", data: data1 } ], options1);
});

---

Full Working Code:

$(function () {
    // setup plot
    function sampleFunction(x1, x2, func) {
        var d = [ ];
        var step = (x2-x1)/300;
        for (var i = x1; i < x2; i += step )
            d.push([i, func( i ) ]);

        return d;
    }
    
    var options1 = {
        lines: { show: true  },
        xaxis: { ticks: 4 },
        yaxis: { ticks: [0.001,0.01,0.1,1,10,100],
                 transform:  function(v) {return Math.log(v+0.0001); /*move away from zero*/} , tickDecimals: 3 },
        grid: { hoverable: true, clickable: true , color: "#999"}
    };
    
    var data1 = sampleFunction( 0, 5, function(x){ return Math.exp(x)*Math.sin(x)*Math.sin(x) } );
    
    var plot1 = $.plot($("#chart1"),  [ { label: "exp(x)sin(x)^2", data: data1} ], options1);
    
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.min.js"></script>
<br/><br/>
<div id="chart1" style="width:600px;height:300px;"></div>