Tutorial: Databases

This tutorial shows us how to display database table data into a chart

Visualizing Data in a Database

Another way we can provide a summary of data is through the use of charts. When data is cleaned and ready to be presented, scientists show their data to others. Again, it is very difficult for someone in the industry to show a data table without any sort of quantitative measure or visual representation. Therefore, we often use charts to represent summaries of the information in our data.

For this tutorial, we will be creating a bar chart of our "grocerylist" table inside of our database. We will want to connect our database once again as well as create a DataFrame object. To learn more about how to convert our tables into a DataFrame we can use the following tutorial on converting a data table to a DataFrame.

DataFrame frame

Assuming that our "grocerylist" table is now a DataFrame, we will be using the "frame" object for the rest of the tutorial. Taking our frame component, we use the AddSelectedFactors to create the x-axis for the chart. For the y-axis, AddSelectedColumns() will be used as the comparison data to display the different data points taken from the data table. Think of this as the contents of the bars, lines, etc. of the chart. AddSelectedColumns(text column) and AddSelectedFactors(text column) both take in strings as a parameter or the table column number. For the factors, we will be passing in the column "foodName" and for the chart columns, we will be passing in "FoodCost."

frame:AddSelectedFactors("FoodName")
frame:AddSelectedColumns("FoodCost")

Now we can create a bar chart object by calling the action, BarChart() on our frame object. Any modifications of the chart itself will be using BarChart such as changing the chart colors and labeling our chart.

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

Let's go ahead and label our chart and change its color to showcase some of the modifications we can make on our bar chart. We will be using the actions SetTitle(text name), SetXAxisTitle(text name), SetYAxisTitle(text name), SetColorPaletteToMagma(), and Display() on our chart object. With our grocery list, we will want to give meaning to our chart and relevant data so let's go and set the title "Cost of Grocery Items." Next, let's go and change the x and y axis titles; by default, it will label these axises the column names we used, but it is a good habit to label our charts properly. For the x-axis, let's label it "Item" and for the y-axis, let's label it "Cost (in USD $)."

// Give the chart a descriptive title.
chart:SetTitle("Cost of Grocery Items")

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

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

We can add further customizations inside our BarChart library, however the last action we will use is changing the color of our chart. Quorum allows many different color palettes to customize our chart that create a sense of mood or distinguishment between bars. For this example, we will use the action SetColorPaletteToMagma() on our chart object. This color palette contains a lot of bright pinks.

chart:SetColorPaletteToMagma()

Finally, we can display our chart using the action Display(). In the charts library, it actually uses Quorum's game interface to output the data chart. What this means is that when we run our program, it opens up a Game window that will have all our information on our "grocerylist" table represented in a bar chart. Knowing that we can overlap Databases into Data Science, we are able to use database tables to highlight important information regarding our database tables.

We can view the entire code below.

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

Database database
database:Connect("localhost", "myfirstdatabase", "root", "password")

output database:IsConnected()

DataFrame frame

frame = database:FindAsDataFrame("grocerylist")

output frame:ToText()

frame:AddSelectedFactors("FoodName")
frame:AddSelectedColumns("FoodCost")

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

// Give the chart a descriptive title.
chart:SetTitle("Cost of Grocery Items")

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

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

chart:SetColorPaletteToMagma()

// Display your bar chart.
chart:Display

End of Lesson

You have reached the end of the lesson for Databases. To view more tutorials, press the button below or you can go back to the previous lesson pages.