Wijmo UI for the Web
wijpiechart jQuery Widget
Show customized pie charts to display simple values.
Syntax
Javascript (Usage) 
$(function () {
    var options; // Type:  wijmo.chart.wijpiechart.options
     
    $(".selector").wijpiechart(options);
});
Javascript (Specification) 
function wijpiechart() : any;
Browser Compatibility
7
5
5
Options
 NameDescription
public Optionanimation

Type: wijmo.chart.piechart_animation

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

 
public Optionaxis

Type: wijmo.chart.chart_axes

A value that contains all of the information to create the X and Y axes of the chart

 
public OptionchartLabelFormatString

Default value: ""

Sets the numeric format of the chart labels that show the value of each chart element. You can use Standard Numeric Format Strings.

 
public OptionchartLabelFormatter

Default value: null

A value that indicates a function which is used to get a value for the chart label shown.

 
public OptionchartLabelStyle

Sets all of the style options of the chart labels that show the value of each chart element.

 
public Optionculture

Default value: ""

A value that indicator the culture to format the chart text.

 
public Optiondata

Default value: null

Bind a field to each series's data x array

 
public OptiondataSource

Default value: null

Sets the array to use as a source for data that you can bind to the axes in your seriesList.

 
public OptiondisableDefaultTextStyle

Default value: false

Sets a value indicating whether you can set the font-family of the text using a class instead of options.

 
public OptionenableTouchBehavior

Default value: true

A value that indicates whether the piechart can be rotated and tooltip is always shown on touchable devices.

 
public Optionfooter

Type: wijmo.chart.chart_title

Sets up the object to use as the footer of the barchart.

 
public Optionheader

Type: wijmo.chart.chart_title

Sets up the object to use as the header of the barchart.

 
public Optionheight

Default value: null

Sets the height of the barchart in pixels.

 
public Optionhint

Type: wijmo.chart.chart_hint

Creates an object to use as the tooltip, or hint, when the mouse is over a chart element.

 
public Optionindicator

Type: wijmo.chart.chart_indicator

Sets up an object that can display an indicator line running horizontally/vertically through the center of each chart element in the chart when the user clicks the chart element.

 
public OptioninnerRadius

Default value: 0

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

 
public Optionlabels

Type: wijmo.chart.piechart_labels

A value that indicates the chart label elements of chart.

 
public Optionlegend

Type: wijmo.chart.chart_legend

Creates a legend object to display with the chart.

 
public OptionmarginBottom

Default value: 25

Sets the amount of space in pixels between the chart area and the bottom edge of the <div> that defines the widget.

 
public OptionmarginLeft

Default value: 25

Sets the amount of space in pixels between the chart area and the left edge of the <div> that defines the widget

 
public OptionmarginRight

Default value: 25

Sets the amount of space in pixels between the chart area and the right edge of the <div> that defines the widget

 
public OptionmarginTop

Default value: 25

Sets the amount of space in pixels between the chart area and the top edge of the <div> that defines the widget

 
public Optionradius

Default value: null

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

 
public OptionseriesHoverStyles

Default value: []

Sets an array of styles to use in rendering bars in the chart when you hover over them.

 
public OptionseriesList

Default value: []

An array collection that contains the data to be charted.

 
public OptionseriesStyles

Default value: []

Sets an array of style objects to use in rendering the bars for each series in the chart.

 
public OptionseriesTransition

Type: wijmo.chart.chart_animation

A value that indicates whether to show animation and the duration for the animation when reload data.

 
public Optionshadow

Default value: true

A value that indicates whether to show a shadow around the edge of the chart.

 
public OptionshowChartLabels

Default value: true

A value that indicates whether to show default chart labels.

 
public OptionstartAngle

Default value: 0

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 following link, http://jsbin.com/ewofiv/1

 
public OptiontextStyle

Creates an object to use for the fallback style of any chart text that does not have other style options set.

 
public Optionwidth

Default value: null

Sets the width of the chart in pixels.

 
Top
Methods
 NameDescription
public MethodaddSeriesPointAdd series point to the series list.  
public MethodbeginUpdateSuspend automatic updates to the chart while reseting the options.  
public MethoddestroyRemoves the functionality completely. This will return the element back to its pre-init state.  
public MethodendUpdateRestore automatic updates to the chart after the options has been reset.  
public MethodgetCanvasReturns a reference to the Raphael canvas object.  
public MethodgetSectorReturns the sector of the pie chart with the given index.  
public MethodredrawThis method redraws the chart.  
public MethodwidgetReturns a jQuery object containing the original element or other relevant generated element.  
Top
Events
 NameDescription
public EventbeforePaintThis event fires before the canvas is painted. This event can be cancelled. "return false;" to cancel the event.  
public EventbeforeSeriesChangeThis event fires before the series changes. This event can be cancelled. "return false;" to cancel the event.  
public EventclickFires when the user clicks the chart element.  
public EventmouseDownFires when the user clicks a mouse button.  
public EventmouseMoveFires when the user moves the mouse pointer while it is over a chart element.  
public EventmouseOutFires when the user moves the pointer off of the chart element.  
public EventmouseOverFires when the user first places the pointer over the chart element.  
public EventmouseUpFires when the user releases a mouse button while the pointer is over the chart element.  
public EventpaintedThis event fires after the canvas is painted.  
public EventseriesChangedThis event fires when the series changes.  
Top

See Also

Widgets

PieChart

Reference

wijpiechart jQuery Widget

 

 


© 2013 All Rights Reserved.

Send comments on this topic.