Flot logarithmic scale

Question

I am plotting some data. Each data point has a radius depending on a parameter F and a colour depending on a parameter C. It is a 2D graph. And I need a logarithmic scale on the Xaxis. I know how to do it through a var "options" but not when I am using "hooks" and "raw".

I tried to modify the tickGenerator function and tickFormatter function without success. What am I doing wrong?

  function raw(plot2, ctx) {
    var data = plot2.getData();
    var axes = plot2.getAxes();
    var offset = plot2.getPlotOffset();
    console.dir(axes);
    axes.xaxis.options.transform = function(v) {return Math.log(v+1)};
    axes.xaxisoptions.ticks = [1,10,100,1000];

    for (var i = 0; i < data.length; i++) {
        var series = data[i];
        for (var j = 0; j < series.data.length; j++) {
            var color = "blue";
            var d = (series.data[j]);
            var x = offset.left + axes.xaxis.p2c(d[0]);
            var y = offset.top + axes.yaxis.p2c(d[1]);
            //var r = radius[j];
            var r = Math.sqrt(Math.log(fvalue2[j]*1000)/Math.LN10);
            ctx.beginPath();
            ctx.arc(x,y,r,0,Math.PI*2,true);
            ctx.closePath();            
            ctx.fillStyle = "#"+rainbow.colourAt(cvalue2[j]);
            ctx.fill();


        }    
    } 
    var plot2 = $.plot(
          $("#paretoPlaceholder"),

          [{ data: dataPareto, points: { show: true ,shadowSize:0,lineWidth: 0},shadowSize: 0,}],
          { hooks: { draw  : [raw] }}
  );

Answer 1

I finally found the solution. One has to add

plot2.setupGrid();
plot2.draw();

at the end of the function to update the plot.