Saving a Chart

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.

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.

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.

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