Gráfico logarítmico en FLOT

Question

¿Alguien tiene alguna idea de cómo crear un gráfico logarítmico en FLOT?

Básicamente estoy tratando de crear un gráfico que se parece a la que se muestra aquí (arriba a la izquierda): http://leto.net/plot/examples/logarithms.html

Sin embargo, he dado una oportunidad usando las mismas opciones, pero no muestra el diagrama de la misma manera. Creo que debe haber habido muchos cambios en FLOT desde entonces, considerando que la publicación es bastante antigua.

Si alguien tiene alguna idea, hágamelo saber.

Gracias.

Answer 1

Puede hacerlo utilizando la opción "transformar" en el eje yaxis.

Ver el trabajo 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); 
}); 

---

Código de Trabajo completo:

$(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>

Answer 2

Gran trabajo Mark

Como las garrapatas del eje Y en gráficos logarítmicos están en el formato de poder de 10,

me gustaría compartir mejora en el eje Y garrapatas, Here que is.s

$(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 , 
       tickFormatter: function (v, axis) {return "10" + (Math.round(Math.log(v)/Math.LN10)).toString().sup();} 
       }, 
     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".sup(), data: data1} ], options1); 
}); 

Por favor, hágamelo saber si hay alguna forma mejor.

Gracias.

Answer 3

Como dijo el otro respondedor, buen trabajo Mark. Hay una manera de hacer que su solución sea más robusta.

Mark's respuesta funcionará para la mayoría de los casos, pero la trama no se verá bien para valores cercanos o inferiores a 0,0001. Además, no necesita modificar cada valor para alejarse de cero. Creo que flot intenta transformar 0 para determinar dónde debería estar el "fondo" de la trama. Debido a esto, no podrá hacer que los límites de su eje de trazado sean dinámicos. Esto hará que tus tramas se vean muy mal si tus valores son mucho mayores que 0.0001. Por lo tanto, la siguiente modificación hace que la solución de Mark sea más robusta, pero requiere conocer el valor y mínimo (ymin a continuación) en sus datos.

var options1 = { 
    lines: { show: true }, 
    xaxis: { ticks: 4 }, 
    yaxis: { ticks: [0.001,0.01,0.1,1,10,100], 
      transform: Function("v","return v == 0 ? Math.log("+Math.pow(10,ymin)+") : Math.log(v);"), tickDecimals: 3 }, 
    grid: { hoverable: true, clickable: true , color: "#999"} 
}; 

Answer 4

Es la base 10. ¿El enfoque no debería ser?

transform: function (v) { 
    if (v == 0) v = 0.0001; 
    return Math.log(v)/Math.log(10); 
}, 
inverseTransform: function (v) { 
    Math.pow(10, v); 
},