I am trying to get a custom tool tip for the line graph as I want the tool tip to describe the points in greater detail rather than the value of that point. (Image attached further explaining what I am on about)
I have given an attempt on how to do it.
Below is my code:
<script type="text/javascript"> $('#page3a').live('pageshow', function () {
var s1 = [1, 2, 3, 4, 5];
var s2 = ["Message 1", "Message 2", "Message 3", "Message 4", "Message 5"];
var lineGraph1 = $.jqplot('lineGraph1', [s1,s2], {
animate: true,
seriesDefault: {
showMarker: false,
pointLabels: { show: true }
},
grid: {
drawBorder: false,
drawGridlines: false,
background: '#eafaff',
shadow: false
},
axesDefaults: {
show: false,
showTicks: false,
showTickMarks: false
},
highlighter: {
show: true,
sizeAdjust: 8,
tooltipLocation: 'n',
tooltipAxes: 'piered',
formatString:'%s',
fadeTooltip: true,
tooltipFadeSpeed: "fast",
useAxesFormatters: false
}
});
});</script>
Any help would be greatly appreciated. :)
There is a configuration option that allows you to provide a custom callback method that is called to retrieve the tooltip contents:
highlighter: {
tooltipContentEditor: function (str, seriesIndex, pointIndex) {
return str + "<br/> additional data";
},
// other options just for completeness
show: true,
showTooltip: true,
tooltipFade: true,
sizeAdjust: 10,
formatString: '%s',
tooltipLocation: 'n',
useAxesFormatters: false,
}
I have made slight edits to nick_w's answer. But I have the desired effect now, just pasting the code to help others in the future.
<script type="text/javascript">
$('#page3a').live('pageshow', function () {
var s1 = [1, 2, 3, 4, 5];
var s2 = ["Message 1", "Message 2", "Message 3", "Message 4", "Message 5"];
var lineGraph1 = $.jqplot('lineGraph1', [s1, s2], {
animate: true,
seriesDefault: {
showMarker: false,
pointLabels: { show: true }
},
grid: {
drawBorder: false,
drawGridlines: false,
background: '#eafaff',
shadow: false
},
axesDefaults: {
show: false,
showTicks: false,
showTickMarks: false
}
});
$('#lineGraph1').bind('jqplotDataMouseOver', function (ev, seriesIndex, pointIndex, data) {
var mouseX = ev.mouseX; //these are going to be how jquery knows where to put the div that will be our tooltip
var mouseY = ev.mouseY;
$('#chartpseudotooltip').html(s2[pointIndex] );
var cssObj = {
'position': 'absolute',
'font-weight': 'bold',
'left': mouseX + 'px', //usually needs more offset here
'top': mouseY + 'px',
'background-color': 'white',
'z-index':'1'
};
$('#chartpseudotooltip').css(cssObj);
});
$('#lineGraph1').bind('jqplotDataUnhighlight', function (ev) {
$('#chartpseudotooltip').html('');
});
});</script>
To call this script the following was added to my content div.
<div id="lineGraph1" style="margin-top: 20px; margin-left: 160px; width: 350px; height: 350px">
<div id="chartpseudotooltip"></div>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With