For visualization, spreadsheet tools such as Excel, Google Sheets, LibreOffice, etc. are often used to enter, organize and sort data. Then, one may look for ways to visualize the data using built-in charts’ functionality or his/her favorite 3rd party tool. In this guide, I will show you how to use any spreadsheet tool together with Highcharts Cloud to create a chart that communicates your data most effectively.
In this article I am going to use Highcharts Cloud, as it is not only simple to use, but it also creates interactive charts that will look and perform great online on your blog or website, as well as your static reports or presentations.
Let’s get started!
In this tutorial, I will use Google Sheets, as it is easy to use and provides a familiar interface to users of Excel, LibreOffice, Numbers, etc.
I am personally curious about the economic growth of Indonesia, as many economists refer to it as the “third sleeping giant”. So I decided to visualize the growth of the Indonesian economy over the past four decades. The first thing to do is to get some data. I happened to come across a great source from the Groningen Growth and Development Centre (GGDC).
I divided this tutorial into two sections:
- Data processing
- Data visualization
1. Data processing
The file contained data collected from different countries and sectors over many years. Using the filter option, I isolated Indonesia-related data, then copied them into a new sheet in order to keep things clean. (Check the Filtered Datasheet below):
The table gathers the Indonesian value added in current prices in local currency from 1966 to 2012. For the sake of simplicity, I will visualize the first four categories: Agriculture, Mining, Manufacturing, and Utilities. Feel free to select any categories you would like to display on the chart.
Before moving to the visualization phase, there is one important step to do, and it is to remove the commas from the data. This is because, like many data processing and visualization tools, Highcharts Cloud treats commas as value separators. E.g., Highcharts Cloud would interpret the number 1,234,567.8 as the three numbers 1 and 234 and 567.8. In some regions commas are used to separate numbers in the hundreds and thousands, and this splitting up would, therefore, be wrong. In order for this to be treated as one number, it has to be formatted in the following way: 1234567.8.
The fix is easy. In Google Sheets, select all cells with numbers, go to Format-> Number- More Format -> custom number format, then remove the comma and the zero or write ####, and press the button Apply.
Then the data should look like this table below, and ready to be copied/pasted into Highcharts Cloud.
2. Data visualization
Everything is now ready to visualize the data using Highcharts Cloud.
Go to the main highcharts cloud webpage, either log in to your account, create an account for free, or just click on the big green button that says Get STARTED NOW!
Once in the editor, copy the data from the Google Sheet and paste it into the first cell of the editor (Chart Data section).
Next, navigate to the Templates section to choose your favorite template, I used the spline chart option, under the Line category, as it displays the change of a variable over time, and this is exactly what I am trying to illustrate with this chart.
I will skip the Theme section, as this section is used to for advanced design customizations that are beyond the scope of this tutorial, but feel free to read more about how to create a theme in this link.
The next step is to customize the chart such as adding the title and the subtitle, changing series colors, etc. Go to the Customize section and add the main title and the y-axis title.
To save the chart you have made, click on the button save (at the top right). You can always come back and edit further at a later stage.
To publish the chart, go to the Publish section. There are four different options for making your chart visible to others:
- Iframe or inject code
- Share URL
- Facebook or Twitter
Iframe and Inject codes are used to copy/paste into your website or blog CMS to get an interactive chart. Choose Inject If you would like to further customize the style of the chart, outside of Highcharts Cloud, using CSS, otherwise, use the Iframe code.
You can also choose to share the URL (find it in the Share URL box) to your friends and colleagues, or share the chart on social media such as Facebook and Twitter by clicking on the icons below the green Publish button.
If you need some static images of your chart, locate the export button ( the chart upper right corner) where you may select to download the picture as PNG, JPG, SVG, or PDF.
In this tutorial, I use the IFrame code to share the chart on this web page. Inject code will work the same as the IFrame code.
And voila, you are live!
Note that if you do not have a website of your own to embed the chart into, every chart automatically gets its own public page on the Highcharts Cloud website. The URL to this page is what you get when you select “URL” as your sharing option.
Let’s step back to review the end result. As you can see, charts make data patterns easier to understand: Just by looking at this chart, it is easy to glean that the Indonesian economy has been growing exponentially since 2004. The manufacturing sector is the main and leading sector, followed by agriculture and mining. The utilities sector is lagging behind for some reason! A journalist, economist, or simply a lay person, can easily see a story being told by this data, and like many good stories, inspire further exploration.
For more details on how to optimize your use Highcharts Cloud, check out more articles below.
Highcharts Cloud 101.
Highcharts Cloud documentation.
Highcharts Cloud FAQ.
10 Awesome Highcharts Cloud Tips & Tricks To Start Using Today.