Question

I am using jqPlot with DateAxisRenderer to display graphs of various functions of time. I want to make the graph communicate with other modules of the application, that also deal with time data (but not with graphs). To accomplish this, all modules will write and read the same time variable (so they always display data for the same instant). If any module sets the variable, the others have to react accordingly.

Example: User enters time in a readable format, what causes a custom tick to be displayed in the graph on the proper x coordinate.

However, to implement this, I need to convert between three representations of time

• any human-readable format (or the javascript Date object as its encapsulation)
• the timestamp used internally by jqPlot to represent time
• x coordinate (in pixels) in the graph

I know that DateAxisRenderer can display the timestamp in a customizable human-readable format, as it does so when it renders the x-axis. I know that after clicking in the graph, I get the timestamp in the event information (together with the x coordinate). But my question is: How to do these conversions explicitly?.

Answer 1

Date <–> human-readable formats

Datejs works well for this. For example:

var date = Date.parse('February 20th 1973');
var date = Date.parse('next thursday');

// Now let's convert a date into a human-readable string
var dateString = date.toString('dddd, MMMM d, yyyy');

Date <–> jqPlot timestamp

The timestamp used internally in jqPlot is simply the Unix time in milliseconds:

var exampleTimestamp = 1345671839000;
var date = new Date(exampleTimestamp);

// Now let's convert a date into a timestamp
var jqPlotTimestamp = date.getTime();

Date <–> x coordinate (in pixels)

Assuming your x-axis is linear you can determine the value of a point on the x-axis like this (fill in your own values):

var myPlot = jqplot(...);
var xAxis = myPlot.axes.xaxis;

var MARGIN_LEFT = 15; // Pixels from [left edge of chart --> minimum X value]

var pixelRange = 300; // Pixels from [min X value --> max X value]
var timeRange = xAxis.max - xAxis.min;

var time; // This will be our answer in the chart's units
time = xAxis.min + timeRange * (xCoordinate - MARGIN_LEFT) / pixelRange;

var timeInMillis = ... ; // Convert the X-Axis unit of time into millis
var date = new Date(timeInMillis);

// Now let's convert a date into an x coordinate
timeInMillis = date.getTime();
time = ...; // Convert millis into X-Axis unit of time
var x = MARGIN_LEFT + pixelRange * (time - xAxis.min) / timeRange;

At the time of writing this post, here is a list of the axis names:

['yMidAxis', 'xaxis', 'yaxis', 'x2axis', 'y2axis', 'y3axis', 'y4axis', 'y5axis', 'y6axis', 'y7axis', 'y8axis', 'y9axis'];