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:

World Night Out CSV
Category City Country Item Cost
Date nightBarcelonaSpainDinner69.38
Date nightBarcelonaSpainDrinks at Dinner21.28
Date nightBarcelonaSpainCinema entry11.87
Date nightBarcelonaSpainTaxi10.92
Date nightBarcelonaSpainBig Mac4.75

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 dataframe to read in data
DataFrame frame
frame:Load("../Data/Culture and Entertainment/WorldNightOut.csv")

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.

frame:AddSelectedFactors("Country")
frame:AddSelectedColumns("Cost")
frame:AddSelectedFactors("Items")

Now we create a bar chart object:

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

// create dataframe to read in data
DataFrame frame
frame:Load("../Data/Culture and Entertainment/WorldNightOut.csv")
frame:AddSelectedFactors("Country")
frame:AddSelectedFactors("Item")
frame:AddSelectedColumns("Cost")

BarChart chart = frame:BarChart()
chart:Display()

Example of loading our data and creating bar chart object

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:

// create title to describe graph
chart:SetTitle("How Expensive are Night Outs Per Country")

// label the x and y axis
chart:SetXAxisTitle("Countries")
chart:SetYAxisTitle("Cost (in USD $)")
chart:SetSubtitle("Various nightly activities cost in different countries"

Next, we will change the font size of our graph so it has readability for viewers. As mentioned previously, what many scientific papers fail to do when constructing graphs is having them readable to the audience. In order to change the font size, we must call the function SetFontSize(integer num) which takes in an integer as the parameter. Let us put 30 inside the parameter and the font size should now be set to 30 pts.

chart:SetFontSize(30)

Example of labeling our bar chart

Customizing The Data 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.

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, SetLegendLocation() that takes in a string location and we will put "bottom" as the parameter.

We should have the following code:

chart:SetLegendLocation("bottom")
chart:SetLegendTitle("Countries")

Example of customizing our bar chart

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.

Run the program

Full Example of the Bar Chart

Final Chart

Australia Brazil Czech Republic France Hong Kong Japan Mexico Russia Spain Sweden Switzerland USA 0 50 100 150 200 250 300 Countries Cost (in USD $) How Expensive are Night Outs Per Country Various nightly activities cost in different countries Activity 2 Longdrinks Big Mac Cinema entry Club entry Dinner Drinks at Dinner Taxi

Further Useful Bar Chart Functions

Other Useful Bar Chart Functions
Function Description Usage
IsStacked(boolean)IsStacked() will stack bars on top of each other when considering multiple groups. By default, bars are separated on graphs.chart:IsStacked(true) // setting bool flag to true will stack bars
SortByBarSize()SortByBarSize() takes in no parameters and will sort the bars from largest bar to smallest bar. Note that it only will work with one factor addedchart:SortByBarSize()
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 creating a histogram, which describes how to use the histogram chart in quorum.