User Guide

Overview

The wijpiechart widget allows the user to show customized pie charts. Pie charts are commonly used to display simple values. A Pie chart draws each series as a slice in a pie. Pie charts have one significant difference when compared to other wijchart chart types: in Pie charts, each series represents one slice of the pie. Therefore, you will never have Pie charts with a single series (they would be just circles). In most cases, Pie charts have multiple series (one per slice) with a single data point in each series. wijpiechart represents series with multiple data points as multiple pies within the chart.

The wijpiechart widget is created by the jquery.wijmo.wijpiechart.js library.

The image below illustrates the main elements of the wijpiechart widget:

NOTE: Please check the Version Histories for an outline of new features, improvements, and changes to the Wijmo widgets.

Markup and Scripting

The wijpiechart contains content, like in the following example:

<div id="wijpiechart" class="ui-widget ui-widget-content ui-corner-all"></div>

You can initialize the wijpiechart with code similar to the following:

<style type="text/css">
		#wijpiechart
		{
			width: 400px;
			height: 300px;
		}
	</style>
	<script id="scriptInit" type="text/javascript">
		$(document).ready(function () {
			$("#wijpiechart").wijpiechart({
				radius: 140,
				legend: { visible: true },
				hint: {
					content: function () {
						return this.data.label + " : " + Globalize.format(this.value / this.total, "p2");
						}
				},
				header: {
					text: "Steam - Mac Hardware"
				},
				seriesList: [{
					label: "MacBook Pro",
					legendEntry: true,
					data: 46.78,
					offset: 15
				}, {
					label: "iMac",
					legendEntry: true,
					data: 23.18,
					offset: 0
				}, {
					label: "MacBook",
					legendEntry: true,
					data: 20.25,
					offset: 0
				}, {
					label: "Mac Pro",
					legendEntry: true,
					data: 5.41,
					offset: 0
				}, {
					label: "Mac mini",
					legendEntry: true,
					data: 3.44,
					offset: 0
				}],
				seriesStyles: [{
					fill: "180-rgb(195,255,0)-rgb(175,229,0)", stroke: "rgb(175,229,0)", "stroke-width": 1.5
				}, {
					fill: "90-rgb(142,222,67)-rgb(127,199,60)", stroke: "rgb(127,199,60)", "stroke-width": 1.5
				}, {
					fill: "90-rgb(106,171,167)-rgb(95,153,150)", stroke: "rgb(95,153,150)", "stroke-width": 1.5
				}, {
					fill: "90-rgb(70,106,133)-rgb(62,95,119)", stroke: "rgb(62,95,119)", "stroke-width": 1.5
				}, {
					fill: "90-rgb(166,166,166)-rgb(149,149,149)", stroke: "rgb(149,149,149)", "stroke-width": 1.5
				}]
			});
		});
	</script>

The markup and script featured here results in the following:

Data Binding

PieChart can be bound to an array or a data table. You can now bind the label, data, and offset options in the seriesList. The following option has been added to the Pie charts:

dataSource

Option added to all defined widgets that will support binding to dataView

Type: array

Data Binding Examples

The following examples show you how to data bind a pie chart series to an array and how to data bind a pie chart series to a table:

Pie Chart Series Bound to Array

For pie series charts the dataSource should be set on the chart widget option like the following:

Code Example:

//Create Data
var data = [{
				Device: 'MacBook Pro',
				Percent: 46.78,
				Offset: 15
			}, {
				Device: 'iMac',
				Percent: 23.18
			}, {
				Device: 'MacBook',
				Percent: 20.25
			}, {
				Device: 'Mac Pro',
				Percent: 5.41
			}, {
				Device: 'Mac mini',
				Percent: 3.44
			}];

			$("#wijpiechart").wijpiechart({
				dataSource: data,
				data: {
					label: { bind: "Device" },
					value: { bind: "Percent" },
					offset: { bind: "Offset" }
				});

The pie chart will appear like the following:

Pie Chart Series Bound to Data Table

For pie series charts the dataSource should be set on the chart widget option like the following:

Code Example:

//Create Data
<table id="tb">
				<caption>
					Average Bytes per Page by Content Type</caption>
				<thead>
					<tr>
						<td>
						</td>
						<th>
							kB
						</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<th scope="row">
							HTML
						</th>
						<td>
							34</td>
					</tr>
					<tr>
						<th scope="row">
							Images</th>
						<td>
							450</td>
					</tr>
					<tr>
						<th scope="row">
							Stylesheets</th>
						<td>
							27</td>
					</tr>
					<tr>
						<th scope="row">
							Scripts</th>
						<td>
							123</td>
					</tr>
					<tr>
						<th scope="row">
							Flash</th>
						<td>
							84</td>
					</tr>
					<tr>
						<th scope="row">
							Other</th>
						<td>
							25</td>
					</tr>
				</tbody>
			</table>
});

