{"id":348,"date":"2015-03-03T19:32:46","date_gmt":"2015-03-04T00:32:46","guid":{"rendered":"http:\/\/www.lektrikpuke.com\/blog\/?p=348"},"modified":"2015-03-03T19:54:53","modified_gmt":"2015-03-04T00:54:53","slug":"graphing-with-flot","status":"publish","type":"post","link":"https:\/\/lektrikpuke.com\/blog\/2015\/03\/03\/graphing-with-flot\/","title":{"rendered":"Graphing With Flot"},"content":{"rendered":"<p>I was working on one of my personal projects, graphing data with PHP, when I ran into a wall.  Sure, with PHP, you can get all your data (in the words of some famous poet:  database, oh database, how do I query thee?), parse and arrange you data, and even display it graphically (via an image or indirectly through export to spreadsheet), but there&#8217;s no interactivity.  Well, researching the various javascript\/jQuery libraries led me to Flot, and it was virtually love at first sight.<\/p>\n<div id=\"attachment_349\" style=\"width: 510px\" class=\"wp-caption alignnone\"><a href=\"http:\/\/www.lektrikpuke.com\/blog\/wp-content\/uploads\/2015\/03\/weather-graph-2014-2015.jpg\" target=\"_blank\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-349\" src=\"http:\/\/www.lektrikpuke.com\/blog\/wp-content\/uploads\/2015\/03\/weather-graph-2014-2015-500x272.jpg\" alt=\"Graph of daytime highs and lows vs averages\" width=\"500\" height=\"272\" class=\"size-large wp-image-349\" \/><\/a><p id=\"caption-attachment-349\" class=\"wp-caption-text\">Graph of daytime highs and lows in Meriden, CT. vs averages<\/p><\/div>\n<p>Some helpful notes about Flot:<\/p>\n<ul>\n<li>While Flot accepts JSON formatted data, make sure there are no quotes (&quot;) in the data.  If you think about it, integers and floats are all you really need for the Cartesian coordinate system<\/li>\n<li>All dates need to be *converted to milliseconds to be usable<\/li>\n<\/ul>\n<p>* In PHP I used something like:<br \/>\n<code>function convertDateToTimeMilliseconds($date) {<br \/>\n        return strtotime($date) * 1000;<br \/>\n    }<\/code><\/p>\n<p>The beauty of Flot is you pass it the data (by assigning it to javascript vars), tell Flot what vars to use for the graph, assign labels, set aside a placeholder (for the graph to be written to), and that&#8217;s about it.  You can customize colors, labels, tooltip text, etc. after the fact.  It&#8217;s amazing and it just plain works!<\/p>\n<p><a href=\"http:\/\/www.lektrikpuke.com\/additional-pages\/graphWeatherJS.html\" target=\"_blank\">Click here to see working example displaying graph of Weather Data for Meriden, CT, 2014 &#8211; 2015<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>I was working on one of my personal projects, graphing data with PHP, when I ran into a wall. Sure, with PHP, you can get all your data (in the words of some famous poet: database, oh database, how do &hellip; <a href=\"https:\/\/lektrikpuke.com\/blog\/2015\/03\/03\/graphing-with-flot\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[72,171],"tags":[173,166,5,6,89,155],"class_list":["post-348","post","type-post","status-publish","format-standard","hentry","category-computer-stuff","category-jquery-computer-stuff","tag-javascript","tag-jquery","tag-mysql","tag-php","tag-script","tag-sql-2"],"_links":{"self":[{"href":"https:\/\/lektrikpuke.com\/blog\/wp-json\/wp\/v2\/posts\/348","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/lektrikpuke.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/lektrikpuke.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/lektrikpuke.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/lektrikpuke.com\/blog\/wp-json\/wp\/v2\/comments?post=348"}],"version-history":[{"count":3,"href":"https:\/\/lektrikpuke.com\/blog\/wp-json\/wp\/v2\/posts\/348\/revisions"}],"predecessor-version":[{"id":352,"href":"https:\/\/lektrikpuke.com\/blog\/wp-json\/wp\/v2\/posts\/348\/revisions\/352"}],"wp:attachment":[{"href":"https:\/\/lektrikpuke.com\/blog\/wp-json\/wp\/v2\/media?parent=348"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/lektrikpuke.com\/blog\/wp-json\/wp\/v2\/categories?post=348"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/lektrikpuke.com\/blog\/wp-json\/wp\/v2\/tags?post=348"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}