WordPress being the single most used web publishing platform, is perfect for when you want your website up and running in minutes.
However, when it comes to dynamic content, such as JavaScript, you’ll find that there’s practically no options in the plain vanilla WP install.
This is precisely the reason why we went ahead and created our own, official WordPress plugin. It allows adding dynamic charts and maps to your posts and pages a breeze.
Continue with this tutorial for step-by-step instructions.
Installing the plugin
To install the plugin, simply go to your Plugins section in WP admin, click “Add New” and search for “amCharts”, then click on “Install Now” next to the “amCharts: Charts and maps”.
![Installing amCharts WordPress plugin]()
WP will install the plugin. Make sure you click “Activate” when the button pops up instead of “Install Now”.
You’re all set.
Configuring the plugin
The plugin comes with 100% usable default configuration. If you’d like to tinker with the config, you’ll find it under Settings > Charts & Maps.
Most of the users might skip this, and dive right in.
Use config page to:
- Set the location from where to load amCharts files. (it loads those files directly from amCharts CDN servers by default)
- Edit default code templates for each chart type
- Other options
Creating a chart
There are several ways to create a chart or map. You can either use a default template or start from scratch.
Starting from scratch
To create a new chart or a map we click “Add New” under “Charts & Maps” in WP admin.
You’ll get a familiar post edit interface with a few additional fields.
The “Title” field is the same field you have for all of the WP posts, pages and other content types. Make it something meaningful, so that when you have a lot of charts, you exactly know what it does.
Naming your chart with something like “Chart 1” is not as descriptive as “Pie chart for expenditures by department for 2016”.
Resources box holds all the JavaScript and CSS files you will need for this chart. All amCharts instances require the “amcharts.js” file as well as the chart type file, such as “pie.js”, “serial.js”, etc.
Some types require multiple files. I.e. Stock Chart requires “amcharts.js”, “serial.js” and “amstock.js”.
Maps require both “ammap.js” and a map file, such as “worldLow.js”.
Resource box needs to show either a relative or absolute path, with the latter being recommended.
![WP resources box]()
If you don’t want to enter those links, you can use the “Select a resource” dropdown to quickly add the link to a resource.
HTML box is where your HTML part goes. Most often it’s a <div> tag that defines the container in which to store the chart or map.
Important part is it’s `id` property. It’s an identification which will be used by the chart to determine where it should be stored in.
You can provide static id, like “mychart”. However, we recommend using a special code “$CHART$”. When generating the chart, WordPress will replace this with a unique id, which will make it safe to have multiple charts on the same page.
Also, you probably want to set it’s style to give it some width and height:
![WP HTML box]()
JavaScript box is where all the magic happens. It contains the actual JavaScript code for the chart or map.
Most of the amCharts-enabled charts or maps use the AmCharts.makeChart() function call.
For example the following code creates a fully functional Pie chart:
var $CHART$ = AmCharts.makeChart( "$CHART$", {
"type": "pie",
"dataProvider": [ {
"country": "Lithuania",
"litres": 501.9
}, {
"country": "Czech Republic",
"litres": 301.9
}, {
"country": "Ireland",
"litres": 201.1
} ],
"valueField": "litres",
"titleField": "country"
} );
Notice the “$CHART$” is here again.
You are encouraged to use this code whenever you want some uniqueness. When displaying the chart, the plugin will replace it with something unique like “amchart1” for each instance on the same page.
For example if you have three charts on the same page, the first one will replace all occurrences of “$CHART$” to “amchart1”, the second to “amchart2”, etc. thus preserving the uniqueness and avoiding any potential id conflicts.
Using a pre-defined template
Let’s say, I want to create a Pie chart. It might be easier to start from a working Pie chart, then just modify it’s code.
To do that, we hover on the Charts & Maps item in WP admin menu, then select “+ Pie”.
![Creating a new chart from template]()
You’ll notice that all fields we discussed in previous section are prefilled with code.
At this point, if you press “Preview chart or map” you’ll get a fully functional Pie chart.
Edit the code, publish the chart.
Previewing the chart
Once you’re ready to preview how your chart looks in real life, hit the “Preview chart or map” button which is located in the box on the left.
![Previewing the chart]()
A new window/tab will open with the chart shown wrapped in your website’s real theme.
Publishing the chart
As with any other chart WordPress content, before it can be shown on a live website, you’ll need to publish it, by hitting the “Publish” button.
That’s all to creating charts. Now, let’s move on to displaying them.
Adding charts and maps to WP content
You can insert special embed codes into any WordPress page or post, called shortcodes.
An amCharts shortcode follows the syntax `[amcharts id=”…”]` where id is the user-firendly slug you entered (or let the plugin assign on) when creating the chart.
You can either enter the shortcode yourself, or use the special icon in editor.
![Inserting chart]()
It will bring up a modal window, which will display a searchable list of charts you have created.
![List of charts to insert]()
Just click on the one you want to be added to the page and the plugin will insert a proper shortcode for it.
![Chart shortcode]()
Now, when you save your page and view it on the live website, you’ll see the the shortcode being replace by the real chart.
![Live chart on a WordPress page]()
Related reading
If you are using our Live Editor, you may find the following article useful:
Embedding Live Editor charts into WordPress (and other oEmbed-compatible systems)
For help on transferring the demos found on amcharts.com, CodePen and jsFiddle to WordPress read this article:
Transferringdemos from amcharts.com, CodePen or jsFiddle into WordPress
The post Using amCharts WordPress plugin appeared first on amCharts.