The pie chart will appear like the following:

Quick Start

In this quick start, you'll learn how to add the PieChart widget to an HTML project and how to customize the widget.

Create an .html page and add links to the dependencies to your project. To do this, just link to the content delivery network (CDN) file for each project:

 <!--jQuery References-->
<script src="http://code.jquery.com/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.min.js" type="text/javascript"></script>
 
<!--Theme-->
<link href="http://cdn.wijmo.com/themes/aristo/jquery-wijmo.css" rel="stylesheet" type="text/css" />
 
<!--Wijmo Widgets CSS-->
<link href="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20131.1.min.css" rel="stylesheet" type="text/css" />
 
<!--Wijmo Widgets JavaScript-->
<script src="http://cdn.wijmo.com/jquery.wijmo-open.all.3.20131.1.min.js" type="text/javascript"></script>
<script src="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20131.1.min.js" type="text/javascript"></script>

You can reference the latest dependencies from the CDN at http://wijmo.com/downloads/#wijmo-cdn.

Place the following markup within the body of the .html document:

<div id="wijpiechart" class="ui-widget ui-widget-content ui-corner-all"></div>

To initialize the widget and to populate the wijpiechart with data, you need to add some jQuery script.

<script id="scriptInit" type="text/javascript">        
        $(document).ready(function () {
            $("#wijpiechart").wijpiechart({
                radius: 140,
                legend: { visible: true },
                hint: {
                    content: function () {
                        return this.data.label + " : " + Globalize.format(this.value / this.total, "p2");
                    } 
                },
                header: { 
                        text: "Steam - Mac Hardware" },
                seriesList: [{
                    label: "MacBook Pro",
                    legendEntry: true, data: 46.78,
                    offset: 15
            },
                {
                    label: "iMac",
                    legendEntry: true,
                    data: 23.18,
                    offset: 0
                },
                {
                    label: "MacBook",
                    legendEntry: true,
                    data: 20.25,
                    offset: 0
                },
                {
                    label: "Mac Pro",
                    legendEntry: true,
                    data: 5.41,
                    offset: 0
                },
                    {
                    label: "Mac mini",
                    legendEntry: true,
                    data: 3.44,
                    offset: 0
                }],
                seriesStyles: [{
                    fill: "180-rgb(195,255,0)-rgb(175,229,0)", stroke: "rgb(175,229,0)", "stroke-width": 1.5
                }, {
                    fill: "90-rgb(142,222,67)-rgb(127,199,60)", stroke: "rgb(127,199,60)", "stroke-width": 1.5
                }, {
                    fill: "90-rgb(106,171,167)-rgb(95,153,150)", stroke: "rgb(95,153,150)", "stroke-width": 1.5
                }, {
                    fill: "90-rgb(70,106,133)-rgb(62,95,119)", stroke: "rgb(62,95,119)", "stroke-width": 1.5
                }, {
                    fill: "90-rgb(166,166,166)-rgb(149,149,149)", stroke: "rgb(149,149,149)", "stroke-width": 1.5
                }]
            });

        });
    </script>

If you run your application now, the wijpiechart will resemble the following image:

How To

Change Appearance

It's easy to change the properties in the script to customize the appearance of the pie chart.

The main option used to customize the appearance of the chart is the seriesStyles option. The fill, stroke, and stroke-width sub-properties control the chart appearance.

The current seriesStyles script resembles the following:

seriesStyles: [{
                    fill: "180-rgb(195,255,0)-rgb(175,229,0)", stroke: "rgb(175,229,0)", "stroke-width": 1.5
                }, {
                    fill: "90-rgb(142,222,67)-rgb(127,199,60)", stroke: "rgb(127,199,60)", "stroke-width": 1.5
                }, {
                    fill: "90-rgb(106,171,167)-rgb(95,153,150)", stroke: "rgb(95,153,150)", "stroke-width": 1.5
                }, {
                    fill: "90-rgb(70,106,133)-rgb(62,95,119)", stroke: "rgb(62,95,119)", "stroke-width": 1.5
                }, {
                    fill: "90-rgb(166,166,166)-rgb(149,149,149)", stroke: "rgb(149,149,149)", "stroke-width": 1.5
                }]

