jQplot different time format on xaxis and highlight - time

Question

I have some series on jQplot for which I have set highlight options. My idea is to use %H:%M:%S for time format in highlight and %H:%M but cant set it.
axes:{
xaxis:{
autoscale: true,
renderer: $.jqplot.DateAxisRenderer,
tickRenderer: $.jqplot.CanvasAxisTickRenderer,
tickOptions: {
showTicks: true,
formatString:'%e %b %H:%M:%S',
fontSize: '11px',
},
},
},
highlighter: {
show: true,
sizeAdjust: 12,
tooltipContentEditor: customTooltip,
formatString: '#serieLabel#<br/>%s | %s',
},

Answer 1

If you want to use a different date/time format in the tooltip (highlight) than the date/time format used on the x-axis, rather than using formatString you can use the tooltipContentEditor to define a function that will return the formatted string to display in the tooltip.
Assuming you want the x-axis to show dates in the format %e %b %H:%M:%S (e.g. 29 Oct 04:12:12) but you want the tooltip to show them in the format %H:%M (e.g. 12:12) you can use the following code (unchanged from your code snippet above) to define the axes:
axes: {
xaxis: {
autoscale: true,
renderer: $.jqplot.DateAxisRenderer,
tickRenderer: $.jqplot.CanvasAxisTickRenderer,
tickOptions: {
showTicks: true,
formatString: '%e %b %H:%M:%S',
fontSize: '11px',
},
},
},
and the following code to define the highlighter:
highlighter: {
show: true,
sizeAdjust: 12,
tooltipContentEditor: function(str, seriesIndex, pointIndex, plot) {
// x-axis value
var date = series[seriesIndex][pointIndex][0];
// jqPlot formatter function for date/time (used by $.jqplotDateTickFormatter)
var formatter = $.jqplot.DateTickFormatter;
// Do the formatting
var formattedDate = formatter('%H:%M', date);
// y-axis value for series hovered over
var seriesValue = series[seriesIndex][pointIndex][1];
return '#serieLabel#<br/>' + formattedDate + '|' + seriesValue;
}
},
Here we are using a custom function tooltipContentEditor which retrieves the date/time from the series hovered over and formats it using $.jqplot.DateTickFormatter. The function then concatenates the strings together to return the text to display in the tooltip. The key lines for formatting the date/time correctly are:
// DateAxisRenderer
var formatter = $.jqplot.DateTickFormatter;
// Do the formatting
var formattedDate = formatter('%H:%M', date);
This produces the following tooltip when a data point is hovered over:
A working example can be seen here.