Inspiration: Jelly Charts
Step 1: Basic Canvas Drawing
Step 2: Calculations and Drawing
With some basic canvas skills it was time to write the code to do the math and draw it. Plotting axis lines, tick marks, and bars. Straightforward, but a lot of work to allow the caller flexibility of canvas size and range of values.
Step 3: Gradients & Text on Canvas
Step 4: Dynamic Resizing
A chart control isn't much use unless the caller can control its size as well as the web user being able to resize their browser window. Although my work so far had not made any assumptions about canvas size or value ranges, more code would be needed to dynamically redraw the chart if the browser window was resized. I found I could use code like this in my HTML page to resize the canvas in response to a browser resize. Although this sort of worked, the browser would sometimes add scroll bars; to counter this I ended up reloading the page on resize and then dynamically sizing the canvas and drawing the chart. Not ideal, but it does work.
Step 5: Fluid Bar Animation
One of the most attractive things about the Jelly Charts are their animation. The Jelly Bar has a vertical bounce effect where the bar is drawn up, higher than its resting height, and then bounces down into position. It also draws the bars left to right with a slight delay so that there is a cascading effect horizontally. While I didn't quite equal this effect in my one-day experiment, I was able to approximate it. I used a timer to draw the bar up to an exagerrated height, and then to lower it to its correct height.
Step 6: Object Parameters & Multiple Charts
Step 7: Multiple Series and Customization
If we're supporting mutliple charts, we might as well support multiple series within a bar chart too. Now Chart.bars is an array of series, where each series is an array of bar objects. I also added customization of colors, and the ability to have a transparent background in case you wanted an iamge or some other background controlled by the HTML/CSS (2-chart demo).
Step 8: Hover & Highlighting
The Jelly Bar allows you to hover over a bar and highlight it in a different color, and I also wanted to create this behavior in my edition. This gave me an opportunity to learn about mouse events. I added a mousemove event listener for the canvas of each registered chart, and also maintain a "hit list" of rendered bars. In response to a mouse move, I scan the mouse coordinates against the hit list to see if the mouse is over a bar. If we have moved over a bar (or off a bar we were previously over), the bar is either highlighted in a different color or restored respectively.