jQuery FLOT with Oracle Apex
Been working with FLOT for a few hours in a carbon monitoring application i’m building over Oracle Apex.
It’s an excellent library that works well with jQuery, adn is very customisable.
here’s a screenshot of todays work:

The code behind is pretty messy right now.
Here’s the crux of it
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 | <script id="source" language="javascript" type="text/javascript"> $(function () { flotoptions = { legend: {show: true, position: "nw"}, bars: {barWidth: 2250000000 }, points: {show:false }, lines: {show:false }, grid: { hoverable: true, clickable: true }, xaxis: { mode: "time",minTickSize: [1, "month"]} }; flotplaceholder = $(".tabFlot"); //Click Handlers $("#btn1").click(function(){eval("z.push(aa)");refreshPlot();return false;}); $("#btn2").click(function(){eval("z.push(bb)");refreshPlot();return false;}); $("#btn3").click(function(){eval("z.push(cc)");refreshPlot();return false;}); $("#btn4").click(function(){eval("z.push(dd)");refreshPlot();return false;}); $("#btn5").click(function(){eval("z.push(ee)");refreshPlot();return false;}); $("#btn6").click(function(){eval("z.push(ff)");refreshPlot();return false;}); function showTooltip(x, y, contents) { $('<div id="tooltip">' + contents + '</div>').css( { position: 'absolute', display: 'none', top: y + 5, left: x + 5, border: '1px solid #fdd', padding: '2px', 'background-color': '#fee', opacity: 0.80 }).appendTo("body").fadeIn(200); } $(".tabFlot").bind("plothover", function (event, pos, item) { $("#x").text(pos.x.toFixed(2)); $("#y").text(pos.y.toFixed(2)); if (item) { if (previousPoint != item.datapoint) { previousPoint = item.datapoint; $("#tooltip").remove(); var x = item.datapoint[0].toFixed(2), y = item.datapoint[1].toFixed(2); showTooltip(item.pageX, item.pageY, "kg CO2 = " + y); } } else { $("#tooltip").remove(); previousPoint = null; } }); }); function refreshPlot(){ $.plot($(".tabFlot"), z, flotoptions); }; </script> |


Blucel is a software consultancy specialising in Oracle and the Internet. We are currently accepting commisions