Pie Chart Type

Labels
AJAX(112) App Studio(7) Apple(1) Application Builder(245) Application Factory(207) ASP.NET(95) ASP.NET 3.5(45) ASP.NET Code Generator(72) ASP.NET Membership(28) Azure(18) Barcode(2) Barcodes(3) BLOB(18) Business Rules(1) Business Rules/Logic(140) BYOD(13) Caching(2) Calendar(5) Charts(29) Cloud(14) Cloud On Time(2) Cloud On Time for Windows 7(2) Code Generator(54) Collaboration(11) command line(1) Conflict Detection(1) Content Management System(12) COT Tools for Excel(26) CRUD(1) Custom Actions(1) Data Aquarium Framework(122) Data Sheet(9) Data Sources(22) Database Lookups(50) Deployment(22) Designer(177) Device(1) DotNetNuke(12) EASE(20) Email(6) Features(101) Firebird(1) Form Builder(14) Globalization and Localization(6) How To(1) Hypermedia(2) Inline Editing(1) Installation(5) JavaScript(20) Kiosk(1) Low Code(3) Mac(1) Many-To-Many(4) Maps(6) Master/Detail(36) Microservices(4) Mobile(63) Mode Builder(3) Model Builder(3) MySQL(10) Native Apps(5) News(18) OAuth(9) OAuth Scopes(1) OAuth2(13) Offline(20) Offline Apps(4) Offline Sync(5) Oracle(11) PKCE(2) Postgre SQL(1) PostgreSQL(2) PWA(2) QR codes(2) Rapid Application Development(5) Reading Pane(2) Release Notes(183) Reports(48) REST(29) RESTful(29) RESTful Workshop(15) RFID tags(1) SaaS(7) Security(81) SharePoint(12) SPA(6) SQL Anywhere(3) SQL Server(26) SSO(1) Stored Procedure(4) Teamwork(15) Tips and Tricks(87) Tools for Excel(2) Touch UI(93) Transactions(5) Tutorials(183) Universal Windows Platform(3) User Interface(338) Video Tutorial(37) Web 2.0(100) Web App Generator(101) Web Application Generator(607) Web Form Builder(40) Web.Config(9) Workflow(28)
Archive
Blog
Saturday, March 7, 2015PrintSubscribe
Pie Chart Type

The “pie” chart type is rendered as a circle. Each data point is displayed as a slice out of the circle. This chart type is useful to show the size of values relative to one another. One example may be the number of orders made by each employee – the largest slice of the pie is taken by the employee who made the most orders.

To use “column” chart type, add the keyword “column” to any “pivot-” tag, and make sure that it is separated with hyphens (-).

Data Field Tag
EmployeeID pivot1-row1-pie

A pie chart showing the relative size of orders made by each employee.

The data for the chart can be seen below.

The data showing count of orders by employee.

If the slice is large enough, the percentage value is displayed. Hovering over or clicking on a slice will reveal the data.

The tooltip displaying the value is rendered when hovering over or clicking on a slice of the pie.

If there are too many slices, the chart may become unreadable to the users. Use “topX”, sort the row values, and enable “Other” row to ensure that only the largest X number of slices are displayed, and the rest are collapsed.

Data Field Tag
EmployeeID pivot1-row1-pie-top5-other-sortbyvalue

The pie chart shows top 5 sorted values, with the rest being grouped under "Other".

The sorted top five rows and “Other” row can be seen in the data below.

The data for the pie chart that shows top 5 values, with the rest grouped under "Other" row.

The pie can also be rendered as a 3D pie by using the “pie3d” chart type instead.

Data Field Tag
EmployeeID pivot1-row1-pie3d

The pie chart has been rendered as a 3d pie.

The chart can also be rendered with a hole in the center by specifying the “donut” chart type.

Data Field Tag
EmployeeID pivot1-row1-donut

The pie chart has been rendered as a donut with a hole in the middle.