4

I have a jQPlot line graph with three different series on it and am using the Highlighter plug in to show hover overs on the data points in each series. I'd like to use different options for highlighter for each line in the graph.

Lines 1 and 2 need to show the y value and line 3 needs to show the y value as well as a message. For example, the hover over on line 1 would be "10" but line 3 needs to be "Target = 25".

I can't seem to find any way to specify different options for each specific series. Any help would be much appreciated.

nolt2232
  • 2,594
  • 1
  • 22
  • 33

2 Answers2

10

Add a highlighter object to each series and specify the format string. Here's an example script with two series: 

var series1 = [[1, 2], [2, 3], [3, 4]]; 
var series2 = [[6, 7], [7, 8], [8, 9]]; 

var plot = $.jqplot('chart1', [series1, series2],
{
  series:[
      {
          highlighter: {formatString: "%d"}
      },         
      {
          highlighter: {formatString: "Target = %d"}
      }
  ],

  highlighter: {show: true}
}
Kryptic
  • 1,922
  • 2
  • 21
  • 29
  • Note in my testing (on v1.0.7r1224), you will get passed an *already formatted string* into highlighter's `formatString` if you've already formatted it in `axes.yaxis.tickOptions.formatString`. For example, I have `axes.yaxis.tickOptions.formatString = '$d'`, so the highlighter is passed the string `"$90"` instead of the float `90.30`. – Tom McKenzie Mar 06 '13 at 04:13
  • It also has the side-effect that if your formatted value can't get parsed as a number, `%f` or `%d` will yield null/empty string. – Tom McKenzie Mar 06 '13 at 04:20
0

If you want the 'x' and 'y' values to get passed to the specific series highlighter without the format used in the axes.yaxis.tickOptions.formatString option, you can set the useAxesFormatters: false in the highlighter object applied to the series, so you can apply your personalized format to the raw values

dimabe
  • 104
  • 7