The code below in jsfidle shows an image and a text for some points.
The problem is that I didn't find a way to dinamically change the tooltip position and to some points the image appears outside the grid.
$(document).ready(function () {
var url= "http://cameraserraverde.com.br/img/"
var line1 = [['01', 650, ""], ['02', 600, url+"img_fev.jpg"], ['04', 330, url+"imagem_abr.jpg"], ['06', 280, ""], ['08', 230, url+"imagem_ago.jpg"], ['10', 320, url+"imagem_out.jpg"],['11', 600, url+"imagem_nov.jpg"], ['12', 630, ""]];
var plot2 = $.jqplot('test', [line1], {
seriesDefaults: {
rendererOptions: {
smooth: true
}
},
axes: {
xaxis: {
renderer: $.jqplot.DateAxisRenderer,
tickOptions:{formatString: "%b"},
tickInterval: '1 month'
}
},
series: [{ lineWidth: 2,
}],
highlighter: {
show: true,
useAxesFormatters: false,
tooltipContentEditor: tooltipContentEditor,
},
});
function tooltipContentEditor(str, seriesIndex, pointIndex, plot) {
div = "<div>";
if (plot.data[seriesIndex][pointIndex][2] != ""){
div+= "<img src='" + plot.data[seriesIndex][pointIndex][2] + "''/>";
}
div+= "<figcaption style='text-align: center; background:#D0D0D0'>" + plot.data[seriesIndex][pointIndex][1] + "m</figcaption></div>"
return div;
}
});
How can I define the tooltipLocation opposite to the point position, for example, if the point is on the grid's quadrant "ne", define the tooltipLocation as "sw"?
Looking for a solution I found this answer that allowed me to find a way. I didn't find a way to change the tooltipLocation, but by changing the layout of the div, I have the desired positioning.
That answer shows, among other things, how to know the x, y coordinates of the point and this allows you to find out in which part of the grid the point and the tooltip are in.
I included a css and changed the tooltipContentEditor function to identify the X and Y coordinates and create an id for the divso that the appropriate style is applied.
The code looks like this:
CSS:
#tooltipdivnw {
position: absolute;
bottom: 0px;
right: 0px;
}
#tooltipdivsw {
position: absolute;
top: 12px;
right: 0px;
}
#tooltipdivne {
position: absolute;
bottom: 0px;
left: 8px;
}
#tooltipdivse {
position: absolute;
top: 12px;
left: 12px;
}
function tooltipContentEditor:
function tooltipContentEditor(str, seriesIndex, pointIndex, plot) {
var div = "<div";
// get X, Y of point in grid
var data = plot.series[seriesIndex].data;
var x = plot.axes.xaxis.series_u2p(data[pointIndex][0]);
var y = plot.axes.yaxis.series_u2p(data[pointIndex][1]);
// Point on the right or left portion of the grid?
var loc = ( x > ( plot.grid._plotDimensions.width / 2) );
// In top or bottom portion?
loc = (loc << 1 ) | ( y > ( plot.grid._plotDimensions.height / 2) );
switch (loc) {
case 0 : div+= " id='tooltipdivse'>"; // point in top-left, div in 'se'
break;
case 1 : div+= " id='tooltipdivne'>"; // point in bottom-left, div in 'ne'
break;
case 2 : div+= " id='tooltipdivsw'>"; // point in top-right, div in 'sw'
break;
case 3 : div+= " id='tooltipdivnw'>"; // point in bottom-right, div in 'nw'
break;
}
// if have an image, add
if (plot.data[seriesIndex][pointIndex][2] != ""){
div+= "<img src='" + plot.data[seriesIndex][pointIndex][2] + "''/>";
}
div+= "<figcaption style='text-align: center; background:#D0D0D0'>" +
plot.data[seriesIndex][pointIndex][1] + "m</figcaption></div>"
return div;
}