{"id":100,"date":"2008-12-09T17:31:11","date_gmt":"2008-12-10T00:31:11","guid":{"rendered":"http:\/\/eukota.com\/?p=100"},"modified":"2008-12-09T18:51:45","modified_gmt":"2008-12-10T01:51:45","slug":"flot-test","status":"publish","type":"post","link":"https:\/\/www.eukota.com\/index.php\/2008\/12\/09\/flot-test\/","title":{"rendered":"Gas Savings Plotter using Google Code&#8217;s Flot"},"content":{"rendered":"<p>I&#8217;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 &#8220;Flot It!&#8221; button and the result is a plot of cost per gallon of gas vs miles needed to drive to reach the &#8220;Savings Goal&#8221;.<\/p>\n<p>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.<\/p>\n<form name=\"MPG\" id=\"MPG\">\nLower MPG:<input type=\"text\" name=\"low\" value=18 \/><\/p>\n<p>Higher MPG:<input type=\"text\" name=\"high\" value=35 \/><\/p>\n<p>Savings Goal:<input type=\"text\" name=\"savings\" value=3000 \/><br \/>\n<br \/><input type=\"button\" value=\"Flot It!\" OnClick=\"flotIt()\" \/><br \/>\n<\/form>\n<div id=\"placeholder\" style=\"width:500px;height:300px;\"><\/div>\n<p><script id=\"source\" language=\"javascript\" type=\"text\/javascript\">\nfunction flotIt() {\n    x = MPG.low.value;\n    y = MPG.high.value;\n    z = MPG.savings.value;\n    var d1 = [];\n    for (var j = 0.25; j < 6; j += 0.25)\n        d1.push([j, z\/(j*(Math.pow(x,-1)-Math.pow(y,-1)))]);\n    $.plot($(\"#placeholder\"),\n    [{data: d1}],\n    {lines: {show: true},\n    points: {show: true},\n    selection: {mode:\"xy\"},\n    grid: { hoverable: true, clickable: true }\n    });\n}\n<\/script><\/p>\n<p>[UPDATE] December 9, 2008<br \/>\nLearned 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.<\/p>\n<p>[UPDATE] December 9, 2008<br \/>\nIt now works in Google Chrome web browser but not yet in Firefox or Internet Explorer. Working on that now...<\/p>\n<p>[UPDATE] December 9, 2008<br \/>\nNow 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. ><\n<\/p>\n","protected":false},"excerpt":{"rendered":"<p>I&#8217;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&nbsp;<a class=\"read-more\" href=\"https:\/\/www.eukota.com\/index.php\/2008\/12\/09\/flot-test\/\">&hellip;<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[13],"tags":[],"_links":{"self":[{"href":"https:\/\/www.eukota.com\/index.php\/wp-json\/wp\/v2\/posts\/100"}],"collection":[{"href":"https:\/\/www.eukota.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.eukota.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.eukota.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.eukota.com\/index.php\/wp-json\/wp\/v2\/comments?post=100"}],"version-history":[{"count":107,"href":"https:\/\/www.eukota.com\/index.php\/wp-json\/wp\/v2\/posts\/100\/revisions"}],"predecessor-version":[{"id":111,"href":"https:\/\/www.eukota.com\/index.php\/wp-json\/wp\/v2\/posts\/100\/revisions\/111"}],"wp:attachment":[{"href":"https:\/\/www.eukota.com\/index.php\/wp-json\/wp\/v2\/media?parent=100"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.eukota.com\/index.php\/wp-json\/wp\/v2\/categories?post=100"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.eukota.com\/index.php\/wp-json\/wp\/v2\/tags?post=100"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}