Figuring Out a Chart Framework
<script src="//ajax.googleapis.com/ajax/libs/ jquery/1.11.2/jquery.min.js"></script>
<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 last step was to copy the chart code, including the data, into my post. I'll show a snippet of it here:
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
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
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.