Click here to Skip to main content
Click here to Skip to main content
Technical Blog

Show Cursor Location And Zoom In jqplot Chart

, 1 Feb 2012 CPOL
Rate this:
Please Sign up or sign in to vote.
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 add the script that required by cursor, such as:

<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:

<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:

<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:

<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:

<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 are displayed:

<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:

<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:

<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:

<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:

<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)

Share

About the Author

zoyobar

United States United States
No Biography provided

Comments and Discussions

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

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

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

| Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.1411023.1 | Last Updated 1 Feb 2012
Article Copyright 2012 by zoyobar
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid