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.
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.
Hover it. Among other options, you will get an option to view its source.
The task here is to copy different parts of this collective code to appropriate boxes in WordPress.
This section starts with a comment
<!-- Styles -->
Since WordPress plugin does not offer a separate box for CSS, we'll skip this one.
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.:
However, we have a full tag:
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
The section that starts with
IMPORTANT! The code should not include the enclosing
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.
Should become something like this:
<div id="chartdiv" style="width: 100%; height: 500px;"></div>
CodePen and jsFiddle
It's even easier to port amCharts demos, listed on those websites to WordPress plugin.
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 (
<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)