Click here to Skip to main content
65,938 articles
CodeProject is changing. Read more.
Articles
(untagged)

Introduction to Basic Properties of jqplot Chart

0.00/5 (No votes)
11 Jan 2012 1  
Introduction to Basic Properties of jqplot Chart

The original post can be found at http://zoyobar.blogspot.com/2012/01/introduction-to-basic-properties-of.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 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.)

Prepare

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"
 Namespace="zoyobar.shared.panzer.ui.jqueryui.plusin.jqplot"
 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 jqueryui.com/download:

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

DataSetting

Through DataSetting of Plot, you can add data:

<je:Plot ID="plot2" runat="server" IsVariable="true" Width="500px">
 <DataSetting>
  <je:Data>
   <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:Data>
  <je:Data>
   <je:Point Param1="1" Param2="3" />
   <je:Point Param1="2" Param2="7" />
   <je:Point Param1="3" Param2="10" />
   <je:Point Param1="4" Param2="6" />
  </je:Data>
 </DataSetting>
</je:Plot>  

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"
 Data="[[[2,5],[4,6]],[[2,6],[4,7]]]">
</je:Plot>  

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 () {
  plot1.__plot('fill');
 });
</script

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="[[[1,1],[3,5],[2,6],[4,7]]]"
 Animate="true">
</je:Plot>  

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"
 Data="[[[1,1],[3,5],[2,6],[4,7]]]"
 SortData="false">
</je:Plot>

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

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

Comment

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here