Click here to Skip to main content
Click here to Skip to main content
Go to top

Introduction To Title Legend And Series Of jqplot Chart

, 18 Jan 2012
Rate this:
Please Sign up or sign in to vote.
Introduction To Title Legend And Series Of jqplot Chart

The original: http://zoyobar.blogspot.com/2012/01/introduction-to-title-legend-and-series.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 title, legend and series of the Plot control, the catalog is as follows:

  • Prepare
  • Title
  • Legend
  • Location
  • Text
  • Series
  • Line
  • Axis
  • Fill
  • Shadow
  • Legend Text
  • Default Setting
  • (Here are no completed chapters.)

Prepare

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

Title

You can set the title of chart through the TitleSetting property:

<je:Plot ID="plot1" runat="server" IsVariable="true"
 Data="[[[1,2],[3,4]]]">
 <TitleSetting
  Text="Here is a title"
  TextAlign="right"
  TextColor="Blue"
  FontSize="10pt" />
</je:Plot>  

The Text property is the text of title, the TextAlign property is the alignment of the title, the TextColor property is the color of the title, and the FontSize property is the size of the font.

Legend

Location

You can set the display position of the legend by the Location and Placement properties of the LegendSetting:

<je:Plot ID="plot1" runat="server" IsVariable="true"
 Data="[[[1,2],[3,4]]]">
 <LegendSetting
  Show="true"
  Location="sw"
  Placement="outsideGrid" />
</je:Plot>  

Text

You can set the text of the legend through the Labels property, in the form of a JavaScript array, each element corresponds to the legend text of a series, defaults to Series N:

<je:Plot ID="plot2" runat="server" IsVariable="true"
 Data="[[[1,2],[3,4]],[[3,2],[3,1]]]">
 <LegendSetting Show="true"
  Labels="['line 1','<u>line 2</u>']" />
</je:Plot>  

Set EscapeHtml property to true, the HTML code will be displayed as text:

<je:Plot ID="plot3" runat="server" IsVariable="true"
 Data="[[[1,2],[3,4]],[[3,2],[3,1]],[[5,0],[7,9]]]">
 <LegendSetting Show="true"
  Labels="['line 1','<u>line 2</u>']"
  EscapeHtml="true" />
</je:Plot>  

Series

You can set each series with SeriesSetting.

Line

You can add a Series object to increase a set of series:

<je:Plot ID="plot1" runat="server" IsVariable="true"
 Data="[[[1,2],[3,4]]]">
 <SeriesSetting>
  <je:Series
   Color="Green"
   LineWidth="5"
   LinePattern="dashed">
  </je:Series>
 </SeriesSetting>
</je:Plot>  

In the above code, we set the color of the first series to green, the width to 5 pixels, and the style to dashed line.

Axis

By XAxis and YAxis, you can set the axis that the series used:

<je:Plot ID="plot2" runat="server" IsVariable="true"
 Data="[[[1,2],[3,4]]]">
 <SeriesSetting>
  <je:Series XAxis="x2axis" YAxis="y2axis">
  </je:Series>
 </SeriesSetting>
</je:Plot>  

Fill

Set Fill to true, it'll fill the empty space between lines and a tick:

<je:Plot ID="plot3" runat="server" IsVariable="true"
 Data="[[[2,2],[3,5],[5,3]]]">
 <SeriesSetting>
  <je:Series Fill="true">
  </je:Series>
 </SeriesSetting>
</je:Plot>  

By FillAlpha and FillColor, you can set the fill color and transparency, set FillAndStroke to true, it'll show the line:

<je:Plot ID="plot4" runat="server" IsVariable="true"
  Data="[[[-1,-1],[3,0],[4,3]]]">
  <SeriesSetting>
  <je:Series Fill="true"
   FillAlpha="0.4"
   FillColor="Red"
   FillAndStroke="true">
  </je:Series>
 </SeriesSetting>
</je:Plot>  

Set FillToZero property to true, it'll use 0 as baseline:

<je:Plot ID="plot5" runat="server" IsVariable="true"
 Data="[[[-1,-1],[2,0],[5,3]]]">
 <SeriesSetting>
  <je:Series Fill="true"
   FillToZero="true">
  </je:Series>
 </SeriesSetting>
</je:Plot>  

Shadow

You can also set the shadow setting:

<je:Plot ID="plot6" runat="server" IsVariable="true"
 Data="[[[1,1],[2,3],[5,3]]]">
 <SeriesSetting>
  <je:Series
   ShadowAngle="30"
   ShadowDepth="10"
   ShadowOffset="3">
  </je:Series>
 </SeriesSetting>
</je:Plot>  

Legend Text

Label property indicates the legend text of series:

<je:Plot ID="plot7" runat="server" IsVariable="true"
 Data="[[[1,2],[2,4],[3,3]]]" LegendSetting-Show="true">
 <SeriesSetting>
  <je:Series Label="Hello!!!">
  </je:Series>
 </SeriesSetting>
</je:Plot>  

Default Setting

Set the default setting of all series with SeriesDefaultsSetting:

<je:Plot ID="plot8" runat="server" IsVariable="true"
 Data="[[[1,3],[2,1],[3,5]],[[1,1],[2,0],[3,3]]]">
  <SeriesDefaultsSetting LineWidth="8">
  </SeriesDefaultsSetting>
</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

 
GeneralMy vote of 5 PinmvpKanasz Robert18-Jan-12 21:40 

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 | Mobile
Web01 | 2.8.140922.1 | Last Updated 18 Jan 2012
Article Copyright 2012 by zoyobar
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid