1

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?

Ryley
  • 21,046
  • 2
  • 67
  • 81
Chris Farmer
  • 24,974
  • 34
  • 121
  • 164

1 Answers1

4

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; } }
   });
Ryley
  • 21,046
  • 2
  • 67
  • 81