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:

• http://zoyobar.blogspot.com/2012/01/introduction-to-basic-properties-of.html

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" %>
<%@ Register Assembly="zoyobar.shared.panzer.JQueryElement"
 Namespace="zoyobar.shared.panzer.web.jqueryui.plusin.jqplot"
 TagPrefix="je" %>
<%@ Register Assembly="zoyobar.shared.panzer.JQueryElement"
 Namespace="zoyobar.shared.panzer.web.jqueryui" 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 2^nd point [3,5], and 3^rd point [2,6] will exchange order, while not in the plot8.

(Here are no completed chapters.)

More content, so stay tuned...

Related Content

• Return JSON In Different .NET Version
• Introduction To Basic Properties Of JQueryElement
• Through Parameter Object Add Ajax Request Parameter

Comment