Click here to Skip to main content
15,867,453 members
Articles / Web Development / ASP.NET

Show Cursor Location And Zoom In jqplot Chart

Rate me:
Please Sign up or sign in to vote.
0.00/5 (No votes)
1 Feb 2012CPOL2 min read 18.2K   3   1
jqplot can display the location of the cursor, can also enlarge an area that user selected

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 set the cursor of Plot chart, the catalog is as follows:

Prepare

Please view the Prepare section at Introduction To Axis And Grid Of jqplot Chart.

Required Scripts

You need to add the script that is required by the cursor, such as:

HTML
<br /><script type="text/javascript"
 src="js/plugins/jqplot.cursor.min.js">
</script>

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

HTML
<br /><appSettings>
 ...

 <add key="je.jqplot.Cursor.js"
  value="~/js/plugins/jqplot.cursor.min.js"/>
</appSettings>
  

<je:ResourceLoader ID="resource" runat="server"
 JQPlotCursor="true" />

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

Cursor

Only Show property of CursorSetting needs to be set to true, you can display cursor in the chart:

HTML
<br /><je:Plot ID="plot1" 
runat="server" IsVariable="true"
 Data="[[['2012-1-31',1],['2012-2-1',2],
 ['2012-2-2',4],['2012-2-3',8]]]">

 <CursorSetting Show="true" />

 <AxesSetting>
  <XAxisSetting
   Renderer="DateAxisRenderer"
   TickRendererSetting-FormatString="%Y-%#m-%#d">
  </XAxisSetting>
 </AxesSetting>
</je:Plot>

Location And Style

By the ToolTipLocation and ToolTipOffset properties of CursorSetting, you can control the location of tip, Style property indicates that cursor style:

HTML
<br /><je:Plot ID="plot2" 
runat="server" IsVariable="true"
 Data="[[[1,1],[2,2],[2,4],[3,8]]]">
 <CursorSetting
  Show="true"
  ToolTipLocation="ne"
  ToolTipOffset="20"
  Style="pointer" />
</je:Plot>

The value of Style is the CSS style cursor.

Following the Mouse

Set the FollowMouse property to true, the location information will follow the mouse movement:

HTML
<br /><je:Plot ID="plot3" runat="server" IsVariable="true"
 Data="[[[1,1],[2,2],[2,4],[3,8]]]">
 <CursorSetting
  Show="true"
  FollowMouse="true" />
</je:Plot>

Display Vertical And Horizontal Lines

Set ShowHorizontalLine, ShowVerticalLine property to true, then there will be horizontal and vertical lines that are displayed:

HTML
<br /><je:Plot ID="plot4" runat="server" IsVariable="true"
 Data="[[[4,2],[2,5],[3,2],[2,8]]]">
 <CursorSetting Show="true"
  ShowHorizontalLine="true"
  ShowVerticalLine="true" />
</je:Plot>

Zoom

Only need to set the property to true, you can complete function for zooming:

HTML
<br /><je:Plot ID="plot5" runat="server" IsVariable="true">
 
 <CursorSetting Show="true" Zoom="true" />

 <AxesSetting>
  <XAxisSetting TickRendererSetting-FormatString="%d">
  </XAxisSetting>
 </AxesSetting>
</je:Plot>

Use the mouse to select a region, the region will be enlarged.

In addition, the data in the example above is added by the following code:

HTML
<br />// ...

using zoyobar.shared.panzer.web.jqueryui.plusin.jqplot;

public partial class plot_Cursor1 : System.Web.UI.Page
{
 protected void Page_Load ( object sender, EventArgs e )
 {
  Data data = new Data ( );

  for ( int x = 1; x <= 12; x++ )
   data.AppendPoint ( new Point ( x, x * x ) );

  this.plot5.AppendData ( data );
 }
}

Constraint

Set the ConstrainZoomTo property to x, you can only zoom along the x axis:

HTML
<br /><je:Plot ID="plot6" 
runat="server" IsVariable="true"
 Data="[[['2012-1-1',1],['2012-1-2',4],
 ['2012-1-3',9]]]">

 <CursorSetting
  Show="true"
  Zoom="true"
  ConstrainZoomTo="x" />
 
 <AxesSetting>
  <XAxisSetting Renderer="DateAxisRenderer">
  </XAxisSetting>
 </AxesSetting>
</je:Plot>

By default, double-click the chart to restore the original, but you can set ClickReset property to true, so single-click can restore the original image:

HTML
<br /><je:Plot ID="plot7" 
runat="server" IsVariable="true"
 Data="[[[1,2],[3,4],[5,6]]]">
 <CursorSetting
  Show="true"
  Zoom="true"
  ClickReset="true" />
</je:Plot>

License

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


Written By
United States United States
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
QuestionHow to use JQplot graph as a control (like chart control in asp.net) in asp.net? Pin
Arul Jesuraj21-May-12 3:13
Arul Jesuraj21-May-12 3:13 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.