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’s no interactivity. Well, researching the various javascript/jQuery libraries led me to Flot, and it was virtually love at first sight.
Graph of daytime highs and lows in Meriden, CT. vs averages
Some helpful notes about Flot:
- While Flot accepts JSON formatted data, make sure there are no quotes (") in the data. If you think about it, integers and floats are all you really need for the Cartesian coordinate system
- All dates need to be *converted to milliseconds to be usable
* In PHP I used something like:
function convertDateToTimeMilliseconds($date) {
return strtotime($date) * 1000;
}
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’s about it. You can customize colors, labels, tooltip text, etc. after the fact. It’s amazing and it just plain works!
Click here to see working example displaying graph of Weather Data for Meriden, CT, 2014 – 2015