Highcharts Beyond-Extremes Plugin

Its been awhile since I've posted anything here. I'll spare you the excuses. I'm still working on the Firebase-Marionette tutorial, and its coming along nicely...but slowly.

As I've alluded to previously, the main project I'm currently working on is an energy/building performance application. One of the requirements is a dynamically populated, interactive chart for historical values of different building parameters (ie room temperatures, heating/cooling modes, etc). The charting library we chose to use for this is called Highstock. It is a specialized version of the Highcharts library that provides a "preview" slider below the actual data, allowing a user to change the date range by sliding some handles around.


The Problem

Out of the box Highstock does much of what I need it to extremely well and very easily, but it feels like its still trying to make the transition from a static "generated once" chart to something that can easily handle interactions such as adding and removing series on the fly and adding data to series that are currently charted.  They have some helper functions that approach these things, but they don't quite address my requirements, so as I encounter needs like these, I end up writing work-arounds.

I currently default all of my charts to start with 30 days of data. However, users frequently need much larger time ranges. I wanted to set up a system where the user puts in a different date and the app determines if it needs to go get more data. Unfortunately Highstock's date-range input validates the user input against the range extremes in the data to make sure the input isn't outside of the current data's date range. This means that if if my chart currently starts on and has data starting on October 10th, inputting October 1st would not pass validation and nothing would happen. Bummer.

So I asked around in their forums and on Stack Overflow and was basically told to edit the Highstock source code. It wasn't hard to find the part that needed to be changed and only 2 lines needed 6 words commented out, but if I edit their source it puts me in charge of maintaining that source going forward.


The Solution

Luckily Highcharts has some fairly decent documentation on how to make a plugin! So that's what I went about doing.

It was pretty straight-forward, but I did have to do a lot of learning about the context that the plugin code runs in. I basically copied the original code that I'd have had to modify out of the source and into the plugin. I made my changes (commenting out like 10 words) and set about figuring out how to get all of the variables in that code defined by the variables accessible to code in the plugin.

Here's the result!
Highstock plugin repo: http://www.highcharts.com/plugin-registry/single/12/Beyond-Extremes
Github page: https://github.com/d-nation/highstock-beyond-extremes


Final Thoughts

I'm not a Highcharts expert, nor am I a plugin guy, but I was presented with the option of taking on a maintainer role for our own version of Highstock, or to write a plugin to augment the original source. With just that criteria it was an easy choice, but when I added in the fact that I could publish it and help out other developers...no brainer.


comments powered by Disqus