Browsed by
Category: JavaScript

slidePicker – A jQuery Plugin

slidePicker – A jQuery Plugin

I was thinking of ways to visualize data in my WLC_AP_Load application and the thought occurred to me that a interface similar to what you would find in Google Analytics or the Netwitness Investigator interface would be nice.

My current master class is covering HTML5 technologies. The first week was discussing canvas tags. I knew of canvas tags and used libraries that created graphs with them for a long time. However, I hadn’t really gotten dirty with canvas tags and manually drawing before. So Wednesday I decided to try my hand at creating a graphing function that would create a canvas element on the screen. After about three lines of code I thought “This should be a jQuery plugin”. I did some Google searching around got the basic jist of creating a plugin. It was a little rough at first. I’m still not sure if the way i structured my plugin is correct but it works. I hope that I will discover better ways to create jQuery plugins in the future. But hey, gotta start somewhere right?

Three days later I present you with slidePicker.

I had it finished Wednesday before work was over. However, like many of my projects I let feature creep get the best of me and added a TON of options that allow you to really customize the plugin. The screenshot above is a standard graph generated with no options. You can get real crazy with it resulting in something like this.

Here is a screenshot of the reason I developed this plugin. It is showing the number of clients connected to an access point over the timespan of about 3 weeks.

Once I get some time I will get around to creating some docs. If you use this in a dashboard or something awesome that I haven’t thought of let me know. I’d love to see it.

You can grab a copy of the code at my github. 

Here is a page showing a demo and what is possible.

// lance