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 always want text "Message" before the point value, you just need to add it in formatString :
highlighter:{
show: true,
formatString: 'Message %s',
//other stuff like sizeAdjust...
}
You can use your s2 variable too if it corresponds to ticks you want to display :
axes: {
yaxis: {
ticks: s2,
tickRenderer: ...
}
}
<script type="text/javascript"> $('#page3a').live('pageshow', function () {
var s1 = [[1, 1], [2, 2], [3, 3], [4, 4], [5, 5]];
var s2 = [["Message 1"], ["Message 2"], ["Message 3"], ["Message 4"], ["Message 5"]];
var lineGraph1 = $.jqplot('lineGraph1', [s1,s2], {
seriesDefault: {
showMarker: false,
pointLabels: { show: true }
},
grid: {
drawBorder: false,
drawGridlines: false,
background: '#eafaff',
shadow: false
},
axes: {
xaxis: {ticks: s2}
},
highlighter: {
show: true,
sizeAdjust: 8,
tooltipLocation: 'n',
tooltipAxes: 'x',
formatString: '%s',
}
});
});</script>
What about something like this (adapted from jqplot tooltip on bar chart )?
$('#lineGraph1').bind('jqplotDataMouseOver', function (ev, seriesIndex, pointIndex, data) {
var mouseX = ev.pageX; //these are going to be how jquery knows where to put the div that will be our tooltip
var mouseY = ev.pageY;
$('#chartpseudotooltip').html(s2[pointIndex] + ', (' + data[0] +', ' + data[1] + ')');
var cssObj = {
'position' : 'absolute',
'font-weight' : 'bold',
'left' : mouseX + 'px', //usually needs more offset here
'top' : mouseY + 'px',
'background-color': 'white'
};
$('#chartpseudotooltip').css(cssObj);
});
$('#lineGraph1').bind('jqplotDataUnhighlight', function (ev) {
$('#chartpseudotooltip').html('');
});
This will draw a small tooltip of the form Message X, (x_value, y_value)
when the mouse passes over a data point. You can then style the tooltip further to suit.
In this example the tooltip was as follows:
<div id="chartpseudotooltip"></div>
You can get the answer here jsfiddle
var line1=[['10/17/2013',21],['1/30/2014',3],['11/1/2013',12],['10/2/2013',3],['11/5/2013',18]];
var line2=[['10/17/2013',41],['1/30/2014',33],['11/1/2013',12],['10/2/2013',63],['11/5/2013',18]];
var plot1 = $.jqplot('linegraph1', [line1,line2],{
seriesDefaults: {
lineWidth: 1,
markerOptions: {
show: true, // wether to show data point markers.
style: 'filledCircle', // circle, diamond, square, filledCircle.
size: 2 // size (diameter, edge length, etc.) of the marker.
}},
axes:{
xaxis:{
renderer:$.jqplot.DateAxisRenderer,
tickOptions:{
formatString:'%b %#d',
showGridline: false
}
},
yaxis:{min:0,numberTicks:25,
tickOptions:{
showGridline: false
}
}
},
legend :
{
"show" : true,
location: 'se'
},
series : [
{
label : "line1",highlighter: {formatString: "<div style='text-align:center;'><span>%s </span><br/><span> Blue: %s <br/>custom tooltip<span></div>"}
},
{
label : "line2",highlighter: {formatString: "<div style='text-align:center;'><span>%s </span><br/><span> Orange: %s <br/>custom tooltip<span></div>"},
}
],
highlighter: {
show: true,
sizeAdjust: 25.5,
tooltipLocation: 's'
}
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.