If you are using amCharts WordPress plugin, you might be wondering how to transfer ready-made demos from amcharts.com website, or ones that you find scattered around on CodePen or jsFiddle services. This tutorial will provide a short instructions on how to do so.
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 from amcharts.com
You will find a lot of pre-made demos in our Demos section.
Each of the demos, has its full ready-made source code listed at the bottom of its description.
The code is sub-divided into sections by HTML comments, such as
<!-- Resources --> or
<!-- Chart code --> .
We'll use those identify which stuff goes into what box in WP.
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.
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/4/core.js https://www.amcharts.com/lib/4/charts.js https://www.amcharts.com/lib/4/themes/animated.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)
NOTE Since there is no CSS box in WP, you may need to transfer the CSS rules into in-line
style attribute. E.g.:
<div id="chartdiv" style="width: 100%; height: 300px;"></div>