Eagle eyed JungleDragon followers may have noticed the little reputation chart on the user profile screenshots that I shared earlier:

To really appreciate this component, you have to see it *and hover it* in action. That's why I cooked up a little demo site for you to try it (click to visit the demo site):

Like it? Read on...

The purpose of this chart is to show trend data, in this example concerning a user's reputation. Each plot point in the chart concerns an event that led to a karma change, be it positive or negative. When you hover a plot point, you see the karma change, but also a summary of the event took place along with the date.

And, the very best thing about it is that is not Flash based! This is Javascript only.

How it's made

This chart is not written as a generic component, so I will not detail every line of code. Still, I will give away some clues should you want to do a similar thing. 

The main thing to know is that this chart relies on the Raphael javascript library. Raphael uses SVG rendering (or VML in the case of IE) to draw objects on a canvas. Raphael lets you interact with the vector objects using Javascript. 

By sheer accident I ended up at this chart demo one day. I liked it a lot and decided to customize it to my needs. That was pretty tough actually, since the original demo's code is not documented, slightly messy and pretty much hard coded. I changed several things:

• Scale transformation since the demo could only handle values between 0 and 100
• Customization of the grid and general look & feel
• Extra logic to differentiate between positive and negative plot points
• Custom placeholder and data parsing for detailed event information when you hover a plot point

The resulting chart, which you can see in the demo, works perfectly for my needs. Basically it works like this:

• The HTML on the page has a hidden table containing the data. The data is split into tfoot and tbody tags.  
• The cells in the tbody tag contain the actual numbers which are used to draw the plot points
• The cells in the tfoot tag contains the event description that match with each plot point
• The script parses the table, builds up internal arrays for the data and renders the grid, chart and such
• Upon hovering a plot point, it will look up the details in the internal array and display it in the bottom placeholder.

There's a whole lot of coordinate logic going on, but the essence of it all is simple.

Two final remarks:

• Although this demo should work fine in IE, it does show that IE's javascript engine is slow compared to Chrome, Firefox and Safari. There are a lot more hickups in IE.
• If you are willing to dive into the code, you are free to take this demo and customize to your own needs. However, I would advise considering alternatives as well. For example, there is a dedicated Raphael javascript library for charting called gRaphael.

RATE THIS CONTENT (OPTIONAL)

	Was this document useful to you?
	Rating:	Awesome  Good  Average  Poor  Useless

CREATE A NEW COMMENT

	Name:
	Email:
	Website:
	Content:	HTML is not allowed. Hyperlinks will automatically be converted.