WebOSDev - Programming has just evolved

The online blog for the webOS developer community you can find everything you need here to get a strong start developing applications for the webOS platform

Integrate with Flot Graph system using Webos

Posted by codesos Tuesday, January 12, 2010 0 comments

Want to be able to produce HI END graphs like this?:



It's very simple:

1. go to http://code.google.com/p/flot/ and download the package.
2. Extract it and add it to your project(just add the entire folder)
3. Add to the sources.json the relevant source you are going to use
(I.E {"source": "javascript/flot/jquery.js"},{"source": "javascript/flot/jquery.flot.js"}
4. Add new Scene or use exsiting one
5. In the HTML add the tag:
<div id="placeholder" style="top:20px;left:10px;width:300px;height:300px;"></div>
6. In the source file you can use this div:

var d1 = [];


for (var i = 0; i < 14; i += 0.5)
d1.push([i, Math.sin(i)]);
var d2 = [[0, 3], [4, 8], [8, 5], [9, 13]];
// a null signifies separate line segments
var d3 = [[0, 12], [7, 12], null, [7, 2.5], [12, 2.5]];
$.plot($("#placeholder"), [ d1, d2, d3 ],{ grid: { color: "#100" } });

Thats all!!