Note that the stroke color is currently set to the same value as the second rgb color. To change the stroke color so the slice is outlined, change your script to resemble the following:

seriesStyles: [{
                    fill: "180-rgb(195,255,0)-rgb(175,229,0)", stroke: "rgb(122,122,122)", "stroke-width": 1.5
                }, {
                    fill: "90-rgb(142,222,67)-rgb(127,199,60)", stroke: "rgb(122,122,122)", "stroke-width": 1.5
                }, {
                    fill: "90-rgb(106,171,167)-rgb(95,153,150)", stroke: "rgb(122,122,122)", "stroke-width": 1.5
                }, {
                    fill: "90-rgb(70,106,133)-rgb(62,95,119)", stroke: "rgb(122,122,122)", "stroke-width": 1.5
                }, {
                    fill: "90-rgb(166,166,166)-rgb(149,149,149)", stroke: "rgb(122,122,122)", "stroke-width": 1.5
            }]

If you run your application now, the chart will resemble the following:

Change the script to change the colors of the wijpiechart to resemble the following:

seriesStyles: [{
                    fill: "180-rgb(12,133,240)-rgb(128,19,128)", stroke: "rgb(122,122,122)", "stroke-width": 1.5
                }, {
                    fill: "90-rgb(143,51,140)-rgb(33,130,13)", stroke: "rgb(122,122,122)", "stroke-width": 1.5
                }, {
                    fill: "90-rgb(8,34,201)-rgb(196,98,172)", stroke: "rgb(122,122,122)", "stroke-width": 1.5
                }, {
                    fill: "90-rgb(11,125,25)-rgb(6,6,125)", stroke: "rgb(122,122,122)", "stroke-width": 1.5
                }, {
                    fill: "90-rgb(63,15,77)-rgb(12,159,250)", stroke: "rgb(122,122,122)", "stroke-width": 1.5
            }]

This change will result in the following image:

You can also change the gradient for each section of the pie chart using the gradient number before the rgb color codes:

seriesStyles: [{
                    fill: "270-rgb(12,133,240)-rgb(128,19,128)", stroke: "rgb(122,122,122)", "stroke-width": 1.5
                }, {
                    fill: "180-rgb(143,51,140)-rgb(33,130,13)", stroke: "rgb(122,122,122)", "stroke-width": 1.5
                }, {
                    fill: "270-rgb(8,34,201)-rgb(196,98,172)", stroke: "rgb(122,122,122)", "stroke-width": 1.5
                }, {
                    fill: "270-rgb(11,125,25)-rgb(6,6,125)", stroke: "rgb(122,122,122)", "stroke-width": 1.5
                }, {
                    fill: "180-rgb(63,15,77)-rgb(12,159,250)", stroke: "rgb(122,122,122)", "stroke-width": 1.5
            }]

You can see the changes you made in the following image:

You can also change the offset for each section of the PieChart:

seriesList: [{
                label: "MacBook Pro",
                legendEntry: true, data: 46.78,
                offset: 15
            },
                {
                    label: "iMac",
                    legendEntry: true,
                    data: 23.18,
                    offset: 10
                },
                {
                    label: "MacBook",
                    legendEntry: true,
                    data: 20.25,
                    offset: 10
                },
                {
                    label: "Mac Pro",
                    legendEntry: true,
                    data: 5.41,
                    offset: 10
                },
                {
                    label: "Mac mini",
                    legendEntry: true,
                    data: 3.44,
                    offset: 10
                }],

You can see the changes you made in the following image:

Create a Doughnut Chart

The innerRadius option can be used to create a doughnut chart. Just set the innerRadius option below the radius option in the script:

