Transferring demos from amcharts.com, CodePen or jsFiddle into WordPress

Most of the amCharts demos you find will be shown on either amcharts.com demo section, CodePen or jsFiddle websites.

This tutorial focuses on how to easily transfer them into your WordPress website.

Prerequisites

This tutorial relies on amCharts WordPress plugin.

If you haven't done so already, we strongly advise you to check this introductory tutorial, which will guide you through installation of the plugin, as well as basics of displaying charts and maps in a WordPress website.

Demos on amcharts.com

You will find a lot of pre-made demos in our Demos section.

Each of the demos, has a "View Demo Source" button.

View demo source button

Hover it. Among other options, you will get an option to view its source.

When you click on it, you will get all the components that make up the chart: CSS, Resouces, JavaScript and HTML.

Viewing the source of the demo

The task here is to copy different parts of this collective code to appropriate boxes in WordPress.

CSS

This section starts with a comment <!-- Styles -->

Since WordPress plugin does not offer a separate box for CSS, we'll skip this one.

Resources

As the name suggests, the contents should go into "Resources" box of in the WordPress.

Basically, it lists all the external files that need to be loaded, for this particular demo to work as expected.

IMPORTANT! WordPress plugin expects resources to be the link only, i.e.:

https://www.amcharts.com/lib/3/amcharts.js

However, we have a full tag:

<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>

What we'll need to do, is to strip out the tags, so that only the links (URLs) remain from all resources:

https://www.amcharts.com/lib/3/amcharts.js
https://www.amcharts.com/lib/3/serial.js
https://www.amcharts.com/lib/3/plugins/export/export.min.js
https://www.amcharts.com/lib/3/plugins/export/export.css
https://www.amcharts.com/lib/3/themes/light.js

JavaScript

The section that starts with <!-- Chart code --> should go into JavaScript box on WordPress.

IMPORTANT! The code should not include the enclosing <script> and </script>.

HTML

Finally, the tiny little bit of code that starts with <!-- HTML --> should go into, yes you guessed it correctly, HTML box on WordPress.

There's one caveat, though. Most of the demos rely on separate CSS style setting its dimensions - width and height. Since WordPress plugin does not allow entering CSS, you will need to modify HTML to set those dimensions using in-line styles.

So, this:

<div id="chartdiv"></div>

Should become something like this:

<div id="chartdiv" style="width: 100%; height: 500px;"></div>

Cheat Sheet

amCharts demo to WordPress

CodePen and jsFiddle

Both CodePen and jsFiddle that are excellent websites, used to edit and publish working HTML/JavaScript code snippets.

It's even easier to port amCharts demos, listed on those websites to WordPress plugin.

HTML

HTML pane on both CodePen and jsFiddle will contain both the resources and the HTML code.

As with the previous section, you will need to identify resources (<script> and <link> tags), pull out just the link portions and enter them into Resources box on WordPress.

The rest of goes into HTML. (with the same in-line style tweaks as in previous section)

Cheat Sheet

CodePen sections