Adding charts and maps to a Weebly website

This short step-by-step tutorial will show how you can easily add charts and maps to your Weebly website.

Step 1: add an EMBED CODE block

Adding a Weebly code block
Adding a Weebly code block

Step 2: Edit the block

Click on the block you just added to edit it.

Editing code block
Editing code block

Step 3: Creating the chart code

If you already have your chart created somewhere, you’re good to go to Step 4.

If you don’t, we strongly recommend trying out our Live Editor, which will help you create the chart in a very user friendly way, without writing a single line of code.

Once you’re done in Editor, simply hit the “Save HTML” tab to generate the underlying code.

You’ll need to grab all <script> code as well as the HTML code container within the.

Grab HTML code from Live Editor
Grab HTML code from Live Editor

Step 4: Type in or paste in your chart code

Make sure the code contains all the required libraries,

container as well as JavaScript code for the chart itself, enclosed in <script> … </script> tags.

Paste in the code
Paste in the code

Step 5: Enjoy

And voila.

Preview of the chart in Weebly
Preview of the chart in Weebly

Here's the live Weebly website.

Adding more items

Now, just for the sake of it, let’s add a map too:

Adding a map in Weebly
Adding a map in Weebly

Important things to consider when having multiple chart or map instances per page

  • Make sure the
    containers that you create charts in have unique “id” property for each individual instance. I.e. “chart1”, “chart2”, “map1”, etc. The chart/map code needs to be updated accordingly as well: AmCharts.makeChart(“chart1”, …)
  • When using maps and charts together, make sure you use ammap_amcharts_extension.js file instead of ammap.js