$(document).ready(function () {
        $("#wijpiechart").wijpiechart({
            height: 300px;
            width: 400px;
            radius: 140,
            innerRadius: 40,

When you run your application, it should resemble the following image:

Now you can set up a Wijmo application, add the appropriate HTML markup and script to your application to create and call your widget, and change the appearance of your widget using both jQuery script and CSS styling.

Concepts

Adaptive for Mobile Use

This widget is an adaptive widget in v3. If you are running v2.3.x, it is not adaptive. You can download v3 2013 1 here: Downloads Page.

An adaptive widget is different from a jQuery UI widget in that you can use it in both mobile and non-mobile web applications. To use it in non-mobile applications, just use the regular help. To use it in mobile applications:

Use jQuery Mobile instead of jQuery UI references
Do not initialize the widget in script (unless you need to for complex widgets like charts)
Use the data-role attribute to create the widget in markup

These steps are demonstrated in the Adaptive Widgets for jQuery Mobile topic.

API

Options

animation

The animation option defines the animation effect and controls other aspects of the widget's animation, such as duration and easing.

Type: Object

Default: {enabled:true, duration:400, easing: "easeInCubic"}

Code Example:

$("#piechart").wijpiechart({
 stacked: true
});

enabled

A value that determines whether to show animation.

Default: true

Type: Boolean

duration

A value that indicates the duration for the animation.

Default: 400

Type: Number

easing

Sets the type of animation easing effect that users experience when the wijpiechart series is reloaded after they have changed the data for the seriesList option.

Type: String

Default: "easeInCubic"

Values available for the animation easing effect include the following:

easeInCubic – Cubic easing in. Begins at zero velocity and then accelerates.
easeOutCubic – Cubic easing in and out. Begins at full velocity and then decelerates to zero.
easeInOutCubic – Begins at zero velocity, accelerates until halfway, and then decelerates to zero velocity again.
easeInBack – Begins slowly and then accelerates.
easeOutBack – Begins quickly and then decelerates.
easeOutElastic – Begins at full velocity and then decelerates to zero.
easeOutBounce – Begins quickly and then decelerates. The number of bounces is related to the duration, longer durations produce more bounces.

You can create custom easing animations using jQuery UI Easings.

offset

A value that indicates the offset for an explode animation.

Default: 10

Type: Number

chartLabelFormatString

A value that indicates the format string of the chart labels, set it to format chart labels.

Type: String

Default:""

Code Example:

$("#piechart").wijpiechart({
 chartLabelFormatString: "n0"
});

chartLabelStyle

A value that indicates the style that will be applied to the chart labels. For more information on the available style parameters, see the Style Options topic.

culture

A value that determines the culture ID name.

Type: String

Default: " "

Code Example:

 
$("#wijpiechart").wijpiechart({culture: "zh"})

dataSource

This option is used for data bind. The charts can bind Array and wijdataView object. The related option is bind option in widget's data option, and bind option in seriesList. For more information please see the datasource demo: http://wijmo.com/demo/explore/?widget=BarChartsample=Array%20as%20datasource

Type: array

Code Example:

$("#wijpiechart").wijpiechart({
dataSource:dataSource,
data:{
label:{bind:"Device"},
value:{bind:"Percent"},
offset:{bind:"Offset"}
}
});

disableDefaultTextStyle

A value that indicates whether to disable the default text style.

Type: Boolean

Default: false

Code example:

$("#piechart").wijpiechart({
 disableDefaultTextStyle:true
});

footer

An object value that indicates the footer of the chart element.

Type: Object

Default:

     {visible:false, style:{fill:"#fff", stroke:"none"}, textStyle:{fill:"#000", stroke:"none"}, compass:"south", orientation:"horizontal"}

compass

A value that indicates the compass position of the footer.

Type: String

Default: "south"

Note: Options are 'north', 'south', 'east', and 'west'.

style

A value that indicates the style of the footer. For more information on the available style parameters, see the Style Options topic.

Type: Object

Default: {fill:"#fff", stroke:"none"}

text

A value that indicates the text of the footer.

Type: String

Default: ""

textStyle

A value that indicates the style of the footer text. For more information on the available style parameters, see the Style Options topic.

Type: Object

Default: {fill:"#000", stroke:"none"}

visible

A value that indicates the visibility of the footer.

Type: Boolean

Default: false

Code example:

$("#piechart").wijpiechart({
 footer: {
  text:"footer",
  style:{
   fill:"#f1f1f1",
   stroke:"#010101"
  }}
});

header

An object value that indicates the header of the chart element.

Type: Object

Default:

   {visible:true, style:{fill:"none", stroke:"none"}, textStyle:{"font-size": "18pt", fill:"#666", stroke:"none"}, compass:"north", orientation:"horizontal"}

compass

A value that indicates the compass position of the header.

Type: String

Default: "north"

Note: Options are 'north', 'south', 'east' and 'west'.

style

A value that indicates the style of the header. For more information on the available style parameters, see the Style Options topic.

Type: Object

Default: {fill:"None", stroke:"none"}

text

A value that indicates the text of the header.

Type: String

Default: ""

textStyle

A value that indicates the style of the header text. For more information on the available style parameters, see the Style Options topic.

Type: Object

Default: {fill:"#000", stroke:"none"}

visible

A value that indicates the visibility of the header.

Type: Boolean

Default: true

Code example:

 
$("#piechart").wijpiechart({
 header: {
  text:"header",
  style:{
   fill:"#f1f1f1",
   stroke:"#010101"
  }}
});

height

A value that indicates the height of wijchart.

Type: Number

Default: null

Code Example:

$("#piechart").wijpiechart({
 height: 400
});

hint

A value that is used to indicate whether to show and what to show on the open tooltip.

Type: Function

Default:

  {enable:true, content:null, 
   contentStyle: {fill: "#d1d1d1","font-size": "16pt"},
   title:null, 
   titleStyle: {fill: "#d1d1d1","font-size": "16pt"},
   style: {fill: "#000000", "stroke-width": "2"},
   animated: "fade", showAnimated: "fade", hideAnimated: "fade",
   duration: 120, showDuration: 120, hideDuration: 120,
   showDelay: 150, hideDelay: 150, easing: "easeOutExpo", 
   showEasing: "easeOutExpo", hideEasing: "easeOutExpo",
   compass:"north", offsetX: 0, offsetY: 0,  
   showCallout: true, calloutFilled: false, 
   calloutFilledStyle: {fill: "#000"}}

animated

A value that indicates the effect during show or hide when showAnimated or hideAnimated is not specified.

Default: "fade"

Type: String

calloutFilled

Determines whether to fill the callout. If true, then the callout triangle will be filled.

Default: false

Type: Boolean

calloutFilledStyle

A value that indicates the style of the callout filled. For more information on the available style parameters, see the Style Options topic.

Default: {fill: "#000"}

Type: Object

compass

Code example:

$("#piechart").wijpiechart({
 hint: {
  enable:true,
  formatter:function(){
			return this.data.label + " : " + this.value/this.total*100 + "%";
	}});

innerRadius

A value that indicates the inner radius used for doughnut charts.

Type: Number

Default: null

Code Example:

$("#piechart").wijpiechart({
 innerRadius: 20
});

legend

An object value that indicates the legend of the chart element.

Type: Object

Default:

{text:"", textMargin:{left:2,top:2,right:2,bottom:2},titleStyle:{"font-weight":"bold",fill:"#000",stroke:"none"},visible:true, style:{fill:"#none", stroke:"none"}, textStyle:{fill:"#333", stroke:"none"}, compass:"east", orientation:"vertical"}

compass

A value that indicates the compass of the legend.

Type: String

Default: "east"

Notes: Options are 'north', 'south', 'east' and 'west'.

orientation

A value that indicates the orientation of the legend.

A value that indicates the visibility of the legend.

Type: Boolean

Default: true

Code example:

$("#piechart").wijpiechart({
 legend: {
  text:"legend",
  style:{
   fill:"#f1f1f1",
   stroke:"#010101"
  }}
});

marginBottom

A value that indicates the bottom margin of the chart area.

Type: Number

Default: 25

Code example:

$("#piechart").wijpiechart({
 marginBottom: 25
});

marginLeft

A value that indicates the left margin of the chart area.

Type: Number

Default: 25

Code example:

 
$("#piechart").wijpiechart({
 marginLeft: 25
});

marginRight

A value that indicates the right margin of the chart area.

Type: Number

Default: 25

Code example:

$("#piechart").wijpiechart({
 marginRight: 25
});

marginTop

A value that indicates the top margin of the chart area.

Type: Number

Default: 25

Code example:

$("#piechart").wijpiechart({
 marginTop: 25
});

radius

A value that indicates the radius used for a pie chart.

Remarks: If the value is null, then the radius will be calculated by the width/height value of the pie chart.

Type: Number

Default: null

Code Example:

$("#piechart").wijpiechart({
 radius: 100
});

seriesHoverStyles

An array collection that contains the style to be charted when hovering the chart element. For more information on the available style parameters, see the Style Options topic.

Type: Array

Default:

[{opacity: 1, "stroke-width": 1.5}, {
					opacity: 1, "stroke-width": 1.5}, {
					opacity: 1, "stroke-width": 1.5}, {
					opacity: 1, "stroke-width": 1.5}, {
					opacity: 1, "stroke-width": 1.5}, {
					opacity: 1, "stroke-width": 1.5}, {
					opacity: 1, "stroke-width": 1.5}, {
					opacity: 1, "stroke-width": 1.5}, {
					opacity: 1, "stroke-width": 1.5}, {
					opacity: 1, "stroke-width": 1.5}, {
					opacity: 1, "stroke-width": 1.5}, {
					opacity: 1, "stroke-width": 1.5}]

seriesList

An array collection that contains the data to be charted.

Type: Array

Default: []

data

A value that specifies the data of the chart series.

x

A value that specifies the data for the x axis.

y

A value that specifies the data for the y axis.

label

A value that specifies the label of the chart series.

legendEntry

A value that indicates the legend entry of the chart series.

Code example:

$("#piechart").wijpiechart({
seriesList: [{
	label: "Q1",
	legendEntry: true,
	data: 12,
	offset: 0
 }, {
	label: "Q2",
	legendEntry: true,
	data: 21,
	offset: 0
 }, {
	label: "Q3",
	legendEntry: true,
	data: 9,
	offset: 0
 }, {
	label: "Q4",
	legendEntry: true,
	data: 29,
	offset: 10
	}]
  });

seriesStyles

An array collection that contains the style to be charted. For more information on the available style parameters, see the Style Options topic.

Type: Array

Default:

[{stroke: "#00cc00", opacity: 0.9, "stroke-width": 1}, {
  stroke: "#0099cc", opacity: 0.9, "stroke-width": 1}, {
  stroke: "#0055cc", opacity: 0.9, "stroke-width": 1}, {
  stroke: "#2200cc", opacity: 0.9, "stroke-width": 1}, {
  stroke: "#8800cc", opacity: 0.9, "stroke-width": 1}, {
  stroke: "#d9007e", opacity: 0.9, "stroke-width": 1}, {
  stroke: "#ff0000", opacity: 0.9, "stroke-width": 1}, {
  stroke: "#ff6600", opacity: 0.9, "stroke-width": 1}, {
  stroke: "#ff9900", opacity: 0.9, "stroke-width": 1}, {
  stroke: "#ffcc00", opacity: 0.9, "stroke-width": 1}, {
  stroke: "#ffff00", opacity: 0.9, "stroke-width": 1}, {
  stroke: "#ace600", opacity: 0.9, "stroke-width": 1}]

fill

A value that specifies the color, gradient, or image of the series fill.

Type: String

opacity

A value that specifies the opacity of the chart's data items.

Type: Number

stroke

A value that specifies the stroke color for the chart.

Type: String

stroke-width

A value that specifies the width of the stroke in pixels.

Type: Number

Default: 1

Code Example:

 $("#piechart").wijpiechart({
seriesStyles: [
	{fill: “rgb(255,0,0)”, stroke:”none”},
	{fill: “rgb(255,125,0)”, stroke: “none”}
]});

seriesTransition

The seriesTransition option is used to animate series in the chart when just their values change. This is helpful for visually showing changes in data for the same series.

Type: Object

Default: {enabled:true, duration:400, easing: "easeOutBounce"}.

Note: When programmatically updating the seriesList with a different number of series in the array make sure to disable seriesTransition like the following:

 
        seriesTransition: { enabled: false}

Code example:

 	$("#piechart").wijpiechart({ 
  seriesTransition:{ 
    enabled:true, 
    duration:1000 
  } 
});

duration

A value that indicates the duration for the series transition.

Type: Number

Default: 400

easing

Sets the type of animation easing effect that users experience when the wijpiechart series is reloaded after they have changed the data for the seriesList option.

Type: String

Default: "easeInCubic"

Values available for the animation easing effect include the following:

easeInCubic – Cubic easing in. Begins at zero velocity and then accelerates.
easeOutCubic – Cubic easing in and out. Begins at full velocity and then decelerates to zero.
easeInOutCubic – Begins at zero velocity, accelerates until halfway, and then decelerates to zero velocity again.
easeInBack – Begins slowly and then accelerates.
easeOutBack – Begins quickly and then decelerates.
easeOutElastic – Begins at full velocity and then decelerates to zero.
easeOutBounce – Begins quickly and then decelerates. The number of bounces is related to the duration, longer durations produce more bounces.

Set this option to false in order to disable easing. You can also create custom easing animations using jQuery UI Easings.

enabled

A value that determines whether to show animation when reload.

Type: Boolean

Default: true

shadow

A value that indicates whether to show a shadow for the chart.

Default: false

Type: Boolean

Code Example:

 
$("#piechart").wijpiechart({
	shadow: false
});

showChartLabels

A value that indicates whether to show default chart labels.

Type: Boolean

Default: true

Code example:

$("#piechart").wijpiechart({
 showChartLabels:true
});

startAngle

Sets the number of degrees of angle from which to begin painting wedges in the pie. To see an example of this property in action, check out the Mr. T chart sample on JS Bin.

Type: Number

Default: 0

Code example:

$("#piechart").wijpiechart({
 startAngle: 90
});

width

A value that indicates the width of wijpiechart.

Type: Number

Default: null

Code Example:

$("#piechart").wijpiechart({
 width: 600
});

Events

beforePaint

Fires before the canvas is painted. This event can be cancelled.

Default: null

Type: Function

Parameter:

e: A jQuery.Event object.

Code Example:

// Supply a function as an option.
 $("#piechart").wijpiechart({beforepaint: function(e) { } });

OR

 
// Bind to the event by type: wijpiechartbeforepaint
 $("#piechart").bind("wijpiechartbeforepaint", function(e) { } );

beforeSeriesChange

Fires before the series changes. This event can be cancelled.

Default: null

Type: Function

Parameters:

e: A jQuery.Event object.

data: An object that contains old and new series values.

data.oldSeriesList: The old series list before changes.

data.newSeriesList: The new series list that will replace the old one.

Code Example:

// Supply a function as an option.
 $("#piechart").wijpiechart({beforeserieschange: function(e, data) { } });

OR

 
// Bind to the event by type: wijpiechartbeforeserieschange
 $("#piechart").bind("wijpiechartbeforeserieschange", function(e, data) {} );

click

Fires when the user clicks the chart element.

Default: null

Type: Function

Parameters:

e: A jQuery.Event object.

data: An object that contains all the series information for the mouseout sector.

data.data: The value of the sector.

data.index: The index of the sector.

data.label: The label of the sector.

data.legendEntry: The legend entry of the sector.

data.offset: The offset of the sector.

data.style: The style of the sector.

type: "pie"

Code Example:

// Supply a function as an option.
 $("#linechart").wijlinechart({click: function(e, data) { } });

OR

 
// Bind to the event by type: wijlinechartclick
 $("#linechart").bind("wijlinechartclick", function(e, data) {} );

mouseDown

Fires when the user clicks a mouse button.

Default: null

Type: Function

Parameters:

e: A jQuery.Event object.

data: An object that contains all the series information for the mousedown line or sector.

data.data: The value of the sector.

data.index: The index of the sector.

data.label: The label of the sector.

data.legendEntry: The legend entry of the sector.

data.offset: The offset of the sector.

data.style: The style of the sector.

type: "pie"

Code Example:

//Supply a function as an option.
 $("#piechart").wijpiechart({mousedown: function(e, data) { } });

OR

 
//Bind to the event by type: wijpiechartmousedown
 $("#piechart").bind("wijpiechartmousedown", function(e, data) {} );

mouseMove

Fires when the user moves the mouse pointer while it is over a chart element.

Default: null

Type: Function

Parameters:

e: A jQuery.Event object.

data: An object that contains all the series information for the mouseout sector.

data.data: The value of the sector.

data.index: The index of the sector.

data.label: The label of the sector.

data.legendEntry: The legend entry of the sector.

data.offset: The offset of the sector.

data.style: The style of the sector.

type: "pie"

Code Example:

// Supply a function as an option.
 $("#piechart").wijpiechart({mousemove: function(e, data) { } });

OR

 
// Bind to the event by type: wijpiechartmousemove
 $("#piechart").bind("wijpiechartmousemove", function(e, data) {} );

mouseOut

Fires when the user moves the pointer off of the chart element.

Default: null

Type: Function

Parameters:

e: A jQuery.Event object.

data: An object that contains all the series information for the mouseout sector.

data.data: The value of the sector.

data.index: The index of the sector.

data.label: The label of the sector.

data.legendEntry: The legend entry of the sector.

data.offset: The offset of the sector.

data.style: The style of the sector.

type: "pie"

Code Example:

// Supply a function as an option.
 $("#piechart").wijpiechart({mouseout: function(e, data) { } });

OR

 
// Bind to the event by type: wijpiechartmouseout
 $("#piechart").bind("wijpiechartmouseout", function(e, data) {} );

mouseOver

Fires when the user first places the pointer over the chart element.

Default: null

Type: Function

Parameters:

e: A jQuery.Event object.

data: An object that contains all the series information for the mouseover sector.

data.data: The value of the sector.

data.index: The index of the sector.

data.label: The label of the sector.

data.legendEntry: The legend entry of the sector.

data.offset: The offset of the sector.

data.style: The style of the sector.

type: "pie"

Code Example:

// Supply a function as an option.
 $("#piechart").wijpiechart({mouseover: function(e, data) { } });

OR

 
// Bind to the event by type: wijpiechartmouseover
 $("#piechart").bind("wijpiechartmouseover", function(e, data) {} );

mouseUp

Fires when the user releases a mouse button while the pointer is over the chart element.

Default: null

Type: Function

Parameters:

e: A jQuery.Event object.

data: An object that contains all the series information for the mousedown line or sector.

data.data: The value of the sector.

data.index: The index of the sector.

data.label: The label of the sector.

data.legendEntry: The legend entry of the sector.

data.offset: The offset of the sector.

data.style: The style of the sector.

type: "pie"

Code Example:

// Supply a function as an option.
 $("#piechart").wijpiechart({mouseup: function(e, data) { } });

OR

 
// Bind to the event by type: wijpiechartmouseup
 $("#piechart").bind("wijpiechartmouseup", function(e, data) {} );

painted

Fires after the canvas is painted.

Default: null

Type: Function

Parameter:

e: A jQuery.Event object.

Code Example:

// Supply a function as an option.
 $("#piechart").wijpiechart({painted: function(e) { } });

OR

 
// Bind to the event by type: wijpiechartpainted
 $("#piechart").bind("wijpiechartpainted", function(e) {} );

seriesChanged

Fires when the series changes.

Default: null

Type: Function

Parameters:

e: A jQuery.Event object.

data: An object that contains new series values.

Code Example:

// Supply a function as an option.
 $("#piechart").wijpiechart({serieschanged: function(e, data) { } });

OR

 
// Bind to the event by type: wijpiechartserieschanged
 $("#piechart").bind("wijpiechartserieschanged", function(e, data) {} );

Methods

getCanvas

Returns a reference to the Raphaël canvas object.

Code Example:

$("piechart").wijpiechart("getCanvas");

getSector

Returns the sector of the pie chart at the specified index.

Parameter:

index (number) - The zero-based index of the sector to get.

Return Type: Reference to a Raphael element object.

Code Example:

$("#wijpiechart").wijpiechart("getSector", index);

redraw

Redraws the chart.

Parameters:

drawIfNeeded

A value that indicates whether to redraw the chart regardless of whether the chart is painted. If true, then the chart is redrawn only if it has not been previously created. If false, then the chart is redrawn even if it already exists.

Type: Boolean

Default: false

Code Example:

$("piechart").wijpiechart("redraw", true);

Piechart

Contents

User Guide

Overview

Markup and Scripting

Data Binding

Quick Start

How To

Change Appearance

Create a Doughnut Chart

Concepts

Adaptive for Mobile Use

API

Options

animation

enabled

duration

easing

offset

chartLabelFormatString

chartLabelStyle

fill

fill-opacity

font

font-family

font-size

opacity

rotation

stroke

transform

culture

dataSource

disableDefaultTextStyle

footer

compass

style

text

textStyle

visible

header

compass

style

text

textStyle

visible

height

hint

animated

calloutFilled

calloutFilledStyle

compass

content

contentStyle

duration

easing

enable

hideAnimated

hideDelay

hideDuration

hideEasing

offsetX

offsetY

showAnimated

showCallout

showDelay

showDuration

showEasing

style

textStyle

title

titleStyle

innerRadius

legend

compass

orientation

style

text

textMargin

textStyle

titleStyle