PDA

View Full Version : Ext.ux.FlotPlugin



sinsco
25 Sep 2008, 8:23 AM
hi to all,
I'm trying to write an Ext plugin to add Flot functionality, seem it works fine for now with FF3 and IE6.

But I've some doubt, infact I think the code isn't good and it could be write better, so if you have any suggestion, please reply!

however here some tips to use the plugin:


var p = new Ext.Panel({
...
plugins: new Ext.ux.FlotPlugin({plotMargin:80}),
...
listeners: {
ready: function (p) {
p.plot(data, option);
}
}
});



plotMargin: set chart margin
ready: fired when the template is added and ready to plot chart


I've used Flot 0.5, so you have to download it and include also:

jquery.js
jquery.flot.js

and also:

excanvas.js if you want work with IE.

denkoo
25 Sep 2008, 10:11 PM
do you have an example width data and option complete please

I try :


p.plot([
[ 'Bob', 20, 13.45 ],
[ 'Bill', 40, 12.92],
[ 'Mike', 45, 23.02]
], option);
but not work naturally ! :)


Look another example without plugin and working

http://213.251.166.160/~extjs/examples/Ext.ux.FlotPlugin/canvas.htm

sinsco
25 Sep 2008, 10:31 PM
For data and option you could refer to Flot docs...into tha Flot package there are some example, so you could copy "data" and "option" from this exampe and paste into your code - as I do - how ever:



var options = {
grid: {
clickable: true
}
};

var sin = [], cos = [];
for (var i = 0; i < 14; i += 0.5) {
sin.push([i, Math.sin(i)]);
cos.push([i, Math.cos(i)]);
}

this.plot([
{label: "Sin(x)", data: sin},
{label: "Cos(x)", data: cos},
], options);


If you have a look to the code, you can see that I pass "data" and "option" directly to $.plot function...so maybe you have to set some properties...I think

mjlecomte
26 Sep 2008, 4:36 AM
FYI:
http://savvyduck.blogspot.com/2008/02/javascript-mixing-exts-grid-with.html

You could also post your extension, including demo, screenshots, etc. in the UX Repository (see signature).

sinsco
26 Sep 2008, 5:56 AM
FYI:
http://savvyduck.blogspot.com/2008/02/javascript-mixing-exts-grid-with.html

You could also post your extension, including demo, screenshots, etc. in the UX Repository (see signature).

thanks for suggestion!

denkoo
29 Sep 2008, 6:51 PM
For data and option you could refer to Flot docs...into tha Flot package there are some example, so you could copy "data" and "option" from this exampe and paste into your code - as I do - how ever:



var options = {
grid: {
clickable: true
}
};

var sin = [], cos = [];
for (var i = 0; i < 14; i += 0.5) {
sin.push([i, Math.sin(i)]);
cos.push([i, Math.cos(i)]);
}

this.plot([
{label: "Sin(x)", data: sin},
{label: "Cos(x)", data: cos},
], options);



thank you but Don't work :(

sinsco
29 Sep 2008, 10:14 PM
I use Flot 0.5 version...maybe could be this?
I've seen that something change from 0.4 to 0.5!

denkoo
30 Sep 2008, 5:59 PM
I propose to see my example online

http://213.251.166.160/~extjs/examples/Ext.ux.FlotPlugin/panels.html (http://213.251.166.160/%7Eextjs/examples/Ext.ux.FlotPlugin/panels.html)

may be you can found silly error on my code

thanks

sinsco
30 Sep 2008, 10:11 PM
In my code, I don't use jquery adapter...however I can't see more from your link, please post the js code.

denkoo
1 Oct 2008, 6:50 PM
In my code, I don't use jquery adapter...however I can't see more from your link, please post the js code.



Ext.onReady(function(){
var options = {
grid: {
clickable: true
}
};

var sin = [], cos = [];
for (var i = 0; i < 14; i += 0.5) {
sin.push([i, Math.sin(i)]);
cos.push([i, Math.cos(i)]);
}

var p = new Ext.Panel({
title: 'My Panel width plugin',
plugins: new Ext.ux.FlotPlugin({plotMargin:80}),
listeners: {
ready: function (p) {
p.plot([
{label: "Sin(x)", data: sin},
{label: "Cos(x)", data: cos},
], options);
}
},
renderTo: Ext.getBody(),
width:400,
height: 400
});
});

sinsco
1 Oct 2008, 10:37 PM
ok...maybe I found where is the problem...
In flotplugin.js...where I fired 'ready' event, try to change 'afterlayout' with 'bodyresize'...
this works for me and soon as possible I adjust it!

denkoo
1 Oct 2008, 10:59 PM
Sorry :-( but I abandon this solution... sorry:s

sinsco
1 Oct 2008, 11:58 PM
Don't worry...however I've tryed this:



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Panel</title>
<link rel="stylesheet" type="text/css" href="../ext/2.2/resources/css/ext-all.css" />
<script type="text/javascript" src="../ext/2.2/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../ext/2.2/ext-all.js"></script>

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.flot.js"></script>
<script type="text/javascript" src="FlotPlugin.js"></script>
<link rel="stylesheet" type="text/css" href="flotplugin.css" />


<style type="text/css">
.x-panel-body p {
margin:10px;
}
#container {
padding:10px;
}
</style>
</head>
<body>
<script type="text/javascript">
Ext.onReady(function(){
var options = {
grid: {
clickable: true
}
};

var sin = [], cos = [];
for (var i = 0; i < 14; i += 0.5) {
sin.push([i, Math.sin(i)]);
cos.push([i, Math.cos(i)]);
}

var p = new Ext.Panel({
title: 'My Panel width plugin',
plugins: new Ext.ux.FlotPlugin({plotMargin:80}),
listeners: {
ready: function (p) {
p.plot([
{label: "Sin(x)", data: sin},
{label: "Cos(x)", data: cos},
], options);
},
bodyresize: function () {
console.log('ciao');
}
},
renderTo: Ext.getBody(),
width:400,
height: 400
});
});
</script><!-- EXAMPLES -->

</body>
</html>


and works with FF3...and changing in flotpugin.js as the follow:


...
p.on('afterlayout', this.renderFlot, this);
...

with


...
p.on('bodyresize', this.renderFlot, this);
...

now I've not much time to spent...I hope to solve the problem early!!

moegal
7 Nov 2008, 2:28 PM
does your zip file have the revised code in it? Looks like something I could use.

Marty

husayt
27 Jan 2009, 12:19 PM
here is a complete extFlot project. it works like charm.

http://code.google.com/p/extflot/

here are some samples.

http://extflot.googlecode.com/svn/trunk/index.html

Brat.Pidd
17 Feb 2009, 3:40 AM
Great plugin.
I have one 'outside the topic' question though...

http://extflot.googlecode.com/svn/trunk/index.html

Are there any possibilities to print those chart image into PDF ?
thx.