JavaScript and Highcharts

When you work at a smaller shop you get introduced to a lot of technology and you pretty much have to go with the flow. For the past couple of weeks that flow has been down the white rapids of JavaScript for me.

The goal of the project was conversion from flot to Highcharts. Flot offered some very basic graphing and they wanted more eye candy and functionality so they decided on Highcharts. Will cost the company a licensing fee but it will be a much more professional product in the end.

I have not done much JavaScript in the past. I know it is not Java but the syntax is very close so getting up to speed on that was not an issue. Figuring out all the nuances is another story. I have the project up and running now with some final polish so it works better on iPads and Android tablets.

This would be considered a small project. Single page with two tabs. The page contains a dashboard layout control and you can add widgets. Each widget has associated HTML, shared CSS and a JavaScript to query for the JSON data and convert it into Highchart format. We have all the fun of formatted tooltips and configuration settings such as legend position and visibility of data labels.

So where does the fun begin? The whole code / debug cycle is a bit frustrating. I am using Eclipse and Chrome. If I just change a JS file I can save it in Eclipse, hit refresh in Chrome and see the results. If I am changing CSS or HTML I get to clear the cache in Chrome then refresh to see the changes.

Chrome has a decent debugger but you have to make sure you include the JS in the proper file for Chrome to see it as a source file. I had to remove it from a styles.js and move it into a controlling HTML for this to work. Then the break point may or may not work. You end up doing console.log(object) and then just sniffing around in the output console to see what is happening.

Don't forget console.log('Widget is ' + widget); is totally different than console.log('Widget is'); console.log(widget); The first one converts widget to a string which is generally useless. The second set of lines will show widget as an object you can inspect.

JSON.stringify(object) can come in handy at times. You will get circular references for core objects but for looking at return values from the server and what not it works fine. I usually copy that output into Sublime Text 2 and run the JSON formatter on it to get a good look at the results.

Since JavaScript is not strongly typed Eclipse is not a lot of help when it comes to finding variables and methods. You just have to know what is there by opening code and looking around. Not the best way to be productive. You also are not told your code is crap until you run it. I know dynamic languages have their strong points but I really missed this area of strongly typed languages.

Scoping is another bit of fun. If you want to trigger an event from one place and catch it in another, well it works but figuring out the proper scope can be a bit of a pain. It is all up and running but I ended up getting a lot of help from a developer with a stronger JavaScript background than I. In the end I was still unsure why what he handed me worked but I was just happy it did.

Highcharts is a really solid product. I am very happy with its final look. I was able to pull off a number of cool features. I did a lot of web searching to find out how to format tooltips, grab events, set up gradients, use multiple y axis, do stacked bars, etc. It really helped to be able to run jsFiddle sample projects. Guess that is one of the nice things about JavaScript, you can piddle around with it on a webpage before you toss it into your project.

Experimenting with HTML5 Canvas and JavaScript

I keep hearing about HTML5 especially in the mobile realm so this weekend I decided to see what I could make the canvas do using JavaScript. I have already written the new schedule viewer in Objective C on iOS, Java on Android and Java on the desktop so what the heck.

First attempt was grabbing some sample code of the web and tweaking it until I understood the basics of HTML interaction with JavaScript and basic paint commands for the canvas. I was doing this all via Eclipse and Chrome. I tried to get all the proper plug-ins installed for Eclipse but was not having much luck. I found WebStorm from IntelliJ  and installed that then things became much easier. I could actually put in break points and debug my code. If the code flat out did not run then the basic inspector in Chrome gave me the information I needed to track down those issues.

Again it has been very handy having a multiple monitor setup at home. I can have plenty of space to run WebStorm, NotePad++ etc. on main monitor and Chrome on the second screen where I can test the running application. My second monitor was a free, not super high resolution but still darn handy. Get one if you don't already have one, they are a programming life saver.

Currently I have the following working on the canvas:

Paint time margin (with various gradients)

Paint column headers

Paint grid lines

Paint dead areas outside of grid

Hold down middle mouse button and scroll around in grid

Various "objects" are set up, same objects as in the other implementations. I learned how to get the canvas to resize to fill the screen as you resize the browser. Mouse interactions including up, down, move and exit are in place. I am sure I am still doing various things incorrectly or the hard way but the code appears to be pretty clean and the paint codes runs nice and fast.

JavaScript is very close to Java for general syntax making it pretty easy to adjust to coding in it. You don't have strict variable type checking, arrays and maps have a different syntax but are really easy to use, variable scope is a bit lacking as are name spaces. Most of the code conversion was very straightforward. I can really see where it would be very handy to have a single code base for all platforms from mobile to desktop to OS of choice. Straight Java covers the OS of choice side but does not handle mobile. 

I don't see any painting limitations and the canvas 2D API is feature rich and very fast at painting. I need to chuck the code over on my server and see how it runs on the tablet when I get a little farther along. I also need to tie in the touch events to match the mouse events which should be very easy to do.

Where is will get interesting is in all the user interactions. On the PC you have click, double click, left / right / middle button processing potentials. On a touch device you have tap, double tap and long press. There are times you have to get really creative to handle user interactions. Normally on a touch device a long press will bring up a menu and double tap does a default action (which should also appear in the menu). On a PC a right click shows the menu and double left click is default action.

Still more to learn on the HTML5 / JavaScript side but I am very happy with how much I was able to get done in a few hours this weekend. The web is full of helpful examples and I have dealt with enough programming languages, SDKs and 2D APIs that I was quickly able to get it painting what I wanted.