Help For Web Editors

Snippet - amCharts

The amCharts Snippet was created to allow content users to add charts to existing pages. It is used in conjuction with a service called amCharts. The idea being that you'll create the chart using amChart's online system and then copy/paste the "data" over to OU Campus in a snippet. 

To get started, go to the page you wish to add it to, check out the page and go into the edit mode. Place your cursor between two paragraphs of where you want to place the chart. Find the snippets icon (puzzle) in the editor and click on it.

Cursor

Find the amChart Snippet and insert it into the page.

Select from drop down

A table with four rows and one column will be added to the page. In the second row, enter in a unique id for the chart. The reason we are putting a unique ID is that if you have multiple charts on the page, the data gets associated with the correct area. It doesn't matter what it is, just needs to be a single word with no spaces or unique characters like apostrophes. Suggested: chart1, chart2, chart3, etc. 

data

To get the data, you'll need to go to amChart's online service and create it. This instructions only goes over how to add amCharts to the site, if you need help with creating the chart, you can look at amChart's Knowledge Base.

https://live.amcharts.com/

Once you have created your chart, you'll need to get the data. Find the second tab labeld Code and copy all the information that is within it.

Code

Once you have copied it, paste that information into the table within OU Campus.

paste

You are all set. From here you do not need to do anything else. Be sure to save the page. When you preview the page the chart will show up.

Frequently Asked Questions

1. My chart is not showing up.

Double check that there is no random spaces before or after your unique chart ID.  

2. What happens if I need to change the data or modify something on the chart?

You can copy/paste the data from OU Campus and put it into amCharts. This will give you the same chart you were dealing with when it was originally created. Go to amCharts and create a new chart (should be the same as the one you created previously) and then copy the data from OU Campus and paste it in the Code tab.

 

If you have any questions about how to use this snippet, please see a member of the Web Team. 

Last Updated: 2016.11.28

A A A