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

Step 2: Edit the block

Click on the block you just added to edit it.

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.

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.

Step 5: Enjoy

And voila.

Here’s the live Weebly website.

Adding more items

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

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