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:
Please view the Prepare section at Introduction To Axis And Grid Of jqplot Chart.
You need to add the script that is required by the 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.
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>

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.

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>

Set ShowHorizontalLine
, ShowVerticalLine
property to true
, then there will be horizontal and vertical lines that 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>

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