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:


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
Function Description Usage
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

// 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

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
Function Description Usage
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()

Next Tutorial

In the next tutorial, we will discuss general usage charts functions, which describes how to customize data charts even further.