Many times it's useful to know what plots your students have created: the attributes they've placed on the X and Y axes, the attribute they've placed in the legend, and the type of plot they've selected (i.e. dot plot, pie graph, bar chart, etc.). Other times you'll want to create a specific plot for your students to view and answer questions. Additionally, you may want students to insert their lab data and let them use Tuva Tool's intuitive graphing capabilities to analyze and visualize their data. And most of the time, teachers will want to see the plots students have made as an image.
In this support article, we're going to go over these four common use cases for the Tuva Tools. We will provide example code so you can embed the Tuva Tools in your website via an iFrame and communicate with the Tuva Tools to get the plot state, set the plot state, set up the insert data instance, and capturing the plot as an image.
Jump To:
Getting and Setting the Plot State
Insert Data Instance
Capture the Plot as an Image
Help
Getting and Setting the Plot State
There are two main use cases for getting and setting the plot state. By getting the plot state, you will be able to ascertain the plot your students have created. By setting the plot state, you can construct a graph your students may view and use to answer questions.
To see a working example on replit, please visit this link: https://replit.com/@jpatel3/Tuva-Embed. This example shows an implementation of how to get the plot state of any graph created and also to set the plot state.
When you open the link, you'll see a screen similar to this:
Start by clicking the green Run button in the top right corner. Then you'll see the following:
To get the plot state and see what the Tuva Tools will return, click the Get Plot State button. You should see the JSON under Got Message update with information about the plot:
After getting the plot state, reset the plot by clicking the Reset button in the Tuva Tools.
We are now going to pass the plot state we got earlier to the Tuva Tools. We will then see the plotting area update with the same plot state as before. For this code example, note that the JSON under Got Message will reset after clicking Apply Plot State.
Insert Data Instance
The main use case to allow students to insert data into the Tuva Tools is to allow them to create plots using their own data, often it be lab collected data.
To see a working example on replit, please visit this link: https://replit.com/@jpatel3/InsertData#index.html. This example shows an implementation of how the Tuva Tool insert data instance works and how to get and set the raw data for the dataset and how to get and set the plot state for insert data instance.
When you open the link, you'll see a screen similar to this:
Start by clicking the green Run button in the top right corner. Then you'll see the following:
This demo will allow you to explore the following 7 functions:
- Set the Table View Data and Plot State: With this function you can update the Tuva Tools to show the plot state and underlying raw data.
- Set the Table View Data (All): With this function you can set the raw data while also setting the column headers.
- Set Table View Data (without Header): With this function you can set the raw data without updating the column headers.
- Get Table View Data with Plot State: With this function you can get both the raw data shown in the Table View and also the current plot state shown in the Tuva Tools.
- Get Table View Data (All): With this function you can get the raw data with column headers.
- Get Table View Data (without Header): With this function you can get the raw data without column headers.
- Append Table View Data: With this function you can append additional raw data to the bottom of the existing Table View data.
To see how the JSON is structured and the different fields that can be retrieved from and passed to the Tuva Tools, let's start by entering in our own data in the Table View.
After entering some data, you have a number of buttons demonstrating the different functions you have available to you. For example, the screenshot below shows the JSON returned from clicking Get Table View Data with Plot State:
We recommend exploring all the functions available to you so you can see how each JSON is formatted. Once you retrieve a certain JSON, we also recommend clicking the other buttons to see how the Tuva Tool updates based on the rawData and metaData fields.
Capture the Plot as an Image
The main use case for capturing the plot as an image is to show a student's teacher the plot the student has created in an image format.
To see a working example on replit, please visit this link: https://replit.com/@jpatel3/Tuva-Embed. This example shows an implementation of how to capture the plot as an image.
When you open the link, you'll see a screen similar to this:
Start by clicking the green Run button in the top right corner. Then you'll see the following:
To capture the plot as an image, click the Capture Image button in the top left. You will then see the following:
Help
If you need any help while going through the above examples or need help with your implementation, please reach out to support@tuvalabs.com.