Gas Savings Plotter using Google Code’s Flot

I’m testing out flot, a pure Javascript plotting library for jQuery. It produces graphical plots of arbitrary datasets on-the-fly client-side. The bit below allows you to input a gas mileage for two cars and the amount of money you would like to save. Then click the “Flot It!” button and the result is a plot of cost per gallon of gas vs miles needed to drive to reach the “Savings Goal”.

Currently, this is compatible with Google Chrome and Internet Explorer. I have had trouble getting it to work in Firefox. I have not tried loading it in Safari yet.

Lower MPG:

Higher MPG:

Savings Goal:

[UPDATE] December 9, 2008
Learned a little more JavaScript but at this point am unable to call the function specifically. I'm not sure Flot is actually designed to be called from form data. I have not found a record of it being used this way yet. If you find one, please forward me a link.

[UPDATE] December 9, 2008
It now works in Google Chrome web browser but not yet in Firefox or Internet Explorer. Working on that now...

[UPDATE] December 9, 2008
Now it works in IE (there turned out to be an IE specific .js library called excanvas that I had to include). Still no luck in FireFox. ><

2 thoughts on “Gas Savings Plotter using Google Code’s Flot”

  • Is this supposed to calculate a new graph when I put numbers in? I have allowed to run scripts, but nothing is happening. Linux Firefox 3.0.4

    — Nate

  • Nate, Ultimately, yes that is my goal. But as the text reads right now, I’m still learning how to do it. I just need to re-learn a bit of JavaScript for taking inputs from boxes and then learn the function call to re-plot them in the flot window.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.