Como desenhar um gráfico com eixo x não linear (escala logarítmica)? - gráficos, desenhar, flot, linear

Estou tentando desenhar um gráfico de poder crítico como este:

Os dados que recebo são lineares. Um valor a cada segundo, de 1 a 18000. Não tenho idéia de como ensinar flot para desenhar um xaxis não linear. Tentei definir tiques personalizados, mas isso parece ter apenas impacto nos rótulos, não na linha.

Os tiquetaques do eixo x sempre serão os mesmos e não precisam ser calculados:

[1s,5s,15s,30s,1m,2m,3m,5m,10m,20m30m,1h,2h,3h,5h]

Playground, incluindo toneladas de dados: https://jsfiddle.net/ogeo2ygx/6/

Código:

$.plot($("#cpChart"), [{data: data,label: "Critical Power", labelBoxBorderColor: 0, color: "#cbcbcb",yaxis:1,lines: { show: true, fill: true } }], {
xaxes: [{
//here should be some Magic to Draw an nice Critical Power Chart
tickFormatter: (t, v) => {
return t + "s";
}
}],
yaxes: [{
alignTicksWithAxis: 1,
position: "left",
tickFormatter: (t, v) => {
return t.toFixed(0) + " Watt"
}
}],
legend: {
position: "sw",
labelBoxBorderColor: 0
},
colors: ["#1ab394"],
grid: {
color: "#999999",
clickable: true,
tickColor: "#D4D4D4",
borderWidth: 0,
hoverable: true
}
});

Respostas:

Você pode conseguir isso (que é chamado escala logarítmica) com duas etapas:

1. Transforme os valores do eixo x usando o Math.log função (com um +1 porque o logaritmo de zero é -in infinito).
2. Definir um costume ticks matriz com seus carrapatos.

Veja o documentação Para maiores informações. Código relevante:

xaxes: [{
ticks: [[1, "1s"],[5, "5s"], [15, "15s"],[30, "30s"],[60, "1m"],[120, "2m"],[180, "3m"], [300, "5m"], [600, "10m"], [1200, "20m"], [1800, "30m"],[3600, "1h"], [7200, "2h"], [10800, "3h"], [18000, "5h"]],
transform: (x) => { return Math.log(1 + x); },
inverseTransform: (x) => { return Math.exp(x) - 1; }
}],

Violino atualizado: https://jsfiddle.net/ogeo2ygx/8/