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

Introduction To Axis And Grid Of jqplot Chart

, 12 Jan 2012 CPOL
Rate this:
Please Sign up or sign in to vote.
jqplot, the axis and grid of the chart can be easily set

The original: http://zoyobar.blogspot.com/2012/01/introduction-to-axis-and-grid-of-jqplot.html

Introduction/Catalog

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

Due to the limited time, synchronization cannot be guaranteed in more than one blog article, at the following address you can view up-to-date content, please understand:

http://zoyobar.blogspot.com/2012/01/introduction-to-axis-and-grid-of-jqplot.html

This article will explain in detail how to set the axis and grid of the Plot control, the catalog is as follows:

  • Prepare
  • Axis
  • Title
  • Tick
  • Pad
  • Border
  • Grid
  • Style
  • Shadow
  • (Here are no completed chapters.)

Prepare

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

Axis

Title

You can set the title of axis by the Title property:

<je:Plot ID="plot1" runat="server" IsVariable="true" Width="500px">
 <AxesSetting>
  <XAxisSetting
   Label='<span style="font-size: xx-large">x</span>'>
  </XAxisSetting>
 </AxesSetting>
 <DataSetting>
  <je:Data>
   <je:Point Param1="10" Param2="1" />
   <je:Point Param1="11" Param2="10" />
   <je:Point Param1="13" Param2="22" />
   <je:Point Param1="20" Param2="30" />
  </je:Data>
 </DataSetting>
</je:Plot>  

If you want to display the HTML code as text, you need to set up EscapeHtml property to true:

<je:Plot ID="plot2" runat="server" IsVariable="true"
 Data="[[[1,1],[2,2]]]">
 <AxesSetting
  YAxisSetting-Label='<b>y</b>'
  YAxisSetting-LabelRendererSetting-EscapeHtml="true">
 </AxesSetting>
</je:Plot>  

Tick

You can set the distance between tick by NumberTicks and TickInterval property:

<je:Plot ID="plot3" runat="server" IsVariable="true"
 Data="[[[1,1],[2,2],[3,3],[4,4],[5,5],[6,6],[7,7]]]">
 <AxesSetting>
  <XAxisSetting NumberTicks="4" TickInterval="3">
  </XAxisSetting>
 </AxesSetting>
</je:Plot>  

And you can set the location which will display the tick by Ticks property:

<je:Plot ID="plot8" runat="server" IsVariable="true"
 Data="[[[0,1],[2,5],[3,7]]]">
 <AxesSetting>
  <XAxisSetting Ticks="[0,1,3,5,10]">
  </XAxisSetting>
 </AxesSetting>
</je:Plot>  

In the code above, it will display the ticks at 0, 1, 3, 5, 10.

You can also set the color and text formatting of tick:

<je:Plot ID="plot11" runat="server" IsVariable="true"
 Data="[[[100,1],[200,101],[20,50]]]">
 <AxesSetting>
  <XAxisSetting>
   <TickRendererSetting TextColor="Red"
    Prefix="-" FormatString="(%d)" />
  </XAxisSetting>
 </AxesSetting>
</je:Plot>  

By Min and Max, you can set the minimum and maximum values of tick:

<je:Plot ID="plot6" runat="server" IsVariable="true"
 Data="[[[2,5],[4,2],[3,7]]]">
 <AxesSetting>
  <XAxisSetting Min="0" Max="10">
  </XAxisSetting>
 </AxesSetting>
</je:Plot>  

In addition, you can also set the style and length of the tick:

<je:Plot ID="plot10" runat="server" IsVariable="true"
 Data="[[[-1,1],[2,10],[20,50]]]">
 <AxesSetting>
  <XAxisSetting>
   <TickRendererSetting Mark="outside" MarkSize="20" />
  </XAxisSetting>
 </AxesSetting>
</je:Plot>  

Pad

Via Pad, PadMax and PadMin, you can set the percentage of pad:

<je:Plot ID="plot4" runat="server" IsVariable="true"
 Data="[[[2,1],[2,2],[3,7]]]">
 <AxesSetting>
  <XAxisSetting Pad="2">
  </XAxisSetting>
 </AxesSetting>
</je:Plot>

<je:Plot ID="plot5" runat="server" IsVariable="true"
 Data="[[[2,1],[2,2],[3,7]]]">
 <AxesSetting>
  <XAxisSetting PadMax="2">
  </XAxisSetting>
 </AxesSetting>
</je:Plot>  

Border

By BorderColor, and BorderWidth properties, you can set the border style:

<je:Plot ID="plot9" runat="server" IsVariable="true"
 Data="[[[-10,1],[20,10],[20,20]]]">
 <AxesSetting
  XAxisSetting-BorderColor="Blue"
  XAxisSetting-BorderWidth="3">
 </AxesSetting>
</je:Plot>  

Grid

Style

You can set the color and width of the line:

<je:Plot ID="plot2" runat="server" IsVariable="true"
 Data="[[[0,0],[1,4],[2,4]]]">
 <GridSetting
  Background="DarkGray"
  BorderColor="Red" BorderWidth="5"
  GridLineColor="Blue" GridLineWidth="2" />
</je:Plot>  

Shadow

There are many properties on the shadow:

<je:Plot ID="plot3" runat="server" IsVariable="true"
 Data="[[[1,10],[12,43],[22,4]]]">
 <GridSetting
  ShadowDepth="5" ShadowWidth="6"
  ShadowAngle="60" ShadowOffset="2" />
</je:Plot>  

(Here are no completed chapters.)

More content, so stay tuned...

Related Content

Comment

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 | Terms of Use | Mobile
Web03 | 2.8.1411022.1 | Last Updated 12 Jan 2012
Article Copyright 2012 by zoyobar
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid