Connect with Us!
Latest Event
Latest Case Study
Latest Case Study
Discover Affino
Using Highcharts in Articles and Article Steps
Introduction
Highcharts is a great plugin to insert interactive charts into websites. To view demo charts, go to the Highcharts website.
Affino provides a method to insert any type of Highchart into an Article or an Article Step. This allows great flexibility for your articles, enabling you to insert a chart into many different layouts, all working within the responsive framework.
To insert a Highchart into an article, follow these steps:
- Configure Media Workflow Profile
- Configure Media Library Channel
- Create Article / Article Step
- Create a Highchart
- Create a Highchart JS file
- Upload JS file to Article / Article Step
Configure Media Workflow Profile
In Affino, part of the Media Workflow Profile defines which media file types you can upload to a Channel. This Media Workflow Profile is set on the Media Library Channel containing your media.
Here, you will need to add the Highchart JS file format so you can upload this file type to your Article or Article Step.
Configure Media Library Channel
On the Channel containing your articles for which you want to use Highcharts, check which Default Media Library Channel you have selected.
On this Media Library Channel, ensure you have selected the correct Media Workflow Profile.
Create Article / Article Step
Create an Article or Article Step as normal
Click Save and you will see there is an Article Code or Article Step Code respectively. You will need to use this code when creating your JS file to associate the Highchart with the Article or Article Step created.
This unique identifier is needed since each article could contain multiple charts.
Create a Highchart
There are many demo charts to choose from at Highcharts.com. For this guide, we will use the Basic Line Chart and jsfiddle to create the code for the Highchart.
Go to Highcharts' website. Select Basic Line Chart from the demo page and click the Edit in Jsfiddle button to view the Highcharts code.
Configure this chart and insert your own data as required. You will need to understand a little code to customise a chart. There are lots of help files to help you to configure your code.
You will then need to copy-paste this code into a JS file, ready to upload to Affino.
Create a Highchart JS file
You will need to create a Javascript (JS) file containing the Highchart code to upload to Affino
From our example, using the Basic Line Chart within JSFiddle, copy-paste the entire code from the Javascript pane into a plain text editor
This should look like:
$(function () {
Highcharts.chart('container', {
...
...
...
});
Next, replace the word 'container'... within the Javascript
Highcharts.chart('ArticleChart-ITEM_CODE'...
where ITEM_CODE matches the Article Code or Article Step Code from the article.
Finally, save your file with a .js file extension.
Note: Ensure the file is saved as plain text and not rtf, doc or other format
Upload JS file to Article or Article Step
Return to your Article or Article Step and click Edit
Click the multimedia icon and upload your JS file
View your article and you should be able to see your Chart
Did you find this content useful?
Thank you for your input
Thank you for your feedback
Driving business at some of the world's most forward thinking companies
Our Chosen Charity
Meetings:
Google Meet and Zoom
Venue:
Soho House, Soho Works +
Registered Office:
55 Bathurst Mews
London, UK
W2 2SB
© Affino 2024