Making a Line Chart

The next chart type to learn how to create is a line chart. Line charts are a great visualization tool to use when presenting trends over time. Scientists typically use line charts to emphasize patterns of change in one or more variables of data. The dataset that we will be using for this lesson describes how much people in the US and the UK spend on Christmas on average over the years. With this graph, we can see how expensive (or inexpensive) shopping has been from 1999 to present day, and can draw conclusions about overall spending habits and price adjustments.

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 Christmas spending dataset here.

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

Christmas spending CSV
Year Christmas spending in US Christmas spending in UK
1999857945
2000817926
2001794845
2002690760
2003734832

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 Christmas Spending 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.LineChart

/*
    This is an example of a Line Chart built in quorum.
    The dataset we will be working with examines how much spending people in the US and the UK 
    have spent on Christmas over the years.
*/

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

Example of loading our data and creating line chart object

Note that, we stored this dataset in a Data folder and contained in that folder is an inner folder named Science.

Once the data has been loaded in, we will now extract this data to use in the data chart. We will be using two functions from our frame component, AddSelectedColumn(text header) and AddSelectedFactor(text header) where the columns will be used to label our x axis, signifying the groups we are observing and the factor will be used to label our y axis, signifying the change over time. AddSelectedColumn(text header) and AddSelectedFactor(text header) take in a parameter of either the column number or the column label in the CSV file. We will be using the column number to demonstrate.

In our dataset, we have a total of three columns: the year (0), spending in the US (1), and spending in the UK (2). The numbers correspond to the columns which we will extract using AddSelectedColumns(text header) and AddSelectedFactor(text header). For this, we would call AddSelectedFactor(text header) and type in 0 inside the parameter, which grabs the year. Similarly, we would call AddSelectedColumn() and inside the parameters type 1 and 2. Note that AddSelectedColumn(text header) must be called twice to separate column 1 and column 2 from each other. The usage of these functions is shown below:

Adding CSV columns onto Charts
Function Description Usage
frame:AddSelectedColumns(text heading)AddSelectedColumns() takes in a string that matches a column heading from our dataset. This function is used to format our axises. For this tutorial, we will be selecting two columns, specifically column 1 (spending values in the US) and column 2 (spending values in the UK).frame:AddSelectedColumns("heading")
frame:AddSelectedFactors(text heading)AddSelectedFactors() takes in a string that matches a column heading from our dataset. This function is used to label our dots and form the legend based off of the two variables we are comparing. For this tutorial, we will be extracting factor in column 0 (the year)frame:AddSelectedFactors("heading")

We should have the following code:

// grabs the average spending values and place as y-axis
frame:AddSelectedColumn(1)
frame:AddSelectedColumn(2)

// grabs the year values and place as x-axis
frame:AddSelectedFactor(0)

Now it is time to create the Line chart which can be done with the following code. This creates a chart object from our DataFrame component, frame. Because we want both the UK and the US data to be on the same chart, we will be calling the function SeparateByFactor(bool) and put in 'false' as the parameter to get us started. By default, the line chart will separate each line with its own graph, so to adjust that setting, we will just want to simply call the function. 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.

// create chart component inherited from the line chart library
LineChart chart = frame:LineChart()
// creates only 1 chart but both lines are on same chart
chart:SeparateByFactor(false)
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 Line Chart

In order for viewers to understand our data, labels give a clear comprehension of what is being presented. This means that we will be labeling the x axis, y axis, legend, and giving our chart a title that describes the dataset. To do so, we will call the following functions with our 'chart' object: SetTitle(text name), SetXAxisTitle(text name), SetYAxisTitle(text name), SetLegendTitle(text name), and SetSubtitle(text name). Here is a brief description on what each function does and what it takes in.

Labeling 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 "How Much the US and UK Spend During Christmas"chart:SetTitle("How Much the US and UK Spend During Christmas")
SetXAxisTitle(text name)SetXAxisTitle(text name): SetXAxisTitle takes in a string as a parameter, which would be the label of the x axis. For this example, we will label this section "Year" because this is the time frame we are observing.chart:SetXAxisTitle("Year")
SetYAxisTitle(text name)SetYAxisTitle() takes in a string as a parameter, which would be the label of the y axis. For this example, we will label this section "Money Spent (in $)" because this is the factor used for comparison between the different countries. This is also a good section to label the unit we are comparing, such as dollars. chart:SetYAxisTitle("Money Spent (in $)")
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 "Christmas Shopping Spending."chart:SetLegendTitle("Christmas Shopping Spending")
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 "Overtime, shopping costs have increased over the years in XMAS shopping"chart:SetSubtitle("Overtime, shopping costs have increased over the years in XMAS shopping")

// label your line chart
chart:SetXAxisTitle("Year")
chart:SetYAxisTitle("Money Spent (in $)")
chart:SetLegendTitle("Christmas Shopping Spending")
chart:SetLegendLocation("top")
chart:SetTitle("How Much the US and UK Spend During Christmas")

Note, if we would like to see the data chart so far, we can type "chart:Display()" to view it with the labels we created.

Example of labeling our line chart object

Customizing the Data Chart

Now that we have our data labeled, we can customize our data to our liking, such as adjusting the intervals, changing starting values, and changing the color. 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: SetLegendLocation(text location), SetColorPaletteToDisurbing(), SetFontSize(integer size), FlipOrientation(), and ShowLinearRegression(bool). Here are brief descriptions on what each function does and how to use it.

Customizing Charts
Function Description Usage
SetXTickInterval(integer count)SetXTickInterval() takes in an integer as a parameter and sets the interval in multiples of the setX value given. For this tutorial, we will insert 5 as the tick count.chart:SetXTickInterval(5)
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)
SetLineDensity(number size)SetLineDensity(number size) takes in an integer as a parameter and will adjust the thickness of the lines within the chart. For this tutorial, we will insert 4 for the density.chart:SetColorPaletteToDisturbing()
SetColorPaletteToCalm()SetColorPaletteToCalm() changes the color palette to calmer colors such as lighter blues and grays. To view more options for color palettes, check out our Color Accessibility tutorial.chart:SetColorPaletteToCalm()

/* this will divide up the years by 5 from all years from 1999 to 2021
*/
chart:SetXTickInterval(5)

// makes font size bigger
chart:SetFontSize(20)
// creates a thicker line for graph
chart:SetLineDensity(4)
// changes the color palette
chart:SetColorPaletteToCalm()

Example of customizing our line chart object

Congratulations, our line 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(number width, number height), it will display the chart in a respected constraint window size. We will be using the specified chart display for this. In this case, inside the Display parameters, we will put 1500 as the first parameter and 750 as the second parameter which will construct a display based on those dimensions.

chart:Display(1500, 750)

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

Full Example of the Line Chart

Final Chart

How Much the US and UK Spend During Christmas Year Money Spent (in $) 1995.0 2332.5 2670.0 3007.5 3345.0 3682.5 4020.0 0.0 100.0 200.0 300.0 400.0 500.0 600.0 700.0 800.0 900.0 1000.0

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

Next Tutorial

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