The plot(s) on this page use the following plugins:
<script type="text/javascript" src="../plugins/jqplot.cursor.min.js"></script>
<script type="text/javascript" src="../plugins/jqplot.dateAxisRenderer.min.js"></script>
The cursor plugin can also draw horizontal and vertical tracking lines across the plot to the cursor location. These are enabled with the "showHorizontalLine" and "showVerticalLine" options to the cursor plugin.
The vertical tracking line can interactively detect intersecting data points and display these data values in the legend. This functionality is enabled with the "showCursorLegend" option. The tracking lines and data display work seamlessly with plot zooming as well.
The data displayed by the vertical line represent the actual x,y data of the intersecting data point. When the line is not near a data point, no data will be displayed. You can control how close the line must be to a point to display a data value with the "intersectionThreshold" option.
If markers are visible at the data points (as with the first example on this page), the intersectionThreshold is added to the size of the marker and the "neighborThreshold" of the series to determine how close to the actual point the line must be to trigger an interseciton. All values are in pixels.
If no markers are shown, the marker size and neighborThreshold do not apply. The line must be within the intersectionThreshold of the data point to be detected. In general, if no markers are present, the intersectionThreshold should be >= 1 or else points may not be detected.
plot = $.jqplot('chart1', [goog], {
title: 'Google, Inc.',
series: [{
label: 'Google, Inc.',
neighborThreshold: -1
}],
axes: {
xaxis: {
renderer:$.jqplot.DateAxisRenderer,
min:'August 1, 2007',
tickInterval: '4 months',
tickOptions:{formatString:'%Y/%#m/%#d'}
},
yaxis: {
renderer: $.jqplot.LogAxisRenderer,
tickOptions:{formatString:'$%.2f'}
}
},
cursor: {
showVerticalLine:true,
showHorizontalLine:false,
showCursorLegend:true,
showTooltip: false,
zoom:true
}
});
Data detection also works with multiple lines and multiple axes. By default the cursor legend shows data in the same format as the axes display their values. The format string can be customized with the "cursorLegendFormatString" option. The plot below has the horizontal tracking line displayed and has the default double click zoom reset disabled so you have to click the "Reset Zoom" button to reset the chart.
plot1 = $.jqplot('chart2', [InPr, OutPr, ERPM], {
seriesDefaults: {showMarker:false},
series:[
{label:'InPr'},
{label:'OutPr', yaxis:'y2axis'},
{label:'ERPM', yaxis:'y3axis'}
],
cursor: {
showVerticalLine: true,
showHorizontalLine: true,
showCursorLegend: true,
showTooltip: false,
zoom: true,
dblClickReset: false,
intersectionThreshold: 6
},
legend: {location:'n'},
axesDefaults:{useSeriesColor: true, tickOptions:{formatString:'%d'}},
axes:{
xaxis:{min:0, max:1600},
yaxis:{min:0, max:600},
y2axis:{
min:1000,
max:2200,
numberTicks:9,
tickOptions:{showGridline:false}
},
y3axis:{}
}
});