Click here to Skip to main content
12,754,334 members (29,324 online)
Click here to Skip to main content
Add your own
alternative version


3 bookmarked
Posted 10 Jan 2012

Introduction To Basic Properties Of jqplot Chart

, 11 Jan 2012 CPOL
Rate this:
Please Sign up or sign in to vote.
Introduction To Basic Properties Of jqplot Chart

The original:


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:

This post explains how to set the data used by Plot control and some properties of Plot. The catalog is as follows:

  • Prepare
  • Set Data
  • Data Series
  • DataSetting
  • AppendData Method
  • Data Property
  • To Display The Data
  • Play The Animation
  • Data Sorting
  • (Here are no completed chapters.)


Be sure that you have got the latest version of JQueryElement at the section JQueryElement.dll download of Download JQueryElement.

Use the following statements to reference namespace:

<%@ Register Assembly="zoyobar.shared.panzer.JQueryElement"
 TagPrefix="je" %>

In addition to the namespace, you need to reference the jQueryUI/jqplot scripts and styles, there are jqplot and a custom theme for jQueryUI in the compressed file downloaded at the section JQueryElement.dll download of Download JQueryElement, if you need more themes, you can get them at

<link type="text/css" rel="stylesheet"
 href="[style path]/jquery-ui-<version>.custom.css" />
<link rel="stylesheet" type="text/css"
 href="[style path]/jquery.jqplot.min.css" />
<script type="text/javascript"
 src="[script path]/jquery-<version>.min.js"></script>
<script type="text/javascript"
 src="[script path]/jquery-ui-<version>.custom.min.js"></script>
<script type="text/javascript"
 src="[script path]/jquery.jqplot.min.js"></script>  

Set Data

Data Series

Plot can display multiple sets of data, for example, simultaneously to display the sales of some books, the related data of each book is a data series.


Through DataSetting of Plot, you can add data:

<je:Plot ID="plot2" runat="server" IsVariable="true" Width="500px">
   <je:Point Param1="1" Param2="2" />
   <je:Point Param1="2" Param2="4" />
   <je:Point Param1="3" Param2="8" />
   <je:Point Param1="4" Param2="16" />
   <je:Point Param1="1" Param2="3" />
   <je:Point Param1="2" Param2="7" />
   <je:Point Param1="3" Param2="10" />
   <je:Point Param1="4" Param2="6" />

In the code above, we add 2 data series, each Data object corresponds to a data series. By adding Point, data series can be increased, Param1 property corresponds to the first parameter usually is x coordinate, Param2 property corresponds to the second argument usually is y coordinate. In some special cases, Param3 and Param4 are also used.

AppendData Method

In the background code, you can use AppendData method to add data series:

protected void Page_Load ( object sender, EventArgs e )
 this.plot3.AppendData (
  new Data (
   new Point ( 1, 1 ),
   new Point ( 2, 2 ),
   new Point ( 3, 3 )
  new Data (
   new Point ( 1, 3 ),
   new Point ( 2, 2 ),
   new Point ( 3, 1 )

We add 2 data series to plot3 when the page is loading, and the Data object represents a data series, and the Point object represents a point.

Data Property

In addition, you can set the data series by Data property of Plot:

<je:Plot ID="plot6" runat="server" IsVariable="true"

The format of the Data property is:

[<data series, such as: [<point, such as: [x, y]>]>] 

To Display the Data

After you have data, you can use the method fill of plot to display the data:

<script type="text/javascript">
 $(function () {

In the code above, after the page load is complete, it'll display the data. The JavaScript variable plot1 is generated through the IsVariable property of Plot, more information can refer to Introduction To Basic Properties Of JQueryElement.

Play The Animation

Set the Animate property of Plot to true, it will play the animation when you display the data:

<span class="span-button" onclick="plot8.__plot('fill');">play</span>
<je:Plot ID="plot8" runat="server" IsVariable="true"

Data Sorting

In the default case, the data of plot will be sorted, and you can set the SortData property to false to prevent it, such as:

<je:Plot ID="plot7" runat="server" IsVariable="true"

<je:Plot ID="plot8" runat="server" IsVariable="true"

In plot7, the 2nd point [3,5], and 3rd point [2,6] will exchange order, while not in the plot8.

(Here are no completed chapters.)

More content, so stay tuned...

Related Content



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


About the Author

United States United States
No Biography provided

You may also be interested in...

Comments and Discussions

GeneralMy vote of 4 Pin
Ariharasudhan5-Jun-13 23:50
memberAriharasudhan5-Jun-13 23:50 

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.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.170217.1 | Last Updated 11 Jan 2012
Article Copyright 2012 by zoyobar
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid