If you want to attract new readers, keep your online audience engaged, your content needs to be dynamic and interactive.
Being that so much content today deals with numbers and statistics in some fashion, it is critical to communicate such content effectively through attractive data visualizations.
Highcharts is one of the most simple, yet powerful solutions for content creators and developers looking to embed charts into websites or mobile applications.
This article covers the steps required to embed Highcharts Cloud charts with the three most popular content management systems.
The WordPress platform has been around since the early days of the internet and remains one of the most popular content management systems available today.
WordPress offers a large collection of add-ons and extensions that are provided by third-party developers. Using Highcharts Cloud with WordPress requires no coding knowledge at all. Here are the steps for getting started:
- Navigate to the Highcharts Cloud Homepage and log-in with your account or create a new one. Since Highcharts Cloud is a cloud-based service, you can access your charts from any device in the world.
- Import your data by means of copy-and-paste from an excel file, a link from Google Spreadsheet, or uploading a valid comma-separated value (CSV) file.
- Select a Highcharts template from the list provided. These include a range of options including different layouts and colors. After picking a template, use the Highcharts editing tool to modify the appearance of the chart and customize the axis being used.
- When you are satisfied with the design, click on the “Publish” button in the left sidebar. From there, the site will generate the HTML code for your chart and display it in the “Inject Code” text box.
- Copy the “Inject Code” content and then open your WordPress admin console. From there, navigate to the page where you want to insert the chart and paste the Highcharts code into the desired location (in your raw/HTML view).
Squarespace has risen to become one of the leading website builders and hosts today. You can also purchase domain names directly from Squarespace and use their pre-made templates to design a new blog, personal website, or corporate homepage.
When it comes to Highcharts integration with Squarespace, it functions in much the same way as WordPress. Although Squarespace pages are designed to be maintained without any HTML coding, you do have the option of embedding content from outside sources like Highcharts. Here are the steps for getting started.
- Go to your Highcharts Homepage and browse through your existing charts or build a brand new one from one of the templates offered.
- If you are working with an existing chart design, you still have the option to import a different CSV file with raw data. This way, you can re-use certain elements of a chart while making it dynamic with new information.
- Go to the “Publish” tab of the sidebar when you are ready to move your chart into Squarespace. Highlight all of the text from the “Inject Code” box.
- Log into your Squarespace account and open the page editor. Click on the plus button and choose “Code” from the drop-down menu. Then paste in the Highcharts code and click the “Apply” button.
Many people use Drupal because of the simplicity involved in setting up a new webpage with an interactive message forum.
Highcharts Cloud charts can be easily integrated into Drupal websites through the embed code. Embedding the chart is as simple as copying and pasting your embed code into the Drupal WYSIWYG editor.
As with both WordPress and Squarespace, integration is straightforward and requires nothing more than copying and pasting the Highcharts Cloud chart’s embed code.
For non-techie users, WordPress, Squarespace, and Drupal represent the best options for adding interactive charts from Highcharts Cloud onto a website builder or web page.
The best part is that all of the design work is done through the Highcharts Cloud easy-to-use interface and is then automatically carried over to your web platform once you copy and paste (embed) the relevant code.