Hi,
here some info on using the jqPlot graph library with Qooxdoo. And one
question at the very end of this mail ...
After having problems with using Prototype/ProtoChart with the latest
Qooxdoo trunk, I decided to go with
jqPlot: http://http://www.jqplot.com/
which is based on jQuery and even has more features than ProtoChart.
It works rather nicely like that:
In index.html put
<!--[if IE]>
<script language="javascript" type="text/javascript"
src="plot/excanvas.min.js">
</script>
<![endif]-->
<script language="javascript" type="text/javascript"
src="plot/jquery-1.3.2.min.js">
</script>
<link rel="stylesheet" type="text/css" href="plot/jqplot/jqplot.css"/>
<script language="javascript" type="text/javascript"
src="plot/jqplot/jqplot.min.js">
</script>
<script language="javascript" type="text/javascript"
src="plot/jqplot/plugins/jqplot.barRenderer.min.js"></script>
<script language="javascript" type="text/javascript"
... other plugins you might need.
Of course you must specify the correct path according to your own directory
structure. Make sure to copy the libraries to the build directory as well.
Then somewhere in your classes you can do the following:
var that = this;
this.graphCanvas =
new qx.ui.container.Composite(new qx.ui.layout.Canvas().set({
})).set({ padding: 0, width:500 });
this.add(this.graphCanvas, {flex: 1});
var dom;
this.pie = function(title) {
dom = this.graphCanvas.getContainerElement().getDomElement();
qx.bom.element.Attribute.set(dom, 'id', 'AgrammonJqplotBox');
this.graphCanvas.set({width:500, height:350});
var data = [['frogs',3], ['buzzards',7], ['deer',2.5],
['turkeys',6], ['moles',5], ['ground hogs',4]];
that.currentGraph =
jQuery.jqplot('AgrammonJqplotBox', [data],
{
title: { text: title,
fontSize: '12pt'},
seriesDefaults:{
renderer:jQuery.jqplot.PieRenderer,
rendererOptions:{sliceMargin:8
}
},
legend:{show:true, fontSize: '8pt'},
// disable cursor
cursor:{zoom:false, showTooltip:false,
followMouse: false,
clickReset:false}
});
this.currentGraph.redraw();
};
this.addListener("appear", this.__appear, this);
Then in the members section:
__appear: function(e) {
this.pie("Plot title");
}
You must defer the call to the appear handler as the dom object must be
created before the call to jqplot.
The only other thing I need was a small patch/extension to jqPlot to have a
clear() function to be able to remove the plot:
--- jqplot.core.js.0.9.4 2009-09-08 16:59:57.000000000 +0200
+++ jqplot.core.js 2009-09-08 17:00:25.000000000 +0200
@@ -1283,6 +1283,14 @@
};
+ // method: clear
+ // Empties the plot target div.
+ this.clear = function() {
+ this.target.empty();
+ };
+
// method: redraw
// Empties the plot target div and redraws the plot.
// This enables plot data and properties to be changed
You need ant and merculiar to build a new jqPlot library ...
This works all fine so far. In principal, it should be possible to write a
Qooxdoo wrapper for jqPlot to provide the jQuery functionality and thus get
rid of the dependency on jQuery. Perhaps one of these days ...
One question in this context: can I load the jqPlot libraries from
within Qooxdoo instead of from the index.html file? The idea is to only load
these libraries on demand (when a user really creates a graph).
Best regards,
Fritz
--
Oetiker+Partner AG tel: +41 62 775 99 03 (direct)
Fritz Zaucker +41 62 775 99 00 (switch board)
Aarweg 15 +41 79 675 06 30 (mobile)
CH-4600 Olten fax: +41 62 775 99 05
Schweiz web: www.oetiker.ch
------------------------------------------------------------------------------
Let Crystal Reports handle the reporting - Free Crystal Reports 2008 30-Day
trial. Simplify your report design, integration and deployment - and focus on
what you do best, core application coding. Discover what's new with
Crystal Reports now. http://p.sf.net/sfu/bobj-july
_______________________________________________
qooxdoo-devel mailing list
[email protected]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
