Bar Charts

Making a Bar Chart

The first chart type we will be using a new type of dataset to make a Bar Chart. Bar charts are useful for data scientists to compare the quantities of different types of groups. This dataset being used showcases the costs of night out activities around different parts of the country. We will be using it to compare how much total these activities cost per country.

First step to this process is that we will need to 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 WorldNightOut.csv dataset here.

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

Loading and Formatting

As mentioned previously, to load and read in the dataset, we will need a DataFrame. Using the frame, we use the Load function and type in the file path of the Night Outs CSV. A comma separated file (CSV) file is a plain text file that separates data with commas.

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

// Create a dataframe to hold the data.
DataFrame frame

// Load your data file into the frame.
frame:Load("data/WorldNightOut.csv")

In a chart, we typically want to categorize / separate our data in a way where we can see a relationship or draw comparisons from. An example of this is trying to find the profit out of grocery store items; instead of having each item be its own category (ex. milk products such as ice cream, cheese, etc), we can group food items to see the overall profit (ex. dairy). We approach our categories of data using this approach through factoring. Later we will be examining an action that allows us to categorize our data, sorting each entry into its respective factor.

For this next part, we will want to select two columns of the dataset that we are comparing: Country and Cost. For Country, we will categorize this data because there are multiple activities listed for one country. This helps format the totals in which we will use Cost to add how much these activities cost per country. To select the Country column in our dataset, we would want to use the function, AddSelectedFactors(text textHeader). This will put countries listed on the x-axis. Adding an additional factor will separate our bar chart even further into smaller bars that can categorize items based on a broader factor, such as countries. We will also be extracting "Items" from the dataset and this will separate each activity from the country and display on the legend.

Similarly, to get the Cost column from the dataset, we use the action AddSelectedColumns("Cost"). This will add up the totals of these columns based on the categorized country and display them on the y axis. We will also briefly describe these two functions below in a table.

// Select data from the frame that you wish to use in your bar chart.
// Note: In Bar Charts, factors are used as the independent data, and Columns are used as the dependent data.
// For this example we will be categorizing by "Country" and "Item" and calculating the bar value by "Cost".
frame:AddSelectedFactors("Country")
frame:AddSelectedFactors("Item")
frame:AddSelectedColumns("Cost")

Now we create a bar chart object:

// Using the frame, create a BarChart object.
BarChart chart = frame:BarChart()

// Display your bar chart.
chart:Display()

Calling the Display() function will give us a pop-up of our formatted data so far. We still need to give meaning to our data, therefore, the following steps will show us how to label and customize our chart.

Labeling the Bar Chart

We have successfully created our BarChart object! Now it is time to add features and tidy it up so we are able to present our data to viewers and have them understand what they are looking at. We will now be setting the title, the x axis title, and the y axis title. We will also be setting the font size so our data chart can be read easily.

To label the titles, we must call the following functions now using our "chart" component: SetTitle(text title), SetXAxisTitle(text title), and SetYAxisTitle(text title). SetTitle(text title) takes in a string as the parameter so we can come up with a title that briefly describes our comparisons; in this case our title can be "How Expensive are Night Outs Per Country." The next part is about labeling the x axis and y axis.

For the x axis, we again will call our SetXAxisTitle(text title) function from our chart component which takes in a string; we should label this "Countries" and put it inside the parameter. The same process follows for SetYAxisTitle(text title) in which it should be labeled as "Cost (in USD $)" because our data calculates the cost in US dollars.

We should also add a subtitle in our chart so we give clarity for our viewers of what the chart is about. This can be any small description or any useful / additional information. In this case, we would call SetSubtitle(text title) and insert a string inside the parameters. We will make our string "Various nightly activities cost in different countries."

We should have the following code:

// Give the chart a descriptive title.
chart:SetTitle("How Expensive are Night Outs Per Country?")

// Add a subtitle for further description.
chart:SetSubtitle("Various nightly activities cost in different countries")

// Give the x axis a descriptive title.
chart:SetXAxisTitle("Countries")

// Give the y axis a descriptive title.
chart:SetYAxisTitle("Cost (in USD $)")

Customizing the Bar Chart

With our bar chart, we are also able to change the color palette, the legend title, and the legend location. Before we display our chart, let us take a look at how to further customize this bar chart. For this tutorial, we will be selecting the Colorgorical palette.

// If needed, you can change the color palette to a predefined palette or create a custom one.
// By default, the palette is set to Colorgorical which helps give our graphs aesthetic and discriminable elements.
chart:SetColorPaletteToColorgorical()

Lastly, we will play around with the legend. Labeling our legend is important so that it provides clarity for the data, especially giving meaning to our categories created in the bar chart. To label the legend, we must call the SetLegendTitle(text title) function which takes in a string value, which we will label as "Countries." Next we can change the position of the legend; by default, it is displayed on the right side, but it can be positioned at top, bottom, and left as well. Let us call the function, SetLegendLocationToBottom() which will set the location to the bottom of the chart.

We should have the following code:

// If needed, you can change the legend location to either left, right, top or bottom. 
// By default, the legend is displayed on the right when showing.
chart:SetLegendLocationToBottom()

// Give the legend a descriptive title.
chart:SetLegendTitle("Activity")

Displaying The Chart

Congratulations, our bar 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 bar chart.

chart:Display()

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

Try it Yourself!

Press the blue run button to execute the code in the code editor. Press the red stop button to end the program. Your program will work when the console outputs "Build Successful!"

chart:Display()

Final Chart

Further Useful Bar Chart Functions

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

Next Tutorial

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