I have been working with JQPlot for a week or so now and am banging my head against the wall trying to get highlighting working. I am loading the following CSS and .js files...
jquery.jqplot.min.css
jQueryCombined.css
...a couple others that don't relate...
jquery-1.4.2.min.js
jquery-ui-1.8rc3.custom.min.js
jquery.tree.js
fancybox/jquery.fancybox-1.3.1.js
functions.js
jquery.calendar-widget.js
jquery.validate.min.js
validation-additional-methods.js
jquery.form.js
thickbox.js
jquery.jqplot.min.js
plugins/jqplot.canvasTextRenderer.min.js
plugins/jqplot.canvasAxisLabelRenderer.min.js
plugins/jqplot.dateAxisRenderer.min.js
plugins/jqplot.canvasAxisTickRenderer.min.js
plugins/jqplot.highlighter.min.js
plugins/jqplot.cursor.min.js
jquery.pstrength-min.1.2.js
jquery.qtip-1.0.0-rc3.min.js
fileuploader.js
And here is the JS to produce a graph:
function plotGraph628() { var line1 = [[1, 1.366556], [2, 1.317904], [3, 1.406245], [4, 1.590483], [5, 1.716111], [6, 1.815133], [7, 1.92456]]; var line2 = [[1, 1.36964213], [2, 1.35712154], [3, 1.36646157], [4, 1.35650663], [5, 1.54406956], [6, 1.78211369], [7, 1.86560989], [8, 1.94269674], [9, 1.81608062], [10, 2.03318191], [11, 1.58755349], [12, 1.42688531]]; var line3 = [[1, 1.4628504486138], [2, 1.602621125026], [3, 1.7262261361072], [4, 1.942346002723], [5, 2.060941295693], [6, 2.4290269175071], [7, 2.3278644684844], [8, 2.2806395719139], [9, 2.1383304036506], [10, 2.2496371015956], [11, 1.8309307748663], [12, 1.7967678025669]]; var lineM = [[1, -0.065826584463948], [2, -0.17765716461611], [3, -0.18536455300624], [4, -0.18115361641526], [5, -0.1673168936998], [6, -0.25273244733621], [7, -0.1732508373853]];
$.jqplot('flot628', [ line1, line2, line3, lineM], {
title: '',
legend:{show:true},
highlighter: {sizeAdjust: 10, tooltipAxes: 'y', showTooltip: true},
cursor: {show: false},
series: [
{ label: 'FY-10', showLine: true, showMarker: true, markerOptions: {style: 'circle'}},
{ label: 'FY-09', showLine: true, showMarker: true, markerOptions: {style: 'diamond'}},
{ label: 'Plan-10', showLine: true, showMarker: true, markerOptions: {style: 'square'}},
{ label: 'Revenue: Total Monthly', yaxis: 'y2axis', showLine: true, showMarker: true, markerOptions: {style: 'filledDiamond'}}],
axes:
{xaxis: {
ticks: [[1, "Jan"], [2, "Feb"], [3, "Mar"], [4, "Apr"], [5, "May"], [6, "Jun"], [7, "Jul"], [8, "Aug"], [9, "Sep"], [10, "Oct"], [11, "Nov"], [12, "Dec"]],
renderer:$.jqplot.CategoryAxisRenderer,
rendererOptions:{tickRenderer:$.jqplot.CanvasAxisTickRenderer},
tickOptions:{
formatString:"%s",
fontSize:"10pt",
fontFamily:"Georgia",
angle:-30
},
labelOptions: {
enableFontSupport: true,
fontFamily: "Georgia",
fontSize: "12pt"
}},
yaxis: {labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
label: "Millions",
tickOptions:{formatString:"%.2f"},
labelOptions: {
enableFontSupport: true,
fontFamily: "Georgia",
fontSize: "12pt"
}},
y2axis: {labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
label: "%",
labelOptions: {
enableFontSupport: true,
fontFamily: "Georgia",
fontSize: "12pt"
}}
}}
)};
Everything EXCEPT the highlighter works absolutely perfectly. Can anyone tell me what I am doing wrong getting this functionality up and running?