ICC 505: Using Highcharts

Prof. Dan Pacheco | ICC 505 Fall 2014

This exercise is designed to make you comfortable with modifying data in open source code, then publishing it to a web site.

Get Set Up

We will be using the Chrome browser for this exercise, not Firefox. Before we get started, go to http://jsfiddle.net. Create a free account, or log in if you already have one. Keep the browser open after you have logged in.

Review chart types

Highcharts is a Javascript, HTML5 and Jquery library that has pre-canned charts that you can easily modify and publishing into your stories. You simply upload the Javascript libraries on your server (that has been done for you already in this exercise), then modify some code for the chart type you want, and finally embed it into a site where your story lives.

You can view all of the chart types that are possible here:

 In this exercise, we will use the “Area-spline” chart to show two line graphs on the same axis:

Play around in JSFiddle

JSFiddle is a free sandbox that makes it easy to modify code and instantly see the results. You will be creating a “fork” (version) of some code I have set up for you. After you modify your version, you can keep messing around with it and even embed the output into a blog.

 1. Go here to see the JSFiddle for this exercise:

 2. Making sure you are logged in first, click the “Fork” button at the top. You now have your own fork.

 3. Notice that the JSFiddle screen is divided into four parts. The top is HTML, the bottom Javascript, and the lower right is the output of the HTML and Javascript. (The top right is CSS, but we aren’t using that right now.) In this exercise we will only be modifying the Javascript.

4. Scroll down until you find the sections of code that start with xAxis. Notice the list of months. They only go through July. How do we get a full year’s worth of months into the chart? You need to type them in, being careful to copy exactly the style in the code. Of note: each month is surrounded by single quote marks, and there is a comma after the month. But this is also very important to notice: there is no comma after the very last month.

7. Add August through December, then click Update. Your chart will refresh, but there’s no data for the additional months. Why not? Oh yeah, because you have to add in those numbers!

8. Scroll down until you see “yAxis.” Put in a title for the Y axis, and a name for the units you are displaying. Be sure to include a space before what you put in for units or you will notice an embarassing typo in your chart later.

9. To add numbers for units, scroll down to the “Series” section and put in a title for each series, and numbers for each month in the series.

10. Click update when you are done. Does your chart look like you want it to? Good! If not, keep trying until it looks right.

Embed it

The last step is to embed the chart in a blog post along with a short story that explains the data.

11. Get a URL for the output of your chart. Click the Share button in JSFiddle, then copy the URL in “Share full screen result.” Test that URL in a new tab to make sure the chart appears correctly in a browser.

12. Because we’re embedding into a site with a CMS, we will use the iFrame plugin’s short code to embed this chart. Put your URL into the “YOURURLHERE” section in this code snippet:

   <iframe src=”YOURURLHERE” width=”100%” height=”480″></iframe>

IMPORTANT: It’s possible that when you copy and paste, your computer will change the quotes above to curly quotes. If the quotes curl in either direction, replace them with simple quotes that go straight up and down.

13. Go to the a WordPress or other CMS-driven site that you have access to and add a new post. Enter a title. Making sure that your view shows HTML rather than WYSIWYG, paste this code into the box. Click Preview and make sure it apears in the preview. If it does, click Publish, then View to view the public post.

14. If the chart appears, the last step is to go back into the post and write a few paragraphs around the chart explaining to the public what it means.

Now, Go make Another Chart

If you’re feeling more ambitious you can create another chart using data for a story you choose and embed it into your story. You won’t want to use the JSFiddle links to do that. Instead you should upload the code to a server. Here’s how to do that.

  1. Download the High Charts code, which you can get here.
  2. Find an example for a chart you want to make. Open the same Examples folder in the Highcharts codebase you downloaded, edit the index.html file contained in that example folder (not the index at the top of the folder tree), and preview it in a browser (which you can do by dragging the file into an open browser window).
  3. When your chart works the way you like, rename the top of the main folder to any name you choose, and upload the entire folder into a web-accessible FTP site.
  4. Finally, locate the HTML file in the folder you uploaded and put the URL into the iFrame tags. Then put those iFrame tags into a web page in any CMS you choose.