Pie chart

A pie chart shows a circle divided into different sized segments that represent different categories.

Options

The pie chart has three axes:

"category" - identity of the different segments.
"value" - value used to determine the angle of each segment.
"color" - color of each segment.

Category defaults to column 0, value to column 1, and color is optional.

Object	Property	Description
options	dataLabels	Indicates what lable shouls be shown on the pie chart segments. none – show no labels value – show the segment values percent – show the segment percent category – show the catetgory If dataLabels is anything other than category, a legend is shown which list the categories and the colors used to represent them.
category axis	column	The column that holds the name of the categories. Defaults to 0.
value axis	column	The column from which values are to be read. Defaults to 1.
color axis	column	The column that holds the colors for the segments. Default is to use standard colors.

Styling

If you use dataLabels, the default jqplot rendering (grey) might get lost. You can change the color by setting CSS.

.jqplot-pie-series.jqplot-data-label {
  color: #FFFFFF;
}

Examples

Consider the following table, which analyses the consumption of different types of pie.

Pie	Consumption	Color
Chicken	14	#CC6600
Steak & Kidney	21	#660000
Steak	38	#CC0000

This can be represented in JSON.

{
    "columns": [
        {
            "name": "Pie",
            "reference": "pie"
        },
        {
            "name": "Consumption",
            "reference": "consumption",
            "type":"number"
        },
        {
            "name": "Color",
            "reference": "color"
        }
    ],
    "rows": [
        {
            "pie": "Chicken",
            "consumption": 14,
            "color": "#CC6600"
        },
        {
            "pie": "Steak & Kidney",
            "consumption": 21,
            "color": "#660000"
        },
        {
            "pie": "Steak",
            "consumption": 38,
            "color": "#CC0000"
        }
    ]
}

Notes	Options	Chart
This demonstrates the default options. The segments are not labelled. Default colors are used. There is a legend connecting the segment colors with the categories.	"options": { "type":"pie", }
The third colum (i.e. column 2) is used for colors. Segments are labelled with percentages and the legend is shown. This option has also used the CSS above to color the data labels white.	"options": { "type":"pie", "dataLabels":"percent", "axes":{ "color":{ "column":2 } } }
Colors are based on the categories, and translated into real colors using the options.colors lookup. Segments are labelled with the category. The legend is not shown because the categories are shown on the segments.	"options": { " type":"pie", "width":400, "dataLabels":"category", "axes":{ "color":{ "column":0 } }, "colors": { "Chicken": "yellow" , "Steak": "red", "Steak & Kidney": "brown" } }

Notes

Options

Chart

This demonstrates the default options.

The segments are not labelled. Default colors are used. There is a legend connecting the segment colors with the categories.

"options": {
  "type":"pie",
}

The third colum (i.e. column 2) is used for colors. Segments are labelled with percentages and the legend is shown.

This option has also used the CSS above to color the data labels white.

"options": {
  "type":"pie",
  "dataLabels":"percent",
  "axes":{
    "color":{
      "column":2
    }
  }
 }

Colors are based on the categories, and translated into real colors using the options.colors lookup.

Segments are labelled with the category. The legend is not shown because the categories are shown on the segments.

"options": { "
  type":"pie", 
  "width":400, 
  "dataLabels":"category", 
  "axes":{ 
    "color":{ 
      "column":0
    }
  }, 
  "colors": { 
    "Chicken": "yellow" , 
    "Steak": "red", 
    "Steak & Kidney": "brown"
  }
}