Nicholas Hagen
Flot: jQuery Charting Engine
For those who know me, I tend to dislike plugins such as flash as it requires user installation and often times does not work well or at all on handheld devices. Anyways, one of the spots that flash has worked well is real nice interactive graphs. The only other suitable solution was using server-side generated images with crazy javascript to re-download images on the fly. I have always been interested in other approaches, and I came across a neat little jQuery plugin named Flot. Flot is a pure javascript implementation that provides an API to really create stunning and interactive graphs. It uses Canvas on modern browsers (Firefox, Safari, Chrome, Opera, etc) and excanvas emulator on Internet Explorer. The transitions are smooth and appealing. Plus, you leverage all of the power of jQuery, which is my new preferred javascript library of choice. On a recent project, I used Flot to create a primary graph with an overview graph beneath it. The overview graph was similar to Google Finance graphs in providing a full view of the graph. The primary graph then allowed zooming in. Above the graph was a jQuery slider that allowed scrolling the graph once zoomed in. The total effort to build this was just a few hours and literally less than a 100 lines of code. The simplicity and power of Flot is truly amazing and I highly recommend checking it out in your next projects.
For more examples and screenshots, check out the actual Flot examples.
I was browsing through internet to very similar thing as what u did using FLOT and JQuery wherein I can see the Primary graph with an overview graph beneath it.. pretty much similar to Google Finance. But I do not where to start and how to achieve this. As I was thinking it might not be possible with FLOT and JQuery, luckily I found your blog.
I would appreciate if you can provide me the example of how you did it with code. As I’m new to Jquery and FLOT.. some coding will help me to understand.
Thaks
I was browsing through internet to very similar thing as what u did using FLOT and JQuery wherein I can see the Primary graph with an overview graph beneath it.. pretty much similar to Google Finance. But I do not where to start and how to achieve this. As I was thinking it might not be possible with FLOT and JQuery, luckily I found your blog.
I would appreciate if you can provide me the example of how you did it with code. As I’m new to Jquery and FLOT.. some coding will help me to understand.
Thanks