Highlight Data in jqplot Chart

A Technical Blog article. View original blog here.[^]

The original: http://zoyobar.blogspot.com/2012/02/highlight-data-in-jqplot-chart.html.

Introduction/Catalog

Please download the sample code at the section JQueryElement demo download of Download JQueryElement, the directory is /plot/Default.aspx.

This article will explain in detail how to highlight data in Plot chart, the catalog is as follows:

Prepare

Please view the Prepare section at Introduction To Basic Properties Of jqplot Chart.

Required Scripts

You need add the script that required by highlight, such as:

<script type="text/javascript" src="js/plugins/jqplot.highlighter.min.js">
</script>

If you use the ResourceLoader to load scripts, you need to configure the web.config and set the JQPlotHighlighter property of ResourceLoader to true, for example:

<appSettings>
 ...

 <add key="je.jqplot.Highlighter.js" value="~/js/plugins/jqplot.highlighter.min.js"/>
</appSettings>
<je:ResourceLoader ID="resource" runat="server" JQPlotHighlighter="true" />

More about the ResourceLoader, you can refer to Use ResourceLoader To Automatically Add Script And Style.

Highlight

Set the Show property of HighlighterSetting to true, you will highlight the data which the mouse hover on:

<je:Plot ID="plot1" runat="server" IsVariable="true" Data="[[[1,1],[3,2],[4,4],[5,8]]]">
 <HighlighterSetting Show="true" />
</je:Plot>

Size

The SizeAdjust property of HighlighterSetting represents the size of highlight:

<je:Plot ID="plot2" runat="server" 
           IsVariable="true" Data="[[[2,1],[3,2],[4,7],[5,8]]]">
 <HighlighterSetting Show="true" SizeAdjust="10" />
</je:Plot>

Tooltip

The ToolTipLocation property of HighlighterSetting represents the location of tooltip, ToolTipOffset property represents the offset distance of the tooltip, ToolTipFadeSpeed property represents the disappearing speed of tooltip:

<je:Plot ID="plot3" runat="server" IsVariable="true"
           Data="[[[2,3],[3,7],[4,7],[5,9]]]">
 <HighlighterSetting Show="true"
  ToolTipLocation="e"
  ToolTipOffset="30"
  ToolTipFadeSpeed="slow"
  FormatString="x: %.5P, y: %.5P" />
</je:Plot>

You can set the content of tooltip by FormatString property, by default the first value is the data of x axis, the second value is the y axis data.

If you set ToolTipAxes property to yx, the first value will be the data of y axis:

<je:Plot ID="plot4" runat="server" IsVariable="true"
            Data="[[[2,3],[3,7],[4,7],[5,9]]]">
 <HighlighterSetting Show="true"
  ToolTipAxes="yx" />
</je:Plot>

Bring To Front

The BringSeriesToFront property is set to true, the highlighted series will be placed on top:

<je:Plot ID="plot5" runat="server" IsVariable="true"
           Data="[[[1,1],[2,4],[3,7],[4,9]],[[1,2],[2,2],[3,3],[4,1]]]">
 <HighlighterSetting Show="true"
  BringSeriesToFront="true" />
</je:Plot>