Saving a Chart

This tutorial introduces how to save charts in Quorum

Saving Our Charts

Now that we have learned how to construct all these charts, we can also save them onto our computer for easier access. All charts should be saved as an SVG (Scalable Vector Graphic), meaning the chart should contain its resolution when zoomed in or out. The importance of using an svg is that the image would not be rasterized, meaning a loss of pixels, and they are still accessible and can be parsed through a screen reader.

The first task we should do before being able to save our charts, we also would need to display them. We can do this simply by calling the Display() function with the chart object we have been using as follows:

chart:Display()

To save our charts we will need to call the Save(text fileName) function and it will save onto our project's parent folder. Here is a brief explanation of the Save() function.

Using the Save() function
FunctionDescriptionUsage
chart:Save(text fileName)Save() takes in a string as a parameter which saves our charts as actual images on our computer. The file name should always have the .svg extension included in order to have a successful save.chart:Save("chart1.svg")

This will create a file called 'chart1.svg' inside the parent folder. Now we can save any of the charts we have created!

Below is a snippet of code to use to save a chart using the Save() function:

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

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

// grabs the average spending values and place as x axis
frame:AddSelectedColumn(1) // spending values in US
frame:AddSelectedColumn(2) // spending values in UK

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

// create chart component inherited from the line chart library
LineChart chart = frame:LineChart()

// sets title for chart at the top, this should give the chart meaning
chart:SetTitle("How Much the US and UK Spend During Christmas")

// displays chart in a specified window size
chart:Display(1500, 750)

// save chart image
chart:Save("linechart1.svg")

Alternatively, we can also display our chart's data onto the Quorum Studio terminal in which we would call the function ConvertToScalableVectorGraphics() and also use the 'output' function in order to translate our data into text form. Here is a brief explanation on the ConvertToScalableVectorGraphics() function.

Displaying charts on the terminal
FunctionDescriptionUsage
chart:ConvertToScalableVectorGraphics()chart:ConvertToScalableVectorGraphics() takes in no parameters and will convert the chart we have created (after calling the Display() function) as an SVG.chart:ConvertToScalableVectorGraphics()

Below is a snippet of code to use to display onto the terminal:

output chart:ConvertToScalableVectorGraphics()

The SVG file relies on web hosted files to be navigated accessibly. The SVG file can be added inline to a webpage which imports the Javascript (used to handle the keystrokes necessary for navigation) and Cascading Stylesheet (used to show which element is focused on the image).

To more easily share our charts, we can call the Share(text fileName) function instead of the Save() function and it will save a Hypertext Markup Language (HTML) file onto our project's parent folder. Here is a brief explanation of the Share() function.

Using the Share() function
FunctionDescriptionUsage
chart:Share(text fileName)Share() takes in a string as a parameter which saves our charts as a page with the image on our computer. The file name should always have the .html extension included in order to have a successful save.chart:Share("chart1.html")

This will create a file called 'chart1.html' inside the parent folder. This file can be opened in the browser and navigated accessibly. Now we can save and share any of the charts we have created!

Below is a snippet of code to use to save a chart using the Share() function:

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

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

// grabs the average spending values and place as x axis
frame:AddSelectedColumn(1) // spending values in US
frame:AddSelectedColumn(2) // spending values in UK

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

// create chart component inherited from the line chart library
LineChart chart = frame:LineChart()

// sets title for chart at the top, this should give the chart meaning
chart:SetTitle("How Much the US and UK Spend During Christmas")

// displays chart in a specified window size
chart:Display(1500, 750)

// save chart image
chart:Share("linechart1.html")

Next Tutorial

In the next tutorial, we will discuss Chart Separation, which describes How to split data into multiple charts for the same plot display..