Question

I am using Flot to chart some data that I pull back from the server. The X-axis data that I receive is in units of milliseconds, and I want to display the chart with the X-axis in units of seconds. So, I thought this was a good use of the API‘s transform axis option. I applied my transform like so:

var plot = $.plot($("#placeholder"),
       { 
         grid: { hoverable: true, clickable: true },
         xaxis: { transform: function(x) { return x/1000; } }
       });

I can see that my transform function is being called by the framework, and I can see that the points themselves are being transformed — when I bind the plothover event and hover over the points, I can see that the X value is suitably transformed. The problem is that the x-axis tick labels are not also getting transformed.

What do I need to do to get the axis labels themselves transformed with my data?

Answer 1

I’m not sure what the “right” answer is, but you can provide your own tick labelling function, and just have it perform the same job as your transform function.

var plot = $.plot($("#placeholder"),
   { 
     grid: { hoverable: true, clickable: true },
     xaxis: { transform: function(x) { return x/1000; },
              tickFormatter: function(x) { return x/1000; } }
   });