A Barely Adequate Guide to JavaScript Charts

I show a fair number of charts on this blog, especially when I'm talking about my Nissan Leaf data, and I've been getting tired of showing boring pictures of charts generated from Google Sheets. Sure, they look nice and it's easy to do, but I wanted something a little more interactive. I thought I could put in a little more effort and spruce up my data presentation a bit, so in the vein of my last Barely Adequate Guide, I'm going to write this post while figuring out how to use a JavaScript charting framework. The idea is to come up to speed as fast as I can on at least one charting framework, and get a functional example working in this post. No detailed analysis. No in-depth guide to every feature. Just do the simplest thing that could possibly work. This shouldn't be too hard, so let's get started.

Figuring Out a Chart Framework

First as always, it's time for a Google search. After looking up "javascript charts," on the first results page I get an even distribution of chart frameworks and sites that list chart framework options:

Taking the first one from the list, Highcharts looks beautiful, and right on the demo pages is a link to JSFiddle where I can play with the chart options and fiddle (heh) with the code so it's exactly how I want it before including it in the article. Here's my first attempt with the demo chart from Highcharts for a chart I use a lot, the scatter plot:

This is pretty slick. You can highlight data points with the cursor, zoom in by dragging a box around points, and zoom out by clicking the 'Reset zoom' button. To get the chart to draw correctly, I had to do a few things. First, I included the required jQuery JavaScript library in my Blogger HTML template at the bottom of the header with the following line of HTML:

<script src="//ajax.googleapis.com/ajax/libs/
  jquery/1.11.2/jquery.min.js"></script>

Then I added a couple more lines to the HTML of this post so that the Highcharts JavaScript will load and a <div> is defined for holding the chart where it should be drawn:

<script src="http://code.highcharts.com/highcharts.js">
</script>
<script src="http://code.highcharts.com/modules/exporting.js">
</script>
<div id="test_chart" style="height: 400px; margin: 0 auto; 
  max-width: 800px; min-width: 310px;"></div>

The two <script> tags only need to be included once per post that uses charts, and I don't include it in the Blogger template so that it doesn't needlessly load the Highcharts JavaScript for posts that don't use it. That means there will be a little redundancy when multiple posts that use charts are loaded on the same page, but I'm okay with that inefficiency.

The last step was to copy the chart code, including the data, into my post. I'll show a snippet of it here:

<script type="text/javascript">
$(function () {
  $('#test_chart').highcharts({
    chart: {
      borderRadius: 8,
      type: 'scatter',
      zoomType: 'xy'
    },
    // boatload of chart options and data
    // ...
  });
});
</script>

The complete code can be found at JSFiddle, where it's trivially easy to play around with different settings and see how the chart changes. The fact that they have all of this demo code posted at JSFiddle is great. I couldn't believe how easy it was to get this working. The experience was totally seamless. They also have excellent documentation on all of the chart options in an easy to browse format.

Applying What I've Learned

Now that I have a working chart, the next task is to see how easy it is to convert some of my own data into the right format and include it in a chart. After all, I need to have charts with my own data in them, right? Since I have a bunch of Leaf battery data, I'll use that. I found that I first had to format the data so I could easily add it to the chart's JavaScript. In Google Sheets I separated each data set into its own sheet with a column for temperature and another column for estimated range. I ended up with four sheets for the data sets for 2012H2, 2013H1, 2013H2, and 2014H1.

I saved each sheet to my computer as CSV files, and then using a little Vim-fu, I added the necessary brackets to get the data into the [[temp1, miles1], [temp2, miles2], …, [tempN, milesN]] format needed for the chart's data series section. Then it was a simple copy and paste into JSFiddle to check that the chart worked, and another copy and paste of all of the JavaScript into the post. If I was going to do this a lot, I'd probably write a script to generate more of the JavaScript, but for this test the manual editing was fine. I end up with this:

Nice! The other neat thing about these charts is that you can click on the labels in the legend to toggle the data sets on and off—very useful when you have a lot of points, like in this chart. I'd say this chart is sufficient for the things I want to do, so this exercise has been a success. But what about other options? I haven't even looked at anything else.

Looking at Other Options

To quickly evaluate some other options, I took a look at the rest of the top 10 Google results. The 15 Best JavaScript Charting Libraries article has a decent overview of the main charting libraries, including Highcharts, but it doesn't go into too much detail about what differentiates the libraries. The Wikipedia comparison has a more complete list of charting libraries, and at least on the metrics chosen by the Wikipedia authors, there really isn't much differentiation among them. All of the libraries more or less provide similar features, so unless there's a critical features that only some of the libraries support, it probably boils down to a matter of taste. Here is what I found from my own brief look at a few of the other libraries.

Chart.js - This looks like a simple, straight-forward library that allows you to create clean, elegant charts without a lot of extra cruft. It looks like it's a bit too simple for the features that I wanted, but if I wanted a no-frills chart that looked great, I'd definitely consider Chart.js.

Google Charts - It looks like Google exposed the API for their chart creation feature in Google Sheets with this library. The documentation looks great, the charts are easily recognizable by anyone that uses Sheets, and they seem to be very fast. They also look to be quite fully featured with scatter plots and zoom capability.

D3.js - This library is like the assembly language of charts. It gives you incredibly precise control over every aspect of charting, and it allows you to make all kinds of different charts beyond the basic bar/line/pie charts that most libraries offer. The flexibility of this library is readily apparent in this gallery of D3.js charts, and it's truly astounding. Unfortunately, I don't have the time to get good at something this complex.

amCharts - Probably the most beautiful charts out of the box, amCharts is an extensive charting library that's as easy to use as Highcharts or Google Charts. There's also an online chart builder that looks pretty nice—kind of like a JSFiddle made specifically for their library. The library requires a license for commercial use and otherwise has an embedded link on every chart.

There are many more options, but they all start to look alike after a while. I would have to use them extensively to ferret out more of the trade-offs, and I'm sure each one has situations where it would be the best choice. As it is, I'm quite happy with Highcharts. It was super easy to get up and running for this blog, and the documentation is so good that I can quickly find what I need, even if I'm only using the library a couple times a month. Who knows? Because of how easy it is to use, I might end up using it more than that. We shall see.

Lucid Mesh

Search This Blog