Making a Pie Chart

The next chart to learn is the pie chart. Pie charts are used to see parts-to-whole relationships such as totaling the favorite types of movie genres out of a survey of 100 people. Pie charts divide up a circle into various slices in which each slice represents a percentage of the total variable being represented. The dataset that we will be using for this lesson describes wine reviews in which we can observe the various popular wine types.

First step to this process is that we will need to properly load in the dataset and format it. It is best to keep track of where we are storing our data files. For this tutorial, we will have our dataset inside of a Data folder contained in another internal folder called "Miscellaneous."

To follow along, we can download the wineReviews.csv dataset here.

Here is a snippet of what the dataset should look like:

wineReviews.csv
Province Region 1 Variety
CaliforniaNapa ValleyCabernet Sauvignon
Northern SpainToroTinta de Toro
CaliforniaKnights ValleySauvignon Blanc
OregonWillamette ValleyPinot Noir
ProvenceBandolProvence red blend

Loading and Formatting

As mentioned previously, to load and read in the dataset, we will need to create a DataFrame component named "frame". Using the frame, we must use the Load function and type in the file path of the wine reviews CSV. Recall that a CSV is a comma separated text file that holds in data.

use Libraries.Compute.Statistics.DataFrame
use Libraries.Interface.Controls.Charts.PieChart

// create dataframe to read in data
DataFrame frame
frame:Load("../Data/Miscellaneous/wineReviews.csv")

Once the data has been loaded in, we will now extract this data to use in the data chart. We will be using the function, AddSelectedFactors(text header) to format our data into the pie chart. AddSelectedFactors(text header) will take in a string value that matches a column header to the dataset. For instance, we will be extracting the "variety" column from the dataset.

// pull out selected data, for this we will be categorizing by wine type
frame:AddSelectedFactors("variety")

Now it is time to create the Pie Chart which can be done with the following code. This creates a chart object from our DataFrame component, frame. The rest of this lesson, we will be using the chart object we have created to change and format the rest of our line chart.

// pull out selected data, for this we will be categorizing by wine type
frame:AddSelectedFactors("variety")
// create chart component inherited from the line chart library
PieChart chart = frame:PieChart()
chart:Display()

Example of loading our data and creating our pie chart object

Labeling the Pie Chart

Pie charts are unique because there actually is no need to label an x axis or y axis. The different variables within the genre group we are using separates into parts that we can examine as a whole. For this part, we will focus on learning how to label our chart title and our legend title. Additionally, we will also change the orientation of our legend within the pie chart. The functions we would be using in this case are: SetTitle(text title), SetLegendTitle(text title), SetLegendLocation(text title), and SetSubtitle(text title). Here is a brief description of what each function takes in.

Labeling Pie Charts
Function Description Usage
SetTitle(text name)SetTitle() takes in a string as a parameter, which would be the title of the chart. For this example, we will name the chart "Top Wine Reviews Based on Type." chart:SetTitle("Title Name")
SetLegendTitle(text name)SetLegendTitle() takes in a string as a parameter, which would label the legend of the chart. The legend identifies the separate countries into different lines. For this example, we will label the legend "Variety."chart:SetLegendTitle("Legend Description")
SetLegendLocation(text location)SetLegendLocation() takes in a string as a parameter, which would be the directions, left, right, top or bottom. These directions would place the legend in the specified place. For this example, we will place the legend on the "bottom." chart:SetLegendLocation("Legend Location")
SetSubtitle(text title)SetSubtitle takes in a string as a parameter which would set a subtitle under the title. This can be any short description or any other necessary information for our chart. For this example, we will label the subtitle "Praised wine categorized by type" chart:SetSubtitle("Praised wine categorized by type")

// create title to describe graph
chart:SetTitle("Top Wine Reviews Based on Type")

// label your legend to show users what is being categorized
chart:SetLegendTitle("Variety")
chart:SetSubtitle("Praised wine categorized by type")
// set the legend location, choices are left, right, top and bottom
chart:SetLegendLocation("bottom")

Example of labeling our pie chart

Customizing The Data Chart

Now that we have our data labeled, we can customize our data to our liking, such as adjusting the font size, changing the color palette, and creating a hole in the middle of our pie chart. We will be playing around with all these features and to do so, we will be again, using our chart object to call these functions. The functions we will be using for this would be: SetDonutHolePercent(), SetFontSize(), and SetColorPaletteToPositive()

Custom Pie Chart Functions
Function Description Usage
SetDonutHolePercent(float percent)SetDonutHolePercent() takes in a decimal value which will adjust the size of the hole in relation to the size of the pie chart. Larger percentages will make the hole bigger and smaller percentages will make the hole smaller. For this tutorial, let us make our hole 10%chart:SetDonutHolePercent(0.6) // sets hole size to 60% of chart
SetColorPaletteToPositive()SetColorPaletteToPositive() takes in no parameters, but will adjust the color palette based on a positive color scale including bright oranges, greens, pinks, and yellowschart:SetColorPaletteToPositive()
SetFontSize(integer size)SetFontSize() takes in an integer as a parameter and will set the font size on all text based on the desired input. For this tutorial, we will insert 20 as the font size.chart:SetFontSize(20)

// creates a hole in the middle of the pie chart (optional feature)
chart:SetDonutHolePercent(0.1)

// adjust font size by preference, here we set it to 20 pt
chart:SetFontSize(20)

/* change color palette if needed, this color palette is set to 
   Colorgorical which helps give our graphs aesthetic and discriminable color palettes
*/
//chart:SetColorPaletteToNegative()
//chart:SetColorPaletteToCalm()
//chart:SetColorPaletteToMagma()
//chart:SetColorPaletteToColorgorical()
chart:SetColorPaletteToPositive()

Example of customizing our pie chart

Displaying The Chart

Congratulations, our Pie Chart is constructed! Now we can display our chart with the Display() function. There are two ways to do this, letting it automatically display and specifying a specific window size. By doing chart:Display() it will display in a size equal to the screen size. By doing chart:Display(num, num), it will display the chart in a respected constraint window size. We will be using the default display to show the histogram.

chart:Display()

Now, feel free to clean, build, and run our program and we shortly should see a Game window pop-up. This is our Pie Chart! To view the entire code, click here to view the file.

Run the program

Full Example of the Pie Chart

Final Chart

Top Wine Reviews Based on Type Praised wine categorized by type Variety Cabernet Sauvignon Cabernet Sauvignon-Syrah Chardonnay Friulano Malbec Mavrud Mencía Palomino Petite Sirah Pinot Noir Provence red blend Red Blend Rhône-style White Blend Riesling Rosé Sangiovese Sauvignon Blanc Sparkling Blend Syrah Tannat Tempranillo Tempranillo Blend Tinta de Toro

Further Useful Pie Chart Functions

Other Useful Pie Chart Functions
Function Description Usage
SeparateByFactor(integer)SeparateByFactor() will separate graphs based on number of columns we want in the grid of subcharts. It takes in an integer, but could be left empty. If empty, by default, it would leave it as a single chartchart:SeparateByFactor(4)

To view more examples with charts, we can reference the Quorum Cirriculum Repository for charts.

Next Tutorial

In the next tutorial, we will discuss line chart, which describes how to use the line chart in quorum.