Adding Charts & Graphs to the Result page of your Outgrow content

Say you want to create a video advertisement cost calculator. And you want to show a bar chart summarizing different costs as per quality.

Using our spreadsheet-based graphing feature, you can easily create such a calculator. Let's get started!

1. Open Chart Builder

2. Setup The Spreadsheet

Our spreadsheet works like any other spreadsheet. Just start inputting numbers or variables in the spreadsheet and the graph will start building automatically on the side.

You can use variables from the calculator as well in the spreadsheet cells. So you can refer to variables like R1, R2, Q1, Q2, etc and when the graph is getting created for the end-user, it will automatically fetch the numbers for the variables.

🚧

Using Variables

The format to write the variables is slightly different. Instead of writing R1, you need to add an underscore. So it will be R_1 and Q_1.

Also, remember to add a "=" before referring to a variable.

3. Operations Inside Spreadsheet

You can do most mathematical operations inside of the spreadsheet.

4. Graph Types

You can easily change the graph type by selecting the type from the left panel. The graph will automatically adjust to take the numbers.

5. Editing Colors, etc

Just click on the settings tab and you can make aesthetic changes like adding colors and grids etc.

6. Preview to See Graph

You will need to click on "preview" to see the graph in live-action. The graph will not be visible inside the builder. We have to maintain stable performance inside the builder.

📘

Important Note

Sometimes when Conditional Media is enabled on the results page, you will not be able to add Charts & Graphs, as Conditional Media only supports Images and Videos. You can turn off the Conditional Media setting, post which you will be able to see the option of adding charts and graphs.

Charts & Graphs- Use JSON as Data source

Here is how you can use an external data source to create charts/ table and run your content on the data
Let's say you want to fetch data from an external JSON that contains currency rates. Following is the URL with the JSON in the format acceptable on Outgrow - https://api.myjson.com/bins/zrbnz.
To import the data from this JSON and use it in your calculator charts and tables, head to Charts or tables on Result settings.

Select JSON as the data source and enter your JSON feed URL.

If JSON is fetched properly the JSON status will be Connected as shown in the screenshot below. You can add more columns to the right to add formulas.

If Auto Update is turned on JSON data source then every time the feed is refreshed, the formula will have to be defined again.
You can use variables from the calculator as well in the spreadsheet cells along with JSON data. So you can refer to variables like R1, R2, Q1, Q2, etc and when the graph is getting created for the end-user, it will automatically fetch the numbers for the variables.

🚧

Create JSON in proper format

You can use tools like https://myjson.com/ to create JSON in the format accepted by Outgrow.

Feel free to reach out to us at [email protected] and we will be happy to answer any question that you might have.