Click here to Skip to main content
Click here to Skip to main content

Highlight Data in jqplot Chart

, 4 Feb 2012
Rate this:
Please Sign up or sign in to vote.
How to highlight data in a jqplot chart.

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>

Related Content

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

zoyobar

United States United States
No Biography provided

Comments and Discussions

 
-- There are no messages in this forum --
| Advertise | Privacy | Mobile
Web02 | 2.8.140827.1 | Last Updated 4 Feb 2012
Article Copyright 2012 by zoyobar
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid