Once you click the group name in the bar charts on the index page. You will be presented with the entire history of that group. Here is one of the groups in my database.
From here you can “zoom” into a section of time by dragging the sliders on the right and left. The data is then queried from the database and a new slidePicker is generated below this one with a more precise view the selected data.
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.
During a meeting one day me and a coworker were speculating on how many people were connected to a given access point. We were trying to decide which access point was being used the most in an effort to beef up the wireless coverage in buildings that were being used the most around campus. After a min or two I decided that speculation just wasn’t going to cut it.
After a bit of googe’n I was able to use some of the base SNMP classes in PacketStorm to harvest data from our Cisco Wireless LAN Controller. After I was able to begin gathering the number of clients connected to each access point (AP) I made a graph. Shortly after that I decided to group the access points together so that entire buildings could be correlated together to get a better understanding which buildings were being used.
This was pretty much all we needed. It only provides a current snapshot view of the number of clients connected to wireless network.I plan on adding the ability to view data over a time period with later releases.
The graphs were cool but I wanted some extra flare. So I decided to see if I could take it a bit further. I ended up adding the ability to place the groups of APs on a map using latitude and longitude. It was pretty cool to see which buildings were being used the most just by glancing at a map. One side effect that was not originally planned is that you can actually watch the student population migrate around campus. For example, when it gets close to lunch time you see the connections in the dorm rooms get smaller and the connections in the dining commons grow.
Here is a screen shot taken during the day. The students are pretty much evenly spread throughout campus.
At night though they have mostly moved to the dorm rooms that can been seen in this screen shot.
All in all this was a pretty cool little project. With only a day or two invested in it I’m pleased with the result. You can grab a copy of the code over at my gitHub account.