PDA

View Full Version : Ext.ux.Flot



kiyoto01
20 Mar 2009, 5:43 AM
Hi, I'm developping a wrapper of jQuery flot.

Download (Project Home): http://code.google.com/p/extflot/
Demo: http://extflot.googlecode.com/svn/trunk/index.html
Tutorial: http://code.google.com/p/extflot/wiki/Tutorial
API Documentation: http://extflot.googlecode.com/svn/trunk/extflot-doc/index.html

I know the graph drawing method (Ext.Chart) is added in Ext 3.0.
However, Ext.ux.Flot has some features...

* jQuery flot is pure javascript graph library.
It does not need flash. But canvas support is required (In IE use excanvas.js).
* Therefore Ext.ux.Flot do not access server when redraw.
* Bar, line and pie graph types support (pie chart support is my personal branch)
* Support some features for dynamic user operation by default. (zoom-in, zoom-out, hand move, select data points by dragging)
* Some useful features are supported by default. (context menu, tooltips, property dialog, etc...)

Library Requirement
* Ext JS (2.2.1 or 3.0rc1.1)
* jQuery flot (0.5 or trunk head)
* Explorer Canvas (within flot 0.5 or trunk head)

Try it!

I'm sorry my poor English!
Thanks,

moegal
20 Mar 2009, 6:14 AM
we are working on integrating pie to this as well. Should have it done by Monday. It works now in FF but not IE.

kiyoto01
20 Mar 2009, 9:09 AM
we are working on integrating pie to this as well. Should have it done by Monday. It works now in FF but not IE.

That feels so nice.
I'll test it and support in the next version!=P~

greyknght1
20 Mar 2009, 9:09 AM
Outstanding Job!

greyknght1
20 Mar 2009, 9:13 AM
Are you planning on integrating the Datastore into the flot, so when you update the datastore the grid can change? This would make it really easy to make some custom analysis charts with very minimal effort. I'll see if I can wip up something over the weekend along those lines.

greyknght1
20 Mar 2009, 9:15 AM
You might also want to fix the resizing bug you have. It doesn't resize at all after the initial rendering.

kiyoto01
20 Mar 2009, 7:52 PM
You might also want to fix the resizing bug you have. It doesn't resize at all after the initial rendering.

OK, I'll modify that Ext.ux.Flot hands window resizing in the next version.
Please wait.

kiyoto01
20 Mar 2009, 11:02 PM
Are you planning on integrating the Datastore into the flot, so when you update the datastore the grid can change? This would make it really easy to make some custom analysis charts with very minimal effort. I'll see if I can wip up something over the weekend along those lines.

Yes, the store for property dialog can get synchrouns with the flot chart refreshing.

Ext.ux.Flot has 2 methods to convert Ext.data.Store <-> flot series data.
* createStoreData(series) : flot series -> Ext.data.JsonStore
* createSeries(store, xColumn) : Ext.data.JsonStore -> flot series

The above method is used on graph drawing.

* Flot.js:844


onDraw: function() {
this.setupLegend();
this.store.loadData(this.createStoreData());
this.fireEvent('draw', this);
},
onDraw() is called when redraw(), but draw(). Because redraw() is so heavy.

* Flot.js:1514


redraw: function() {
var series = this.getData();
if (this.fireEvent('beforedraw', this, series) !== false) {
this.setupGrid();
this.draw();
this.onDraw();
}
},
* Flot.js:1619


draw: function() {
return this.flot.draw();
},
To modifies graph dynamically, please write the followings...



var series = this.getData();

// some modification to series[i].data
//...

this.draw();
Now, I try to write dynamic refreshing demo.
http://extflot.googlecode.com/svn/trunk/dynamic.html
This demo is not completed. But it is maybe helpful...

This demo modifies flot series directly (not store data).
And it uses draw(), not redraw().

* dynamic.js:95


//this.redraw();
this.draw();

evanc
23 Mar 2009, 8:56 AM
I'll be keeping an eye on this. We're using Google Charts which works well but is kind of finicky and slow. I've been wanting to replace it with Flot for some time.

scottpenrose
24 Mar 2009, 2:26 AM
Just wanted to add thanks. I am, for many reasons, not all justified, very against Flash, and will not be supporting any of my sites using Flash for graphs. As such I have used PlotKit, and Flot in the past - but to have it integrated so nicely into Ext is excellent.

Thanks

Scott

Foggy
24 Mar 2009, 2:30 AM
I using also Google Chart at the moment. If Ext.ux.Flot will support Pie charts, i'll change quick ;)
Keep up your nice work...

kiyoto01
24 Mar 2009, 10:20 AM
Thanks so many responses...

I'm planning Ext.ux.Flot development schedule.

* ver 0.6 : This weekend
- Support resizing (add onResize() method for Ext.BoxComponent)
- Fix icon position of context menu in IE6
http://extjs.com/forum/showthread.php?t=59692
* ver 0.7 : April?
- Support pie chart (Apply Flot Pie to Ext.ux.Flot)
http://groups.google.com/group/flot-graphs/msg/b56101eb1375d1da
* ver 0.8 : April?
- Support dynamic refreshing.
http://extflot.googlecode.com/svn/trunk/dynamic.html
* ver 0.9 : May?
- Support binding with Ext.data.Store.
I hope to adjust I/F with Ext.Chart.

Is this plan OK?
Too slow? But I'm weekend programer.
I don't have enough time in week day.

Thanks.

galdaka
24 Mar 2009, 10:40 AM
Good work!!

Greetings,

kiyoto01
24 Mar 2009, 11:55 AM
Tonight, I tested Flot Pie.

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

But it has some problems...

* Hidden serie does not work well.
* Data points selection does not work well.

Pie chart support maybe takes a lot of modifications...
However, if you do not need the above functions, you can already get pie chart on Ext.ux.Flot (ver 0.5).

If you do, at first, you have to download jquery.flot.pie.js from the following site.
http://groups.google.com/group/flot-graphs/msg/b56101eb1375d1da

And give a pie object into flot configurations.


{
xtype: 'flot',
pie: {
(pie configurations...)
},
series: {
{label: 'xxx', data: 10},
...
}
}
About pie option, please see index.html in Flot.Pie.zip, or
http://code.google.com/p/extflot/wiki/FlotPieApi?ts=1237920811&updated=FlotPieApi


Try it.

----

The following sample source code only exist in svn repository (not zipped).

* pie.html:12


<!--<script language="javascript" type="text/javascript" src="jquery.flot.js"></script>-->
<script language="javascript" type="text/javascript" src="jquery.flot.pie.js"></script>
* flotpiedemo.js:9


var get_pie = function() {
return [
{ label: "Serie1", data: 10},
{ label: "Serie2", data: 30},
{ label: "Serie3", data: 90},
{ label: "Serie4", data: 70},
{ label: "Serie5", data: 80},
{ label: "Serie6", data: 110}
];
};
* flotpiedemo.js:340


title: 'Pie (Alpha)',
id: 'pie',
items: [{
xtype: 'flot',
pie: {
show: true,
pieStrokeLineWidth: 0,
pieStrokeColor: '#FFF',
//pieChartRadius: 100,
//centerOffsetTop: 30,
//centerOffsetLeft: 30,
showLabel: true,
labelOffsetFactor: 5/6,
//labelOffset: 0
labelBackgroundOpacity: 0.55,
labelFormatter: function(serie){
//return serie.label;
//return serie.data;
return serie.label+'<br/>'+Math.round(serie.percent)+'%';
}
},
legend: {
show: true,
position: "ne",
backgroundOpacity: 0
},
series: get_pie()
}]
* Flot.css:29


/* for Flot pie */
.pieLabel div{
font-size: 10px;
border: 1px solid gray;
/* background: yellow; */
background: gray;
padding: 1px;
text-align: center;
}

Foggy
27 Mar 2009, 1:38 AM
Is this plan OK?
Too slow? But I'm weekend programer.
Hehe, you are a nice guy, if i were your customer, maybe i could say something like that.
But in this way, personally i am happy if you do this, i am not so arrogant to give you a timeframe :)

stever
27 Mar 2009, 9:21 AM
Looks great! I guess it is only for other GPL3 projects though?

kiyoto01
27 Mar 2009, 11:13 AM
Tonight, I released Ext.ux.Flot ver 0.6.
http://code.google.com/p/extflot/

* Support resizing
- Add onResize method for BoxComonent
- Obsolete margin option (it is just in ver 0.5)

* Support pie chart
- Add a new class, Ext.ux.PieFlot



items: [{
xtype: 'pieflot',
pies: {show: true, labelWidth: 30, fontSize: 10, autoScale: true, fillOpacity: 1},
series: [
{ label: 'Internet Explorer', data: [[0, 68.15]]},
{ label: 'Firefox', data: [[1, 21.34]]},
{ label: 'Safari', data: [[2, 7.93]]},
{ label: 'Chrome', data: [[3, 1.04]]},
{ label: 'Opera', data: [[4, 0.71]]},
{ label: 'Other Browsers', data: [[5, 0.0 ]]}
]
}]
It is not so difficult job, I thought before starting.:>

I used the latest flot (r148) and a patch of pie chart support.
http://code.google.com/p/flot/issues/detail?id=5

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

However, both flot r148 and patch of pie chart support are not stable.
They have still some bugs.
Anyway, my business is over...I-|

Please wait for the latest flot and pie chart support become stable, and they are released as official.
I'll follow update of flot...:-|

Thanks

moegal
28 Mar 2009, 6:51 AM
looks great, nice work!

Seems IE does not like a pie chart with a slice value below 1.0, small enough problem though.

Thanks, Marty

stever
2 Apr 2009, 7:52 AM
When you say dynamic, do you mean something like this (http://persevere.sitepen.com/stocker.html)? That would be cool...

moegal
2 Apr 2009, 8:31 AM
You can see the example at:

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

It seems to make IE7 really slow for me thought.

kiyoto01
2 Apr 2009, 12:36 PM
Yes, I mean like it when say "dynamic".
And I think that moegal said is really true.
Dynamic refreshing is too slow in IE7...

But I don't have good method for this problem...
I think that excanvas.js is just the emulator of canvas support.
It is a javascript implementation, not a browser native.

And I don't know how to free memories what the previous timings...
The dynamic sample free nothing.
I feel that I should consider the dynamic refreshing ratio and memory management.


About Pie chart which value below 1.0,
it is the bug of flot pie chart support.
I think that it is problem of NaN or zero division.
Maybe, IE means that NaN is infinity, but FF means NaN is zero.

Thanks.

kiyoto01
4 Apr 2009, 9:26 PM
Looks great! I guess it is only for other GPL3 projects though?

Oh, I set license to 'GPLv3'. I changed to 'MIT License'.
I didn't know to select the license policy, either more ristrictive or loser.

I don't have strong policy abount license matter.
I would like to follow the license policies of Ext JS, flot, and jQuery...

Thanks

George Thompson
8 Apr 2009, 6:29 AM
Hi kiyoto01 and all,

I've been following the great progress of Ext.ux.Flot. I'm guessing that everyone who is interested in Flot and Extjs and perhaps charting in general is very interested in this project.

I dropped a pie and a bar chart into the EXTjs portal example to see how easy that would be. It was as easy as "pie". I noticed an issue IN IE8 when I tried to drag and drop the pie chart, the shape disappeared. Some similar happened with the barchart. In Firefox and Chrome I noticed problems as well. But the behavior was some what different. On the first drag and drop everything seemed ok. Repeated moves would sometimes work. Any move into the 3rd column always lost the chart.

I don't think this is unique to this library. Perhaps this is something related to canvas. I encountered something like it when I created a small chart using canvas. I was able to fix my problem by forcing a redraw with my little chart during the portal on drop event.

Does anyone have any recommendations on what we could do with the Ext.ux.Flot extension to stop the disappearing image after a drop event? How can I force a redraw of the pie? Or is there a better way to handle this issue?

The code at this link should run when dropped into the EXTJS /examples/portal/ directory.

http://pastie.org/440732

stever
8 Apr 2009, 12:58 PM
Only in Firefox? If so it could be the same big that hits flash when you move or hide a containing element. It has been around since 2001, and I've talked with some Moz developers, and the fix isn't scheduled till gecko2/fx4. Assuming it's the same bug.

George Thompson
8 Apr 2009, 2:07 PM
Hi stever,

thanks for your response.

In Firefox 3.0.8 and Chrome a problem is only seen when dropping the Chart into the last column. Does this sound like the long lived bug you were talking about? I guess I could prevent the user from dropping into the last column so I could avoid the problem there.

In IE8 dragging and dropping the PIE or the Bar Chart anywhere causes the chart image to disappear but the labels which are html /css are still visible.

kiyoto01
8 Apr 2009, 10:32 PM
I confirm this problem. It seems a difficult problem about DOM management...:(
I have no good method about it.

The flot throws the following messages.


[Exception... "'Invalid dimensions for plot, width = 0, height = 0' when calling method: [nsIDOMEventListener::handleEvent]" nsresult: "0x8057001e (NS_ERROR_XPC_JS_THREW_STRING)" location: "<unknown>" data: no]
in constructCanvas() (jquery.flot.r148.patched.js:501)


canvasWidth = target.width();
canvasHeight = target.height();
target.html(""); // clear target
if (target.css("position") == 'static')
target.css("position", "relative"); // for positioning labels and overlay

if (canvasWidth <= 0 || canvasHeight <= 0)
throw "Invalid dimensions for plot, width = " + canvasWidth + ", height = " + canvasHeight;
'target' is the parent DOM node which contains flot canvas.

I think as the follows.
The last column including the canvas cannot determine width and height of itself.
Because the child canvas does not return the width and height of itself yet.
But the flot code expects to be given width and height of canvas from the parent node.
Therefore noone determine the width and height...:s

About this phenomenon occurs anywhere in IE8.
It seems buggy...>:)

Thanks

George Thompson
9 Apr 2009, 4:48 AM
Kiyoto,

thanks for your response. Too bad this bug is so deep in the browser itself!. Would it be possible to "redraw" a Extjs-Flot chart on a drop event and give it the canvas the dimensions that it had in the drag source? I created a small barchart using canvas and was able to make it work on drop by forcing a redraw.

kiyoto01
10 Apr 2009, 5:28 AM
Hi Thompson

I patched with Ext.ux.Flot for this problem.
Please download extflot-0.7a.zip here.

This is a small modification in onResize().

* Flot.js:801 (onResize())


try {
this.plot(this.getData());
} catch (e) {
if (typeof e == 'string') {
this.onResize.defer(200, this, [adjWidth, adjHeight, rawWidth, rawHeight]);
}
}
If the flot throws the exception of "Invalid dimensions for plot, ...",
Ext.ux.Flot retry onResize again after 200ms.
It checked just the exception type is string
because the flot calls 'throw' just in line 501.

I checked it in FF, IE8, Opera and Chrome.

Thanks

George Thompson
10 Apr 2009, 10:58 AM
Hi Thompson

I patched with Ext.ux.Flot for this problem.
Please download extflot-0.7a.zip here.

This is a small modification in onResize().

* Flot.js:801 (onResize())


try {
this.plot(this.getData());
} catch (e) {
if (typeof e == 'string') {
this.onResize.defer(200, this, [adjWidth, adjHeight, rawWidth, rawHeight]);
}
}
If the flot throws the exception of "Invalid dimensions for plot, ...",
Ext.ux.Flot retry onResize again after 200ms.
It checked just the exception type is string
because the flot calls 'throw' just in line 501.

I checked it in FF, IE8, Opera and Chrome.

Thanks
Hi Kiyoto,

I took a look at portal using extflot-0.7a and it looks very good in firefox (pc/mac), safari (mac) but in IE8 I still see some issues. I've posted the portal online where we can look at it and make sure everyone is looking at the same code.

http://js-sat.s3.amazonaws.com/ext/examples/portal/extflotportal.htm

here's what I've done to look at it:

piechart - 2008 1F U.S. Car Market Share

on load the pie chart is in the first column.

Move the pie chart to the 2nd column. The canvas elements disappear.
Move the pie chart to the 3rd column. The canvas elements reappear.
Move the pie chart in the 3rd Column. The canvas elements disappear.
Move the pie chart into the 2nd column. The canvas elements reappear.
Move the pie chart in the 2nd column. The canvas elements disappear.
Move the pie chart to the 1st column. The canvas elements do not reappear.
Move the pie chart to the 2nd column. The canvas elements do not reappear.
Move the pie chart to the 3rd column. The canvas elements reappear.


Bar Chart (Panel 3)

I saw similiar behavior with the BarChart.


Let me know if this feedback is helpful. If not I'll stop. Based on code I cobbled together
I put together a piechart and barchart with canvas. I saw the same sort of problems. I was able to make it work by redrawing the chart on the portal drop event. That worked for me but feels messy to have to recreate the chart.

ozilix
10 Apr 2009, 11:38 AM
hey man your flot extension is good but its only copy and paste i think.
here is the fully javascript flot library
http://myjui.com/latestbuild/mj/res/myjui/examples/

please let me know what you think.

kiyoto01
10 Apr 2009, 12:22 PM
Hi ozilix

Thank you for you recommendation!
I think what you say is truth.
Ext.ux.Flot is just wrapper of Flot.
And Flot is just one of implementation of graph plotting by canvas.

But MyJUI plotting is not flot.
Certainly, MyJUI plotting has same name properties with Flot.
However it is original implementation. It is not Flot.

So if you feel MyJUI is more superior than Flot,
you should take MyJUI plotting.

I think MyJUI is more superior than Flot and Ext.ux.Flot about the following points.

* Save the graph as PNG (it is really good)
* horizontal bar chart
* Pie chart with dynamic actions
* 3D graph of pie and bar
* Tree dialog support

And I recommend some of another libraries.
You may consider them with MyJUI and Flot...

* Protovis: http://vis.stanford.edu/protovis/
* Protochart: http://www.deensoft.com/lab/protochart (http://www.deensoft.com/lab/protochart/)

Thanks

kiyoto01
10 Apr 2009, 12:35 PM
Hi Thompson

Thank you for your feed back.



Move the pie chart to the 2nd column. The canvas elements disappear.
Move the pie chart to the 3rd column. The canvas elements reappear.
Move the pie chart in the 3rd Column. The canvas elements disappear.
Move the pie chart into the 2nd column. The canvas elements reappear.
Move the pie chart in the 2nd column. The canvas elements disappear.
Move the pie chart to the 1st column. The canvas elements do not reappear.
Move the pie chart to the 2nd column. The canvas elements do not reappear.
Move the pie chart to the 3rd column. The canvas elements reappear.


They are very helpful. I'm sorry my few testing...
I would like to consider to this problem for IE again.
Now I think that it is the problem about timing, isn't it?

Please wait for a moment.

Thanks

kiyoto01
30 Apr 2009, 3:56 AM
Hi Thompson

I'm sorry for my too late reply.
I could not make a mount of time for this project.

I confirmed your notice.
When the graph disappears in IE8, Ext.ux.Flot onResize() is not called.
So, to fix this bug in IE8, I think Ext.ux.Flot should support DD as you said.
I should write a set of code like widgets/PanelDD.js in ExtJS.
Please wait for more moment...

Thanks

George Thompson
30 Apr 2009, 4:26 AM
Kiyoto,

Thank you for your reply. I understand not having the time for the project. There are many things like work and family and friends that require attention.

kiyoto01
3 May 2009, 5:13 AM
Hi Thompson

Tonight, I updated Ext.ux.Flot to ver.0.7.
It includes the latest excanvas (excanvas.r60.js)

Please apply the latest excanvas to your portal sample.
The bug was fixed.

Thanks

moegal
3 May 2009, 8:12 AM
Is the bar chart problem fixed by chance?

Marty.

PS. Nice work on this BTW.

kiyoto01
3 May 2009, 8:25 AM
Hi


Is the bar chart problem fixed by chance?

Sorry, I quite forgot it!
I will schedule it for the next step.

moegal
3 May 2009, 4:20 PM
No problem, you are doing some very nice work here.

Marty

kiyoto01
3 May 2009, 11:49 PM
Hi Marty

Today, I modified and refactored Flot Pie Chart support.
The pie chart support contains a lot of code that is not for pie chart, but bar chart.
I removed the modification for bar chart.
And modify pies options.



pies: {
show: false,
radius: null, // or number by px
labelRadius: null, // or number by px
fill: true,
fillColor: null,
fillOpacity: 0.85,
fontStyle: "font-size: normal; font-weight: bold; color:#545454",
adjustPosition: true
},
I also updated the latest flot from r148 to r153.

Please check it.

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

If you say OK, I'll release it as Ext.ux.Flot ver 0.8.

Thanks

moegal
4 May 2009, 3:08 AM
I will look at it today, thanks!

Marty

moegal
4 May 2009, 5:38 AM
Kiyoto,

I checked out the sample and it looks really good. 2 things I noticed but are not very important, at least to me.

1. In IE the pie does not like values below 1. The whole pie shows as 1 color with no slices where a series has a value below 1.

2. The tootltips can really stack up in the bar examples. When you mouse over a bar, and then out and then over the old tooltip should be removed and the new one should appear.

Both of these are very small issues. I would say post the code you have now that the bar works the way it should, then just add the issues to the bug list for later.

Thanks, Marty

kiyoto01
4 May 2009, 7:41 AM
Hi Marty

I fixed Flot.js and jquery.flot.r153.pie.js about your detections.

* Show just 1 tooltip at once.
* Fix the bug that the value below 1 in IE.

I had updated the trunk.

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

Thanks

zhw511006
4 May 2009, 3:51 PM
Thank You !
It's useful for me !

kiyoto01
5 May 2009, 2:56 AM
Tonight, I uploaded extflot-0.8a.zip.

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

It's a alpha release.
The code is fixed, but it does not contains document update, etc...

I'll release it as official, when I go to my office in the next week.


So I attached the pies options here.



pies: {
show: false,
radius: null, // or number by px
labelRadius: null, // or number by px
startAngle: 0,
fill: true,
fillColor: null,
// null or fn or 'value', 'percent', 'label', 'full'
// fn: (label, value, percent, textValue, pie, serie, options) -> html
labelFormatter: null,
labelStyle: 'font-size: normal; font-weight: bold; color:#545454;',
bias: [0.3, -1.4, 0.1], // [init, step, threshold]
}
"radius" is the radius of pie.
If you specify it by number, it passed as the pie radius.
If you specify it by null or nothing, the flot determines it by plot area.
If legend is shown, radius become smaller.

"labelRadius" is the radius or label area.
If you specify it by number, it passed as the label radius.
If you specify it by null or nothing, the flot determines it by pie radius.

"labelFormatter" is formatter of each series label.
If you specify it by function, like the followings:


labelFormatter: function(label, value, percent, textValue, pie, serie, options) {
return textValue + '%<br><span style="font-size: 75%">' + label + '<br>(' + value + ')</span>';
}
* label: the label of the serie
* value: the raw value of the serie
* percent: the raw percent value
* textValue: the percent to show. you should add '%' after it.
* pie: the pie informations to show. it contains the following members.


radius labelRadius sumSeries anchorX anchorY labelX labelY startAngle endAngle sliceMiddle
* serie: the serie to show in this pie
* options: flot options which is parsed

"labelStyle" is the style of label div. You can specify it in .pieLabel class.

"bias" is the option to ajust position of small pie.
You specify it as Array.
* 0: initial value of bias
* 1: the bias for the next bias
* 2: threshold to apply bias. if the percent is smaller than it, the pecent will
be biased.
If you specify null, bias is disabled.


Thanks

kiyoto01
10 May 2009, 10:57 PM
Hi all

I released Ext.ux.Flot ver 0.8 as official.

* Support Pie chart
* Update extflot-doc (add Ext.util.Observable Ext.Component Ext.BoxComponent Ext.Element)
* Modify just 1 tooltip is shown

Download from here.
http://code.google.com/p/extflot/

Thanks

moegal
11 May 2009, 8:46 AM
The latest pie example does not seem to work in IE7.

I am getting:

line: 2203, char: 7, Error: Object doesn't suport this property or method

Thanks,
Marty

kiyoto01
11 May 2009, 10:11 AM
Hi Marty

I'm sorry to bother you.
I have not checked Ext.ux.Flot in IE7 before release. :(
Please wait for some days, because I have to leave my business and my PC tomorrow...

Thanks

moegal
11 May 2009, 10:57 AM
Kiyoto,

You do amazing work! Just when you get a chance.

Thanks, Marty

scottpenrose
11 May 2009, 2:49 PM
Thanks for the work on flot.

I have implemented a altitude graph (line chart) using Flot, and working on integrating it with a OpenLayers map - all very nice.

Does anyone know if the new Flot code has been tested with 3.0?

Scott

kiyoto01
11 May 2009, 3:55 PM
Hi Scott

I do not test Ext.ux.Flot in 3.0.
It is the next step for me.

* Support 3.0
* Bind Ext.data.Store with Ext.ux.Flot

And if you test it, please notice the result to me.

Thanks

kiyoto01
14 May 2009, 6:49 AM
Hi Marty

I checked the latest Ext.ux.Flot in IE7.
I found several problems in IE7...

1. IE7 cannot parse flot comments for extdoc from original flot API documentation in Flot.js ver 0.8.
2. latest excanvas or original flot cannot work correctly in IE7.

About no.1, I created Flot.pack.js that is compressed code by yuicompressor.
I updated just the trunk.
Please use it usually.

About no.2, I could not confirm the cause of this.
IE7's too simple error reporting prevents to let me know it.
I can't stand it...8-|


Thanks

moegal
14 May 2009, 6:01 PM
I tried your previous release and it worked fine in IE7.

Is there anything I can do to help?

Marty

kiyoto01
18 May 2009, 7:50 AM
Thanks to your kindness, marty.

But I had updated some source files when the Ext.ux.Flot updated from 0.7 to 0.8.

* flot r148 -> r153 (+ pie chart support)
* excanvas r60
* Ext.ux.Flot

I did not check in IE7, and I have no idea about IE7 local rule.
So, I have to check the above files piece by pieace,
and learn the coding rule for IE7...


Thanks

moegal
18 May 2009, 10:46 AM
Thanks for keeping me updated.

Marty

loginfabio
19 May 2009, 1:48 AM
Hi,
I'm sorry to bother you. I'm trying BarFlot to get a BarGraph from a query to a DB.
I post some code



var getSeries1=function(vEl){
Ext.Ajax.request({
url: 'test.php',params:{op:vEl.id},
success:function(resp){
if(resp.responseText=="ERROR") {
alert("ERROR option not found!");
}
/*
vEl.series=[
{name:'mods',label:'Number of mods of last 15 calls'},
{name:'stats',label:'Number of changes of last 15 calls'}
];
*/
vEl.data=Ext.util.JSON.decode(resp.responseText);
vEl.setupGrid();
console.log(vEl);
vEl.draw();
},
failure:function(){alert("SYSTEM Error");}
});
};
var grpTest1=new Ext.ux.BarFlot({
id:'tp2',title:'Bars',
cls:'x-panel-body',crosshair:{mode:"y"},
/*
xaxis:{tickSize:1},
yaxis:{tickSize:5,tickDecimals:2},
*/
series:[
{name:'mods',label:'Number of mods of last 15 calls'},
{name:'stats',label:'Number of changes of last 15 calls'}
],
data:[],
listeners:{'show':getSeries1}
});


Here the JSON from the server



[{"name":5297,"mods":6,"stats":7},
{"name":5296,"mods":0,"stats":1},{"name":5295,"mods":0,"stats":1},{"name":5294,"mods":6,"stats":1},{"name":5293,"mods":3,"stats":3},{"name":5292,"mods":26,"stats":15},{"name":5291,"mods":5,"stats":3}{"name":5290,"mods":2,"stats":3},{"name":5289,"mods":4,"stats":4},{"name":5288,"mods":3,"stats":3},{"name":5287,"mods":3,"stats":3}{"name":5286,"mods":4,"stats":3},{"name":5285,"mods":2,"stats":3}{"name":5284,"mods":2,"stats":3},{"name":5283,"mods":2,"stats":3}]


then I put grpTest1 in a window
If I use Ext.ux.Flot, it works.
By console.log, I found the series and the data are correctly loaded.
Where I do a mistake?
Thanks in advance

kiyoto01
19 May 2009, 11:01 AM
Hi loginfabio

I think that you should use plot() and setupData() or getData() and setData() instead of setupGrid() and draw();



var data = Ext.util.JSON.decode(resp.responseText);
vEl.plot(this.setupData(data));
or



var data = Ext.util.JSON.decode(resp.responseText);
var series = vEl.getData();
//something to do
vEl.setData(series);
Ext.ux.Flot.data is just temporary data to pass jquery.flot instance.
The series which is really plotted in the canvas is the private property of jquery.flot.
So Ext.ux.Flot accesses and manages it via getData() and setData() or plot() methods.

Therefore Ext.ux.Flot.data is called as Ext JS configuration parameter.
It is valid when the Ext.ux.Flot instance is created.

setupData() is the utility method to create the series for jquery.flot from data as which you get Ajax.request.

setupGrid() is the method to initialize the grid and the axes on the canvas.
draw() is the method to plot the series which the jquery.flot instance currently holds.
plot() is the method to re-create a jquery.flot instance with canvas after clear the current instance.

Thanks.

loginfabio
20 May 2009, 1:22 AM
Hi kiyoto01,

thanks for your reply, I've tried your solution several times but in my code it doesn't work.
Testing the format of request JSON, I've noticed that this code works:


var getSeries1=function(vEl){
Ext.Ajax.request({
url:'test.php',params:{op:vEl.id},
success:function(resp){
if(resp.responseText=="ERROR") {
alert("ERROR values not found!");
return false;
}
for(i=0;i<vEl.series.length;i++)
vEl.series[i].data=[];
newData=Ext.util.JSON.decode(resp.responseText);
newSeries=vEl.series;
newBarSer=vEl.setupData(newData,newSeries);
console.log(vEl.getAxes());
vEl.plot(newBarSer);
console.log(vEl.getAxes());
},
failure:function(){em.alert("SYSTEM ERROR");}
});
};

var sJson='[{"name":5297,"mods":0,"stats":0},{"name":5296,"mods":0,"stats":0},{"name":5295,"mods":0,"stats":0},{"name":5294,"mods":0,"stats":0},{"name":5293,"mods":0,"stats":0},{"name":5292,"mods":0,"stats":0},{"name":5291,"mods":0,"stats":0},{"name":5290,"mods":0,"stats":0},{"name":5289,"mods":0,"stats":0},{"name":5288,"mods":0,"stats":0},{"name":5287,"mods":0,"stats":0},{"name":5286,"mods":0,"stats":0},{"name":5285,"mods":0,"stats":0},{"name":5284,"mods":0,"stats":0},{"name":5283,"mods":0,"stats":0}]';

var grpTest1=new Ext.ux.BarFlot({
id:'tp2',title:'Bars',
cls:'x-panel-body',crosshair:{mode:"y"},
yaxis:{tickSize:5,tickDecimals:0},
series:[
{name:'mods',label:'Number of mods of last 15 calls', color:'#FF0000', dataIndex:0},
{name:'stats',label:'Number of changes of last 15 calls', color:'#0000FF', dataIndex:1}
],
//data:[],
data:Ext.util.JSON.decode(sJson),
listeners:{'show':getSeries1}
});

Reading firebug logs I found that in case of 'data:[]' the property ticks of xaxes was empty and the graph wasn't plotted, when I've "initializate" the data, I got the graph.
I think that when I call


vEl.plot(newBarSer);

the property ticks of xaxes is not recalculated.
I'm studying your files to find a way to calculate these valuses, is there a method to recalculate xaxes.ticks?
Sorry for bothering you, the fact is that I've really appreciate your work, and I'd like to use it on my application.

Thanks
loginfabio

kiyoto01
20 May 2009, 11:22 AM
Hi loginfabio

I tested your code. And I undorstood the issue.
You should define the width and height of the Ext.ux.Component.

See the following codes.



var grpTest1=new Ext.ux.BarFlot({
id:'tp2',title:'Bars',
applyTo: 'placeholder',
width: 500, height: 500,
cls:'x-panel-body',crosshair:{mode:"y"},
yaxis:{tickSize:5,tickDecimals:0},
series:[
{name:'mods',label:'Number of mods of last 15 calls', color:'#FF0000', dataIndex:0},
{name:'stats',label:'Number of changes of last 15 calls', color:'#0000FF', dataIndex:1}
],
//data:[],
data:Ext.util.JSON.decode(sJson),
listeners:{'show':getSeries1}
});
jquery.flot create the canvas and some objects on the canvas, like grids, ticks, graphs, etc, based on the DOM node size.
If you don't specify the size, jquery.flot cannot determine the size of canvas, pitch of axis, real plotting pixcels, etc...

Please see

http://extflot.googlecode.com/svn/trunk/loginfabio.html
http://extflot.googlecode.com/svn/trunk/loginfabio.js

Thanks

loginfabio
21 May 2009, 3:52 AM
hi kiyoto,

I set width and height but it still doesn't work, so I found this workaround.



var getSeries1=function(vEl){
Ext.Ajax.request({
url:'test.php',params:{op:vEl.id},
success:function(resp){
if(resp.responseText=="ERROR"){
alert("ERROR");
return false;
}
aRes=Ext.util.JSON.decode(resp.responseText);
var barTest=new Ext.ux.BarFlot({
id:'tpb2',title:'Bars',
cls:'x-panel-body',crosshair:{mode:"y"},
yaxis:{tickSize:1,tickDecimals:0},
series:aRes.series,
data:aRes.data
});
vEl.items.remove(vEl.items[0]);
vEl.items.add(barTest);
vEl.render();
vEl.doLayout();
},
failure:function(){alert("ERROR");}
});
return true;
};

var grpTest1=new Ext.Panel({
id:'tp2',title:'Bars',style:'margin:0px 0px 0px 0px',
items:[{}],
listeners:{'show':getSeries1}
});


My php file return this JSON:



{"series":[{"name":"mods","label":"Changes to TK","color":"#FF0000","dataIndex":0},{"name":"stats","label":"State of TK","color":"#0000FF","dataIndex":1}],
"data":[{"name":5101,"mods":2,"stats":3},{"name":5102,"mods":2,"stats":4},{"name":5103,"mods":2,"stats":4},{"name":5104,"mods":2,"stats":3},{"name":5105,"mods":2,"stats":3},{"name":5106,"mods":2,"stats":4},{"name":5107,"mods":2,"stats":3},{"name":5108,"mods":3,"stats":4},{"name":5109,"mods":2,"stats":3},{"name":5110,"mods":2,"stats":3},{"name":5111,"mods":3,"stats":3},{"name":5112,"mods":2,"stats":3},
{"name":5113,"mods":2,"stats":3},{"name":5114,"mods":2,"stats":3},{"name":5115,"mods":2,"stats":3},{"name":5116,"mods":4,"stats":3},{"name":5117,"mods":4,"stats":4},{"name":5118,"mods":2,"stats":3},{"name":5119,"mods":3,"stats":3},{"name":5120,"mods":2,"stats":3}]}


It's not so fine, but works.

Thanks a lot for give me attention

Fabio

kiyoto01
21 May 2009, 10:09 AM
Hi Fabio

I feel it is not nice, too.:(
So I'd like to try to fix your issue togather, the fix for IE7 in this weekend.
Please wait for some days...

Thanks

enpasos
22 May 2009, 10:19 PM
The examples look very promissing. The functionality is of great importance to different groups reaching from financial institutions to scientific researchers.

I like the approach - pure javascript and use of powerful existing libraries.
I highly appreciate this work!

Is there an official Ext-Team statement how they see the approach compared to Ext.Chart? Is there perhaps an integration approach into the Ext main stream? Roadmap? My attitude behind these questions is not of technical nature but concerns stability (cross browser support, bug free, ...) and long term reliability.

kiyoto01
23 May 2009, 11:05 AM
Hi fabio

I fixed BarFlot for your dynamic refreshing.
It needed some modification.
So, I add updateData() method into BarFlot.



Ext.Ajax.request({
success:function(resp){
if(resp.responseText=="ERROR") {
alert("ERROR values not found!");
return false;
}
var newData = Ext.util.JSON.decode(resp.responseText);
vEl.updateData(newData);
},
failure:function(){em.alert("SYSTEM ERROR");}
});
Please use the attached BarFlot.js. (or extflot-0.9a.zip in http://code.google.com/p/extflot/)
And see example http://extflot.googlecode.com/svn/trunk/loginfabio.html.

Thanks

kiyoto01
23 May 2009, 11:10 AM
Hi Marty

I fixed the issue that pie chart support does not work in IE7.
It was a last comma mistype in jquery.flot.r153.pie.js...
I'm sorry to bother you.

Please use the attached jquery.flot.trunk.pie.js (or extflot-0.9a.zip in http://code.google.com/p/extflot/).

Thanks.

moegal
23 May 2009, 11:38 AM
Kiyoto,

Thanks! I will look at it tomorrow. You are amazing!

Marty

kiyoto01
23 May 2009, 11:56 AM
Hi enpasos

Thank you your respect.
But I don't know Ext-Team's comment.
I wrote Ext.ux.Flot before I had known ver.3.0 contains the chart support.

If the Ext main team implements pure javascript chart support, I will hand over Ext.ux.Flot to them.

I think that I'll maintain Ext.ux.Flot as long as possible.
And I'll support ver.3.0 as the next step.

But currently, Ext.ux.Flot is just my personal project.
Therefore it has the low limit.
I welcome if you say that you maintain Ext.ux.Flot.:D

I think, if Ext Team support a pure javascript chart as official, they works as follows.

* canvas support (includes excanvas.js)
* plotting function support (now flot supports)
* license matter (flot and excanvas if they are used)

It will take a lot of cost.

Thanks

enpasos
23 May 2009, 9:35 PM
Kiyoto,

thank you for your answer!

To get an Ext team answer concerning their roadmap I opened the feature request Flot/Excanvas Support (http://extjs.com/forum/showthread.php?p=333604#post333604).

kiyoto01
24 May 2009, 1:59 AM
Hi all

I checked that Ext.ux.Flot works on Ext JS 3.0.

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

Now, I started to read the source code of 3.0 chart support.

Thanks

kiyoto01
25 May 2009, 11:16 AM
Hi all

I released Ext.ux.Flot ver.0.9.

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


Support Ext JS 3.0 rc1.1
Add demo for Ext JS 3.0 (latest_ext3.html)
Update latest jquery.flot.js r153 (http://code.google.com/p/extflot/source/detail?r=153) to r156 (http://code.google.com/p/extflot/source/detail?r=156)
rename latest flot to jquery.flot.r153 (http://code.google.com/p/extflot/source/detail?r=153).js to jquery.flot.trunk.js (jquery.flot.trunk.pie.js)
Fix pie chart support in IE7 (jquery.flot.trunk.pie.js)
Use tickFormatter in tooltip text formatting
Add updateData() method into BarFlot? (http://code.google.com/p/extflot/w/edit/BarFlot) for dynamic refreshing.
Strip GetText? (http://code.google.com/p/extflot/w/edit/GetText).js and Flot.ja.js

In the next version, ver.0.10, bindStore() method will be added to sync Ext.data.Store like Ext.chart.

moegal
26 May 2009, 1:52 PM
Pie now looks great in IE7 and FF2+! Thanks Kiyoto!

Does anyone have a horizontal bar example?

Thanks, Marty

kiyoto01
26 May 2009, 10:13 PM
Hi Marty

I have tested horizontal bar in past.
flot 0.5 did not support it, But latest flot supported it.

I didn't test it in the latest flot, but you maybe can try it.



bars: {
barWidth: number
align: "left" or "center"
horizontal: boolean
}


For bars, fillColor can be a gradient, see the gradient documentation below. "barWidth" is the width of the bars in units of the x axis, contrary to most other measures that are specified in pixels. For instance, for time series the unit is milliseconds so 24 * 60 * 60 * 1000 produces bars with the width of a day. "align" specifies whether a bar should be left-aligned (default) or centered on top of the value it represents. When "horizontal" is on, the bars are drawn horizontally, i.e. from the y axis instead of the x axis; note that the bar end points are still defined in the same way so you'll probably want to swap the coordinates if you've been plotting vertical bars first.
Please notice the result to me.

Thanks

moegal
27 May 2009, 4:33 AM
Kiyoto,

Thanks. Took some changes but it works for the most part.

I took the latest.html and added the new types of pie and horizontal bar to:

http://www.moegal.com/extflot-0.9/latest.html

(also, moved the toolbars for Tuning Series, Selection, Time, and Interacting to the top.)

Seems like the top bar will not show since the bar appears above the line. So I had to add a dummy bar so the last bar would show. I also had to reverse the x and y axis as well as the order of the data in the xaxis.

Just FYI for others trying to make it work.



{
title: 'Horizontal Bar',
id: 'bar-h',
items: [{
xtype: 'flot',
bars: {show: true, align: 'left', barWidth: 0.5, horizontal: true },
yaxis: {
ticks: [
[0, 'IE 6'],
[1, 'IE 7'],
[2, 'IE 8'],
[3, 'FF 2'],
[4, 'FF 3'],
[5, 'Safari'],
[6, 'Chrome'],
[7, 'Opera'],
[8, 'Other Browsers'],
[9, '']
]
},
xaxis: { max: 50 },
series: [
{ data: [[20.46, 0]]},
{ data: [[46.77, 1]]},
{ data: [[0.82, 2]]},
{ data: [[3.77, 3]]},
{ data: [[17.18, 4]]},
{ data: [[7.93, 5]]},
{ data: [[1.04, 6]]},
{ data: [[0.71, 7]]},
{ data: [[0.0, 8]]},
{ data: [[0.0, 9]]}
]
}]
}


Ideally, if horizontal: true is selected, then flot should switch the axis and the order of the data and maybe center the bar on the tick mark and not above the line. Very low priority, if at all. That may be a problem if you are using a store like in future versions is why I am mentioning it. I am not currently using the horizontal bar, just setting up an example for a client at the moment.

Thanks again! Really nice work.

Marty

loginfabio
27 May 2009, 5:23 AM
Hi Kiyoto,

i finally managed to read your post and reopen that project.
I downloaded your file, replaced the previous and modified
my source code:
it works and, obviously, now it's faster than my solution.:D

Thanks a lot.

Fabio

Boccara Jonathan
27 May 2009, 5:53 AM
Hello Kiyoto !!
I want to know if a Flot can be use with a XML data source using a Ext.data.Store with a Ext.data.XMLReader ?
If it's possible, do you have an example to use it ?

Your project is a very good idea.

Best regards

kiyoto01
27 May 2009, 10:51 AM
Hi Marty

I got your modification of flotdemo.js and apply to mine.
And create horizontal bar demo (horizontal.{html|js})
Thank you very much!

* Bar appears above the line.
Please use bars.align = 'center', and adjust barWidth.

* Max of yaxis
It is the issue of original flot.
It fails to caluculate the displaying area correctly.
So I set 9 to yaxis.max in demo, instead of putting a dummy serie.

* Switch x and y in each data when bar.horizontal is specified
I think that your idea is good, too.
In future version, I'll add 'exchangeXY' option for this function.

http://extflot.googlecode.com/svn/trunk/latest.html
http://extflot.googlecode.com/svn/trunk/horizontal.html



items: [{
xtype: 'flot',
cls: 'x-panel-body',
bars: {show: true, align: 'center', barWidth: 1.0, horizontal: true },
legend: {show: true},
tooltip: function(o) {
var axes = this.getAxes();
for (var i = 0; i < axes.yaxis.ticks.length; i++) {
var tick = axes.yaxis.ticks[i];
if (tick.v == o.datapointY) {
return String.format("{0} : {1}%", tick.label, o.datapointY);
}
}
return "";
},
yaxis: {
max: 9,
ticks: [
[0, 'IE 6'],
[1, 'IE 7'],
[2, 'IE 8'],
[3, 'FF 2'],
[4, 'FF 3'],
[5, 'Safari'],
[6, 'Chrome'],
[7, 'Opera'],
[8, 'Other Browsers']
]
},
xaxis: { max: 50 },
series: [
{ data: [[20.46, 0]]},
{ data: [[46.77, 1]]},
{ data: [[0.82, 2]]},
{ data: [[3.77, 3]]},
{ data: [[17.18, 4]]},
{ data: [[7.93, 5]]},
{ data: [[1.04, 6]]},
{ data: [[0.71, 7]]},
{ data: [[0.0, 8]]}
]
}]
Thanks

kiyoto01
27 May 2009, 11:11 AM
Hi Boccara Jonathan

Thanks to your reference.
Binding with Ext.data.Store and Ext.ux.Flot is planned as the next step.
So, currently, it cannot implement smoothly.

Ext.ux.Flot has createSeries() method to convert data of Ext.data.Store to one of flot,
like the following sample.



store.on('load', function(store, records, options) {
var series = this.createSeries(store, 'x');
series = this.setupData(series, this.getData());
this.plot(series);
}, flot);
But createSeries() method will be modified for binding with Ext.data.Store in early future.
Please remember it if you use createSeries.

Thanks

moegal
27 May 2009, 3:13 PM
Kiyoto,

Thanks, very nice.

You could change the tooltip to display the o.datapointX instead of o.datapointY to get the effect you are looking for.



tooltip: function(o) {
var axes = this.getAxes();
for (var i = 0; i < axes.yaxis.ticks.length; i++) {
var tick = axes.yaxis.ticks[i];
if (tick.v == o.datapointY) {
return String.format("{0} : {1}%", tick.label, o.datapointX);
}
}
return "";
},


Also in flotdemo.js you will want to remove the coma after the pie in the menu grid store so it will work in IE



data: [
//['pie'],
['basic'],
['graph-types'],
['setting-options'],
['turning-series'],
['selection'],
['zooming'],
['time'],
['visitors'],
['dual-axis-support'],
['interacting'],
['bar-figure-counts'],
['bar-element-counts'],
['bar-horizontal'],
['csv'],
['pie'], //remove this coma
]


Again, really nice work.

Thanks!
Marty

kiyoto01
27 May 2009, 9:56 PM
Hi Marty

Thanks to your detections!
I fixed them.

http://extflot.googlecode.com/svn/trunk/latest.html
http://extflot.googlecode.com/svn/trunk/horizontal.html

Thanks

moegal
28 May 2009, 12:30 AM
No problem, let me know what I can do to help.

Marty

Boccara Jonathan
28 May 2009, 4:30 AM
Hi Boccara Jonathan

Thanks to your reference.
Binding with Ext.data.Store and Ext.ux.Flot is planned as the next step.
So, currently, it cannot implement smoothly.

Ext.ux.Flot has createSeries() method to convert data of Ext.data.Store to one of flot,
like the following sample.



store.on('load', function(store, records, options) {
var series = this.createSeries(store, 'x');
series = this.setupData(series, this.getData());
this.plot(series);
}, flot);
But createSeries() method will be modified for binding with Ext.data.Store in early future.
Please remember it if you use createSeries.

Thanks

Hello kiyoto !!
Thank you for your response.

I try do this with the tips that you give me

function myFlot(){

var reader=new Ext.data.XmlReader({
record: 'Debit'

}, ['enCours','archive','dateDebit','depose']);

var store = new Ext.data.Store({
// load using HTTP
proxy: new Ext.data.HttpProxy({
url: "adressToFile.xml"
}),

reader: reader
});

var flot = new Ext.ux.Flot(
{
id: 'flot-time',
xtype: 'flot',

yaxis:{
min:0,
max:50
}




})
store.on('load', function(store, records, options) {

var series = flot.createSeries(store, 'dateDebit');
series = flot.setupData(series, flot.getData());
flot.plot(series);

},flot);




store.load();


var myPanel=new Ext.Panel({
title: 'Time',
id: 'time',
renderTo:'main',
height:800,
items: flot



});




}
An example of the xml file is :

<Debits>
<Debit>
<id>23607</id>
<dateDebit class="sql-timestamp">2009-04-28 14:17:37.851</dateDebit>
<coffreId>2</coffreId>
<depose>36</depose>
<enCours>32</enCours>
<archive>42</archive>
</Debit>
<Debit>
<id>62082</id>
<dateDebit class="sql-timestamp">2009-05-07 14:04:00.538</dateDebit>
<coffreId>2</coffreId>
<depose>45</depose>
<enCours>39</enCours>
<archive>11</archive>
</Debit>
<Debit>
<id>93</id>
<dateDebit class="sql-timestamp">2009-04-20 12:14:42.691</dateDebit>
<coffreId>2</coffreId>
<depose>10</depose>
<enCours>44</enCours>
<archive>45</archive>
</Debit>
<Debit>
<id>47137</id>
<dateDebit class="sql-timestamp">2009-05-06 11:30:31.299</dateDebit>
<coffreId>2</coffreId>
<depose>46</depose>
<enCours>45</enCours>
<archive>11</archive>
</Debit>
<Debit>
<id>77026</id>
<dateDebit class="sql-timestamp">2009-05-22 09:06:18.334</dateDebit>
<coffreId>2</coffreId>
<depose>5</depose>
<enCours>1</enCours>
<archive>7</archive>
</Debit>
<Debit>
<id>54611</id>
<dateDebit class="sql-timestamp">2009-05-06 15:01:33.194</dateDebit>
<coffreId>2</coffreId>
<depose>34</depose>
<enCours>49</enCours>
<archive>22</archive>
</Debit>
<Debit>
<id>69555</id>
<dateDebit class="sql-timestamp">2009-05-11 10:14:06.47</dateDebit>
<coffreId>2</coffreId>
<depose>39</depose>
<enCours>48</enCours>
<archive>44</archive>
</Debit>
<Debit>
<id>23606</id>
<dateDebit class="sql-timestamp">2009-04-28 14:17:37.715</dateDebit>
<coffreId>2</coffreId>
<depose>21</depose>
<enCours>46</enCours>
<archive>20</archive>
</Debit>
<Debit>
<id>39526</id>
<dateDebit class="sql-timestamp">2009-04-29 14:51:30.392</dateDebit>
<coffreId>2</coffreId>
<depose>26</depose>
<enCours>12</enCours>
<archive>44</archive>
</Debit>
</Debits>The line
series = flot.setupData(series, flot.getData()); doesn't seem work, perhaps because the function "setupData" doesn't exist un the Flot Object.

When I suppress this line, nothing appears in the Flot, perhaps I have a difficulty to configure my flot. Can you help me to configure it ?

The line
var series = flot.createSeries(store, 'dateDebit'); create the series with the good form.

Thank you for your help !!

Boccara Jonathan
28 May 2009, 4:37 AM
Sorry kiyoto !!
I have forgotten that xaxis will be the field "dateDebit".
Thank you very much

kiyoto01
28 May 2009, 2:20 PM
Hi Boccara

I'm sorry to bother you about createSeries.
I forgot that the setupSeries methos is for subclass of Ext.ux.Flot, like BarFlot, CsvFlot.
So, what you do is correct.

I think the flot series specifications is difficult, you'd like to learn it.
It is array base, but Ext.data.Store is based on object, like XML, Json...
However flot series specification is reasonable to plot charts.
It is true minimarizm.

Thanks

Boccara Jonathan
3 Jun 2009, 12:03 AM
Hi Boccara

I'm sorry to bother you about createSeries.
I forgot that the setupSeries methos is for subclass of Ext.ux.Flot, like BarFlot, CsvFlot.
So, what you do is correct.

I think the flot series specifications is difficult, you'd like to learn it.
It is array base, but Ext.data.Store is based on object, like XML, Json...
However flot series specification is reasonable to plot charts.
It is true minimarizm.

Thanks

Hello kiyoto.

Thank you for your help !!
I think I have understood the flot series specifications.
But I have this error :

uncaught exception: Invalid dimensions for plot, width = null, height = nullYet, I sprecified this field in the flot configuration :

var flot = new Ext.ux.Flot(
{
id: 'flot-time',
xtype: 'flot',
xaxis: {
mode: "time",
timeformat: "%y-%m-%d %H:%M:%S"
},
yaxis:{
min:0,
max:50,
ticks:5
},
width:800,
height:700 })

kiyoto01
3 Jun 2009, 10:47 AM
Hi Boccara Jonathan

It's an exception of flot.

* jquery.flot.trunk.js:478 (constructCanvas())


canvasWidth = target.width();
canvasHeight = target.height();
target.html(""); // clear target
if (target.css("position") == 'static')
target.css("position", "relative"); // for positioning labels and overlay

if (canvasWidth <= 0 || canvasHeight <= 0)
throw "Invalid dimensions for plot, width = " + canvasWidth + ", height = " + canvasHeight;
I think that you did not specify a real DOM target like what is specified by applyTo or renderTo.
Flot cannot exist in floating.

'target' is the parent DOM node on which canvas is constructed.
Please create the Ext.ux.Flot in real DOM node or new Panel or Window.

Thanks

Boccara Jonathan
8 Jun 2009, 4:15 AM
Thank You for your help

zyzy
8 Jun 2009, 5:38 AM
It is also possible that you put your flot into a panel which has a "card layout". If you do so, you have to use the hideMode "offsets", if I remember well.

mathiev
8 Jun 2009, 7:15 AM
Can someone show me a simple fix for this?
like how to create Ext.ux.Flot object in panel or DOM?
Thanks
-Mathiev

kiyoto01
8 Jun 2009, 8:49 AM
Hi mathiev

I think that your detection is similar with #84
http://extjs.com/forum/showthread.php?p=337711#post337711

Ext.ux.Flot requires a parent real DOM node.

And I wrote a tutorial.
Is that not enough?

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

Thanks

jroca
8 Jun 2009, 9:42 AM
Hi Kiyoto, i am using your amazing library but i have some problems i read the tutorial but did not explain how to set data from xml, json in a xml test the server response is

<Debits>
<Debit>
<id>23607</id>
<dateDebit class="sql-timestamp">2009-04-28 14:17:37.851</dateDebit>
<coffreId>2</coffreId>
<depose>36</depose>
<enCours>32</enCours>
<archive>42</archive>
</Debit>
<Debit>
<id>62082</id>
<dateDebit class="sql-timestamp">2009-05-07 14:04:00.538</dateDebit>
<coffreId>2</coffreId>
<depose>45</depose>
<enCours>39</enCours>
<archive>11</archive>
</Debit>
<Debit>
<id>93</id>
<dateDebit class="sql-timestamp">2009-04-20 12:14:42.691</dateDebit>
<coffreId>2</coffreId>
<depose>10</depose>
<enCours>44</enCours>
<archive>45</archive>
</Debit>
<Debit>
<id>47137</id>
<dateDebit class="sql-timestamp">2009-05-06 11:30:31.299</dateDebit>
<coffreId>2</coffreId>
<depose>46</depose>
<enCours>45</enCours>
<archive>11</archive>
</Debit>
<Debit>
<id>77026</id>
<dateDebit class="sql-timestamp">2009-05-22 09:06:18.334</dateDebit>
<coffreId>2</coffreId>
<depose>5</depose>
<enCours>1</enCours>
<archive>7</archive>
</Debit>
<Debit>
<id>54611</id>
<dateDebit class="sql-timestamp">2009-05-06 15:01:33.194</dateDebit>
<coffreId>2</coffreId>
<depose>34</depose>
<enCours>49</enCours>
<archive>22</archive>
</Debit>
<Debit>
<id>69555</id>
<dateDebit class="sql-timestamp">2009-05-11 10:14:06.47</dateDebit>
<coffreId>2</coffreId>
<depose>39</depose>
<enCours>48</enCours>
<archive>44</archive>
</Debit>
<Debit>
<id>23606</id>
<dateDebit class="sql-timestamp">2009-04-28 14:17:37.715</dateDebit>
<coffreId>2</coffreId>
<depose>21</depose>
<enCours>46</enCours>
<archive>20</archive>
</Debit>
<Debit>
<id>39526</id>
<dateDebit class="sql-timestamp">2009-04-29 14:51:30.392</dateDebit>
<coffreId>2</coffreId>
<depose>26</depose>
<enCours>12</enCours>
<archive>44</archive>
</Debit>
</Debits> my problem is that only the series are displayed not the data: how do i set this? how can i set dataindex1 as x or sometnig like that
var series = this.createSeries(store, 'archive');

kiyoto01
8 Jun 2009, 9:43 AM
Hi mathiev and zyzy

Mathiev, do you use Ext.ux.Flot in Card Layout?
If you do so, you have to set 'hideMode' of Ext.ux.Flot instance to 'offsets', as zyzy says.

I create a card layout sample.

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

zyzy, Thanks to your nice advice.

Thanks.

kiyoto01
8 Jun 2009, 11:22 AM
Hi jroca

I created a sample to read data from XML.

http://extflot.googlecode.com/svn/trunk/debits.html
http://extflot.googlecode.com/svn/trunk/debits.js
http://extflot.googlecode.com/svn/trunk/debits.xml

It contains both case of Flot (line chart) and BarFlot (bar chart).

In line chart, you should use createSeries() and plot method.



store.on('load', function(store, records, options) {
var flot = this.findByType('flot')[0];
var series = flot.createSeries(store, 'id');
flot.plot(series);
}, flot_win);
In bar chart, you should use updateData().



store.on('load', function(store, records, options) {
var flot = this.findByType('barflot')[0];
var data = [];
for (var i = 0; i < records.length; i++) {
data.push(Ext.apply({
name: records[i].data.id,
}, records[i].data));
}
flot.updateData(data);
}, barflot_win);
Thanks.

jroca
8 Jun 2009, 12:07 PM
thanks a lot, i have a bug on jquery.flot.trunk.pie.js line 831
formatter = function (v, axis) {
return v.toFixed(axis.tickDecimals);
}; something with the ticks now i get data from JSON store the plot works okay but when i put the mouse over the chart i get taht error i try with ticks: [0] but did not work here my code
Ext.onReady(function() {


/*
var reader=new Ext.data.XmlReader({
record: 'Debit'

}, ['id','enCours','archive','depose']);

var store = new Ext.data.Store({
// load using HTTP
proxy: new Ext.data.HttpProxy({
url: "adressToFile.xml"
}),

reader: reader
});

*/

var reader = new Ext.data.JsonReader({
root: 'results'
},[
{name: 'id', type: 'int', mapping: 'id'},
{name: 'Number', type: 'int', mapping: 'Number'}

]);

store = new Ext.data.JsonStore({
url: 'dashboard.php',
baseParams:{task: "GETBILLEDHOURS"},
root: 'results',
fields: ['id','Number']

});


var flot = new Ext.ux.Flot(
{
id: 'flot',
xtype: 'flot',


crosshair: {mode: "x"},
xaxis: {mode: "x"},
yaxis:{mode: "x"

}




});
store.on('load', function(store, records, options) {
var series = this.createSeries(store, 'id');


// series = this.setupData(series, this.getData());
flot.plot(series);
}, flot);



store.load();


var time = new Ext.Window({
title: 'Time',
id: 'time',
width: 500,
height:200,

items: [flot]



});

time.show();



});

kiyoto01
8 Jun 2009, 8:10 PM
Hi jroca

I met the same problem when I wrote the debit sample last night.
I avoid it by setting 'min' and 'max' to both 'xaxis' and 'yaxis'.
Can you set them?



new Ext.ux.Flot({
...
xaxis: {min: 0, max: 100},
yaxis: {min: 0, max: 100},
...
});
The cause of this issue, I have to check original flot code.
It takes several times...


Thanks

jroca
9 Jun 2009, 6:32 AM
thanks a lot for the support, i try but still the same problem

jroca
9 Jun 2009, 7:16 AM
i made a fix on jquery.flot.trunk.js line 815

formatter = function (v, axis) {
return v.toFixed(axis.tickDecimals);
}; just return v
formatter = function (v, axis) {
return v
}; with this fix is working and pulling data from the database, thanks

kiyoto01
9 Jun 2009, 7:22 AM
Hi jroca

Please test to set xaxis.mode to 'time'.



xaxis: {
mode: 'time'
},


I think that it maybe works well.

Thanks

AguilaLibre
9 Jun 2009, 7:34 AM
In line chart, you should use createSeries() and plot method.



store.on('load', function(store, records, options) {
var flot = this.findByType('flot')[0];
var series = flot.createSeries(store, 'id');
flot.plot(series);
}, flot_win);
In bar chart, you should use updateData().



store.on('load', function(store, records, options) {
var flot = this.findByType('barflot')[0];
var data = [];
for (var i = 0; i < records.length; i++) {
data.push(Ext.apply({
name: records[i].data.id,
}, records[i].data));
}
flot.updateData(data);
}, barflot_win);
Thanks.

Excellent job Kiyoto01, With the above I dont have problem in setting up Bar and Line flots getting data from a JSON store. But i was trying to do the same thing with a Pie flot but seems is more complex than I tought, could you tell me how to set up a pie flot, getting data from JSON store? Thanks in advanced!

Keep up that good work and support.

kiyoto01
9 Jun 2009, 8:59 AM
Hi jroca

I fixed your issue.

Please the attached Flot.js.

* Flot.js:2109


var dp = [];
axes = [xaxis, yaxis];
for (var i = 0; i < 2; i++) {
try {
dp[i] = axes[i].tickFormatter(item.datapoint[i], axes[i]);
} catch(e) {
dp[i] = item.datapoint[i];
}
}
I will release it as Ext.ux.Flot ver.0.10.

Thanks.

kiyoto01
9 Jun 2009, 11:25 PM
Hi jroca, aguilaLibre, mathiev, and all

I released Ext.ux.Flot ver.0.10
This release is for some bug fixes.

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

jroca, aguilaLibre, mathiev,
I think that I solved your issues.

Please check by the following sample.

http://extflot.googlecode.com/svn/trunk/debits.html
http://extflot.googlecode.com/svn/trunk/debits.js
http://extflot.googlecode.com/svn/trunk/debits.xml

aguilaLibre, I add createSeries for PieFlot

* debits.js:121


store.on('load', function(store, records, options) {
var series = this.createSeries(store, 'id', 'enCours');
this.plot(series);
this.baseRanges = this.getRanges();
}, pieflot);
Thanks

moegal
10 Jun 2009, 3:09 AM
Kiyoto,

Another great addition. Good work.

Not showing up in IE, probably an extra comma in the debits.js file at:



var store = new Ext.data.Store({
url: 'debits.xml',
reader: new Ext.data.XmlReader({
root: 'Debits',
record: 'Debit',
id: 'id',
fields: ['id', 'enCours','archive','dateDebit','depose']
}), <- HERE });


Just a quick look, I did not actually test it to see if this was the problem.
Marty

kiyoto01
10 Jun 2009, 3:25 AM
Hi marty

Thanks to your detection!

I didn't test it in IE...
I really hate IE, so I often cut IE test...

Thanks

moegal
10 Jun 2009, 3:32 AM
no problem.

I have 2 clients that count in IE with some activeX so I need to use it. I do most of my testing in FF though. I wish there was an easier way to detect the coma problem or at least have extjs catchit and fix it.

anyway, thanks.
Marty

kiyoto01
10 Jun 2009, 7:45 AM
Hi marty

That's sound nice.
I'm looking to your help.:D

I use Javascript Lint for official code of Ext.ux.Flot.
But I apply it to example codes, jquery.flot.js, etc...

http://javascriptlint.com/



Thanks

kiyoto01
19 Jun 2009, 9:14 PM
Hi all of Ext.ux.PieFlot users

Currently, jquery flot pie chart support has 2 active versions.
The one is the.d0rp's, and the other is mine.

http://code.google.com/p/flot/issues/detail?id=5

I think the.d0rp's is very good work.
And I hope to reduce my maintenance cost.

But the 2 version have difference usage about pie chart support options.
So if I change pie chart support to the.d0rp's from mine,
you have to follow up it.

Can I exchange jquery.flot.pie.js?

Thanks

moegal
20 Jun 2009, 2:43 AM
Kiyoto,

I personally have not implemented any pie as of yet, so any change should not affect me. As long as it works in all major browsers including IE and FF, I would say what ever is easier for you.

Will the new pie have similar features as the current pie?

Thanks for your concern!
Marty

AguilaLibre
20 Jun 2009, 5:24 PM
I'm impressed by your "customer service", keep up that good work.

About the change, that should be great, i have not implement any pie formaly as of yet... so any change in the file should not affect me either.

Thank you so much!

moegal
28 Jun 2009, 7:09 AM
is it possible to plot discontinious data across time with flot? I have one or more items that start and stop but I would like it to display in a single line across time. For example I have 2 items:

Item 1. start date jan1-mar31, then jun1-jun30, then aug15-oct15
Item 2. start date jan1-apr30, then jul1-aug30.

I would like to be able to zoom in and out so I want it to work like the visitors example. I've attached a mockup.

syyang85
28 Jun 2009, 6:44 PM
Hi, guy. I've been developing on flot for quite some time. Anyhow, do you guy know how to downsample a series of data for line graph? Eg, I need to display a string of data over 5 years. This would really clog up the memory of the browser if I had to display all of the dots over the years. Anyone with downsampling experience?

kiyoto01
29 Jun 2009, 12:23 PM
Hi Marty

I created a sample for discontinious line.

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




var item1 = [[1, 1], [4, 1], null, [6, 1], [7, 1], null, [8.5, 1], [10.5, 1]];
var item2 = [[1, 2], [5, 2], null, [7, 2], [11, 2]];


To separate line, insert 'null' into the series data.
Flot can accept 'null' just in line chart.
(bar chart cannot accept it)

Thanks

moegal
29 Jun 2009, 12:49 PM
Kiyoto,
Looks great. I will take a look at the code later tonight.

Thanks!
Marty

kiyoto01
29 Jun 2009, 12:56 PM
Hi syyang85

Hum...
I don't have good solutions about downsampling of the plotting.
It depends on the data which you treat, so much.

I suggest to hook 'beforedraw' event, and downsapmple the data,
like the following example...



Ext.onReady(function() {
var win = new Ext.Window({
...
items: [{
xtype: 'flot',
data: rawData,
rawData: rawData, // apply rawData when initial plotting
...
}]
});
var flot Ext.findByType('flot', win)[0];

// down sampling the series by x-axis ranger
flot.on('beforedraw', function(flot, series) {
var span = [this.xaxis.min, this.xaxis.max];
var step = Math.abs(Math.round((span[1] - span[0]) / 10)); // just 10 points to plot
var anchor = span[0];
for (var i = 0; i < series.length; i++) {
var s = series[i];
if (typeof s.rawData == 'undefined) { s.rawData = s.data; } // keep original data
s.data = []; // reset data to plot
for (var j = 0; j < s.rawData.length; j++) {
if (s.rawData[j][1] >= anchor) {
s.data.push(s.rawData[j]);
anchor += step;
}
}
}
return true; // continue to draw
}, flot);
});
The above sample does not detach rawData to redraw (for zooming, moving by user operation).


I didn't test it.
If it does not work well, please notice me.
I'll debug it.

Thanks

moegal
30 Jun 2009, 1:02 PM
Kiyoto,

Here is a new version of debit.js. There were 2 small errors preventing it from working in IE. You fixed the other one but IE does not like extra comas.

Replaced Line 98

label: records[i].data.id, // set id as xField

With

label: records[i].data.id // set id as xField

Here is the latest version of debit.js


/* $Id:$
* vim:sw=2:ts=8:sts=2:et:ft=javascript
* Released under the MIT license or Ext Open Source License by NCS, December 2008
*/

Ext.onReady(function() {

var store = new Ext.data.Store({
url: 'debits.xml',
reader: new Ext.data.XmlReader({
root: 'Debits',
record: 'Debit',
id: 'id',
fields: ['id', 'enCours','archive','dateDebit','depose']
})
});

// Line Chart by id
var flot_id_win = new Ext.Window({
title: 'Line Chart by id (debits.xml)',
x: 0,
y: 0,
width: 300,
height: 300,
layout: 'fit',
items: [{
xtype: 'flot',
cls: 'x-panel-body',
series: []
}]
});
flot_id_win.show();

var flot_id = flot_id_win.findByType('flot')[0];
store.on('load', function(store, records, options) {
var series = this.createSeries(store, 'id');
this.plot(series);
this.baseRanges = this.getRanges();
}, flot_id);

// Line Chart by dateDebit
var flot_date_win = new Ext.Window({
title: 'Line Chart by dateDebit (debits.xml)',
x: 300,
y: 0,
width: 300,
height: 300,
layout: 'fit',
items: [{
xtype: 'flot',
cls: 'x-panel-body',
xaxis: { mode: 'time' },
yaxis: { min:0, max: 100 },
series: []
}]
});
flot_date_win.show();
var flot_date = flot_date_win.findByType('flot')[0];
store.on('load', function(store, records, options) {
var series = this.createSeries(store, 'dateDebit');
for (var i = 0; i < series.length; i++) {
var data = series[i].data;
for (var j = 0; j < data.length; j++) {
data[j][0] = Date.parseDate(data[j][0], "Y-m-d H:i:s.u");
}
}
this.plot(series);
this.baseRanges = this.getRanges();
}, flot_date);

// Bar Chart by id
var barflot_win = new Ext.Window({
title: 'Bar Chart by id (debits.xml)',
x: 0,
y: 300,
width: 300,
height: 300,
layout: 'fit',
items: [{
xtype: 'barflot',
cls: 'x-panel-body',
xaxis: { min: 0, max: 100 },
yaxis: { min: 0, max: 100 },
series: [
{ name: 'enCours', label: 'enCours' },
{ name: 'archive', label: 'archive' },
{ name: 'depose', label: 'depose' },
{ name: 'coffreId', label: 'coffreId' }
]
}]
});
barflot_win.show();
var barflot = barflot_win.findByType('flot')[0];
store.on('load', function(store, records, options) {
var data = [];
for (var i = 0; i < records.length; i++) {
data.push(Ext.apply({
label: records[i].data.id // set id as xField
}, records[i].data));
}
this.updateData(data);
this.baseRanges = this.getRanges();
}, barflot);

// Pie Chart of enCours by id
var pieflot_win = new Ext.Window({
title: 'Pie Chart of enCours by id (debits.xml)',
x: 300,
y: 300,
width: 300,
height: 300,
layout: 'fit',
items: [{
xtype: 'pieflot',
cls: 'x-panel-body',
pies: {show: true, fillOpacity: 1 },
series: []
}]
});
pieflot_win.show();
var pieflot = pieflot_win.findByType('flot')[0];
store.on('load', function(store, records, options) {
var series = this.createSeries(store, 'id', 'enCours');
this.plot(series);
this.baseRanges = this.getRanges();
}, pieflot);

store.load({});

});

moegal
30 Jun 2009, 3:25 PM
Kiyoto,

I just downloaded the latest version of index.hml and the pie does not display. Index.html is the main page for flotdemo.js. Does not display pie in either FF or IE.

Looks like horizontal bar is not horizontal either.

FYI.

Thanks, Marty

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

kiyoto01
1 Jul 2009, 10:59 AM
Hi Marty

Thank you for your constantly help.
I fixed debits.js.

About that pie chart doesn't work in flot ver.0.5 demo.
I khow it.
Pie chart support is not available in flot ver.0.5.

It cannot recognize 'pies' option.
And draw them as line chart.
It is the default plotting mode.

Thanks

moegal
1 Jul 2009, 11:32 AM
Kiyoto,

Thanks!

Also, I was able to get multiple, discontinuous lines plotted against time. I will post the code when I get a chance. works out just the way I needed.

Marty

silvaros
3 Jul 2009, 11:25 AM
Hi kiyoto! Thanks for the great work!

My question is, how can I prevent a series from being drawn when I have more than one series?

I'm using custom ticks (strings) and if I simply exclude the series I will be missing ticks. If I give flot all the series I get all the custom ticks but it shows all the points for all the series. So, for the points/series I don't want to show I set the radius to 0, all points still get plotted but they can not be seen. The problem is if another point is drawn in the same spot and I hover over that spot (for a tooltip) the item in the onhover function is the first point, with a radius of 0.

example:
the x axis should have ticks 0, 1 , 2, 3
the y axis should have ticks a, b, c, d

series1 = [1,b, 3,c]
series2 = [2,a]
series3 = [1,b, 0,d]

If I don't put in series3 the y axis will not have a tick mark "d" so I have to put all the series in... initially I want the user to see points for series1 only, then series2 only, then series3 only. The problem is when I show series3 and hover over the point [1,b] the item passed to onPlotHover is the point at [1,b] from series1.

I hope I explained that well. Thanks for any help!

edit : I just found setHidden, and series {hidden:true}, but neither seemed to work.

moegal
4 Jul 2009, 6:44 PM
I have a barflot chart that I don't know the max value for the yaxis. If I leave out the max property I get:

precision Infinity out of range
[Break on this error] return v.toFixed(axis.tickDecimals);

Is there anyway to prevent this or can I set the max value after I get my data back from the store?

Thanks, Marty

kiyoto01
5 Jul 2009, 9:19 AM
Hi silvaros

I'm sorry to bother you about Ext.ux.Flot.

I read your post. And I almost understand your mention.
But it is not perfect...

So, can you create a example on this zipped one?
If you sent it to me, I'll test it and try to fix.

Thanks

kiyoto01
5 Jul 2009, 9:34 AM
Hi Marty

I feel that the tick formatter is so delicate, too.
This issue is caused by various problems...

Do you set the series data as 'text', not 'number'?
The tick formatter is so sensitive about value type.

And, in the latest flot, the toughness of tick formatter is increased, maybe.
But the latest flot is suffered drastic change...

If you can create a example, I'll trace it in the firebug.
And report the result.

Thanks

moegal
5 Jul 2009, 10:04 AM
Kiyoto,

Thanks, can I change the max property on the fly? I could do this as I load the store.
Do you know the syntax? Is it store.yaxis.max = newValue? Will I need to doLayout on it?

BTW I am using a modified version of debits.html

I will post code later this evening. Gotta run now

Thanks again, Marty

kiyoto01
5 Jul 2009, 12:41 PM
Hi Marty

'xaxis' and 'yaxis' properties are applied Ext.ux.Flot instance's when redraw by Store chenged.

So, I think the code become the following example...



store.on('datachange', function(store, records) {
this.xaxis.max = xxx; // update xaxis's range
this.series = this.createSeries(store, 'x');
this.plot(this.series);
}, flot);
Thanks

moegal
5 Jul 2009, 6:45 PM
Great, I will try 1st thing tomorrow.

As always, thanks!

Marty

moegal
6 Jul 2009, 5:12 AM
Kiyoto,

Great that did work. I am just now trying to get the max value from my store so I can set:

this.yaxis.max = myMaxValue;

Is there an easy way to get the max value?

I am using the jsonreader and one of my items is named totals. Here is what I am using:



var myMaxArray=new Array();
for ( var i=0, len=store.data.items.length; i<len; ++i ){
myMaxArray[i]=parseFloat(store.data.items[i].data.totals);
}
this.yaxis.max = Math.ceil(Math.max.apply(0,myMaxArray))


Thanks, Marty

silvaros
6 Jul 2009, 8:56 AM
I this is a very simplified version of what I am doing.
The data is grouped by a "time" attribute ('Jan', 'Feb', 'Mar'). I need to see all the custom tick marks on the Y axis so all 3 series must be loaded, but I only want to show the points for the 'Jan' series when the plot loads so I give the point in the other series a radius : 0. But these points are still plotted.

When the page loads you can only see the black points ({1,b}, {3,c}, {0,d}) from the 'Jan' series, this is good, but if you hover over point {2,a} (which is in the 'Feb' series) the tooltip comes up, this is bad.

The buttons at the bottom let the user cycle through each time period. this is my problem when we get to 'Mar' the only point you can see is 3,c and is not black, this is good, but if you hover over that point the item in onPlotHover is from the 'Jan' series.

So all I really want to do is not have the other series on the flot chart at all.

Thanks again, hope this is a little clearer :D

silvaros
6 Jul 2009, 10:24 AM
I found a solution that is ok for me. All I had to do was set the series hoverable and clickable to true/false. It was in the comments in the flot file all along. \:D/

moegal
7 Jul 2009, 7:19 AM
Kiyoto,

No hurry but if you get a chance could you look into this? If you have time that is. I realize you are busy and are one of the most helpful people I have dealt with on this forum. But no one else seems to understand flot better then you.



uncaught exception: Invalid dimensions for plot, width = null, height = null
formatter("216687.16", Object min=0 max=342057 used=true tickDecimals=0)jquery.flot.trunk... (line 831)
showTooltip(Object type=plothover target=div#orderschart1205chart, Object pageX=1389 pageY=284 x=0.990566037735849, Object datapoint=[2] dataIndex=1 series=Object, false)flot.js (line 2116)
(no name)(Object initialConfig=Object id=orderschart1205chart, Object type=plothover target=div#orderschart1205chart, Object pageX=1389 pageY=284 x=0.990566037735849, Object datapoint=[2] dataIndex=1 series=Object)flot.js (line 1514)
Observable()ext-all.js (line 12)
Observable()ext-all.js (line 12)
onPlotHover(Object type=plothover target=div#orderschart1205chart, Object pageX=1389 pageY=284 x=0.990566037735849, Object datapoint=[2] dataIndex=1 series=Object)flot.js (line 1773)
(no name)(Object type=plothover target=div#orderschart1205chart, Object pageX=1389 pageY=284 x=0.990566037735849, Object datapoint=[2] dataIndex=1 series=Object)flot.js (line 1503)
handle(Object type=plothover target=div#orderschart1205chart)jquery.js (line 2073)
(no name)()jquery.js (line 1864)
trigger("plothover", [Object pageX=1389 pageY=284 x=0.990566037735849, Object datapoint=[2] dataIndex=1 series=Object], div#orderschart1205chart, true, undefined)jquery.js (line 2016)
trigger()jquery.js (line 2232)
each([div#orderschart1205chart], function(), undefined)jquery.js (line 751)
each(function(), undefined)jquery.js (line 155)
trigger("plothover", [Object pageX=1389 pageY=284 x=0.990566037735849, Object datapoint=[2] dataIndex=1 series=Object], undefined)jquery.js (line 2231)
triggerClickHoverEvent("plothover", Object pageX=1389 pageY=284, function())jquery.flot.trunk... (line 1933)
onMouseMove(mousemove clientX=0, clientY=0)


I am using the pie and I get the error occasionally. No big deal at the moment. If you are integrating a new pie then I won't even worry about it until that is ready.

Thanks, Marty

kiyoto01
7 Jul 2009, 11:18 AM
Hi Silvaros

I see what you mention.

You should use tooltip configuration.
It can accept 'function' or 'boolean'.



xtype: 'flot',
...
tooltip: function(o) {
for (var i = 0; i < customTicks.length; i++) {
var tick = customTicks[i];
if (tick[0] == o.datapointY) {
return String.format("{0}, {1}", tick[0], tick[1]);
}
}
return o[0]; // tick is not found.
},
...
The argument of tooltip function, 'o' contains the following properties.



{
tipId: event.target.id + '-tip',
pageX: pos.pageX,
pageY: pos.pageY,
x: pos.x,
y: pos.y,
0: dp[0],
1: dp[1],
datapointX: item.datapoint[0],
datapointY: item.datapoint[1],
label: item.series.label,
color: item.series.color,
shadowSize: item.series.shadowSize,
dataIndex: item.dataIndex,
seriesIndex: item.seriesIndex,
series: item.series
}
And if you specify tooltip as 'false', you can disable tooltip, instead of 'hoverable' or 'clickable'.

I updated your sample.

Thanks

kiyoto01
7 Jul 2009, 11:43 AM
Hi Marty

I think that you should replace 'tickFormatter' to your original.



{
xtype: 'flot',
...
xaxis: {
...
tickFormatter: function(v, axis) {
something_to_do_for_avoid_some_issue.
},
...
}
}
I don't understand completely about tickFormatter's value syntax.
So, I recommend that users support tick formatter which accepts their value schema in ad hoc.

But I doubt 1 point about the stack trace you report.



uncaught exception: Invalid dimensions for plot, width = null, height = null
The exception (by throw) is from jquery.flot.trunk.pie.js:501.
There is no relation with formatter exception (jquery.flot.trunk.pie.js:831)
The 2 exceptions are occurred in the same time or different time.

If the line:501 exception causes line:831 exception,
the problem is about canvas width and height.
You set width and height of flot to avoid the issue.

Thanks

moegal
7 Jul 2009, 12:11 PM
Kiyoto,

Thanks, I will try. This is a pie chart so I don't have any x or y axis specified. I've added the code anyway.

Also, the charts are in a portlet and are using layout: 'fit' so I don't have a size set.

Finally I am auto refreshing the store data on an interval.

I will update you if I see anymore errors.

Thanks, Marty

kiyoto01
7 Jul 2009, 7:45 PM
Hi Marty

Is it a pie chart issue? I through this fact.
OK, I'll care it after migration to new implementation.
I drop my last commet. It's inrelevant.

Hum..., I think that the tick formatter has no relation with pie chart.
It's a small mystery...

Thanks

moegal
8 Jul 2009, 5:09 AM
Kiyoto,

Don't worry about it. I found an error with my code that may have been the problem and I fixed it. I have 2 charts on a page in 2 panels and was giving each the same name for an id. I was periodically updating the stores as well.

Ext.getCmp('panel1').add('myname');
Ext.getCmp('panel1').doLayout();

and then

Ext.getCmp('panel2').add('myname');
Ext.getCmp('panel2').doLayout();

I changed the names and have stopped getting the error, at least since yesterday. I only saw it occasionally then anyway.

Marty

moegal
8 Jul 2009, 2:48 PM
Kiyoto,

Narrowed down the problem that I am seeing:

Getting the following error: uncaught exception: Invalid dimensions for plot, width = 0, height = 0

This happens if the panel for the flot chart is not in front or covered. For example, I have a tabbed interface and when the tab with the charts is not active and the charts are updated I get the error. It happens on barflot and pieflot alike. I would rather not set a height or width if I can help it.

This is absolutely not that important. Is there a minHeight and minWidth that I can set?

Thanks, Marty

kiyoto01
9 Jul 2009, 6:46 PM
Hi Marty

I see the condition of this issue.
I'll consider to find bugs.

Thanks

moegal
13 Jul 2009, 4:48 AM
Thanks!
Marty

Scorpie
16 Jul 2009, 6:29 AM
Awesome work, I am going to use it! Stay tuned for some questions!

Scorpie
20 Jul 2009, 2:25 AM
kiyoto01,

I`m trying to use your Flot wrapper in the ExtJS Portal example, however, it fails to render at all. Any idea what would cause this?

moegal
20 Jul 2009, 3:20 AM
I am using it with a portal. Are you seeing any errors in firebug?

Marty

Scorpie
20 Jul 2009, 10:59 AM
I am using it with a portal. Are you seeing any errors in firebug?

Marty

Nope, better yet, I see the request being fired, as if the component gets loaded.
Can you share a simple version of your portal implementation? That would help me enormous!

moegal
20 Jul 2009, 11:07 AM
nothing simple about my application. Let me see if I can put together a simple example for you.

Marty

Scorpie
20 Jul 2009, 11:08 AM
nothing simple about my application. Let me see if I can put together a simple example for you.

Marty

Awesome! If I can help you with anything just ask!

moegal
20 Jul 2009, 3:22 PM
Scorpie,

sorry to take so long. All of my code is created with sqlserver and asp with a ton of includes.



<html>
<head>
<title>Custom Layouts and Containers - Portal Sample with Flot</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<!--[if IE]><script language="javascript" type="text/javascript" src="excanvas.js"></script><![endif]-->
<script language="javascript" type='text/javascript' src='../../adapter/jquery/jquery.js'></script>
<script language="javascript" type='text/javascript' src='../../ext/adapter/jquery/ext-jquery-adapter.js'></script>
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext-all.js"></script>

<script type="text/javascript" src="Portal-all.js"></script>

<script language="javascript" type="text/javascript" src="flot/jquery.flot.js"></script>
<script language="javascript" type="text/javascript" src="flot/Flot.js"></script>

<link rel="stylesheet" type="text/css" href="portal.css" />
<link rel='stylesheet' type='text/css' href='flot/Flot.css' />
</head>
<body>
<script>
Ext.onReady(function(){

var viewport = new Ext.Viewport({
layout:'border',
items:[{
region:'west',
id:'west-panel',
title:'West',
split:true,
width: 200,
minSize: 175,
maxSize: 400,
collapsible: true,
margins:'35 0 5 5',
cmargins:'35 5 5 5',
layout:'accordion',
layoutConfig:{
animate:true
},
items: [{
html: 'testing',
title:'Navigation',
autoScroll:true,
border:false,
iconCls:'nav'
},{
title:'Settings',
html: 'testing',
border:false,
autoScroll:true,
iconCls:'settings'
}]
},{
xtype:'portal',
region:'center',
margins:'35 5 5 0',
items:[{
columnWidth:.50,
style:'padding:10px 0 10px 10px',
items:[{
title: 'Sample',
layout:'fit',
html: 'testing'
},{
title: 'Another Panel 1',
html: 'testing'
}]
},{
columnWidth:.50,
style:'padding:10px 0 10px 10px',
items:[
{
title: 'Panel 2',
items: [
{
xtype: 'flot',
title: '2008 Web Browser Market Share',
cls: 'x-panel-body',
height: 300,
width: 400,
bars: {show: true, align: 'center', barWidth: 1},
xaxis: {
ticks: [
[0, 'Internet Explorer'],
[1, 'Firefox'],
[2, 'Safari'],
[3, 'Chrome'],
[4, 'Opera'],
[5, 'Other Browsers']
]
},
series: [
{ data: [[0, 68.15]]},
{ data: [[1, 21.34]]},
{ data: [[2, 7.93]]},
{ data: [[3, 2.04]]},
{ data: [[4, 1.71]]},
{ data: [[5, 1.0 ]]}
]
}
]
},{
title: 'Another Panel 2',
html: 'testing'
}]
}]
}]
});
});
</script>
</body>
</html>


I just combined portal.js, portlet.js, and portalColumn.js to make portal-all.js and it is:



/*
* Ext JS Library 2.2
* Copyright(c) 2006-2008, Ext JS, LLC.
* licensing@extjs.com
*
* http://extjs.com/license
*/

Ext.ux.Portal = Ext.extend(Ext.Panel, {
layout: 'column',
autoScroll:true,
cls:'x-portal',
defaultType: 'portalcolumn',

initComponent : function(){
Ext.ux.Portal.superclass.initComponent.call(this);
this.addEvents({
validatedrop:true,
beforedragover:true,
dragover:true,
beforedrop:true,
drop:true
});
},

initEvents : function(){
Ext.ux.Portal.superclass.initEvents.call(this);
this.dd = new Ext.ux.Portal.DropZone(this, this.dropConfig);
},

beforeDestroy: function() {
if(this.dd){
this.dd.unreg();
}
Ext.ux.Portal.superclass.beforeDestroy.call(this);
}
});
Ext.reg('portal', Ext.ux.Portal);


Ext.ux.Portal.DropZone = function(portal, cfg){
this.portal = portal;
Ext.dd.ScrollManager.register(portal.body);
Ext.ux.Portal.DropZone.superclass.constructor.call(this, portal.bwrap.dom, cfg);
portal.body.ddScrollConfig = this.ddScrollConfig;
};

Ext.extend(Ext.ux.Portal.DropZone, Ext.dd.DropTarget, {
ddScrollConfig : {
vthresh: 50,
hthresh: -1,
animate: true,
increment: 200
},

createEvent : function(dd, e, data, col, c, pos){
return {
portal: this.portal,
panel: data.panel,
columnIndex: col,
column: c,
position: pos,
data: data,
source: dd,
rawEvent: e,
status: this.dropAllowed
};
},

notifyOver : function(dd, e, data){
var xy = e.getXY(), portal = this.portal, px = dd.proxy;

// case column widths
if(!this.grid){
this.grid = this.getGrid();
}

// handle case scroll where scrollbars appear during drag
var cw = portal.body.dom.clientWidth;
if(!this.lastCW){
this.lastCW = cw;
}else if(this.lastCW != cw){
this.lastCW = cw;
portal.doLayout();
this.grid = this.getGrid();
}

// determine column
var col = 0, xs = this.grid.columnX, cmatch = false;
for(var len = xs.length; col < len; col++){
if(xy[0] < (xs[col].x + xs[col].w)){
cmatch = true;
break;
}
}
// no match, fix last index
if(!cmatch){
col--;
}

// find insert position
var p, match = false, pos = 0,
c = portal.items.itemAt(col),
items = c.items.items;

for(var len = items.length; pos < len; pos++){
p = items[pos];
var h = p.el.getHeight();
if(h !== 0 && (p.el.getY()+(h/2)) > xy[1]){
match = true;
break;
}
}

var overEvent = this.createEvent(dd, e, data, col, c,
match && p ? pos : c.items.getCount());

if(portal.fireEvent('validatedrop', overEvent) !== false &&
portal.fireEvent('beforedragover', overEvent) !== false){

// make sure proxy width is fluid
px.getProxy().setWidth('auto');

if(p){
px.moveProxy(p.el.dom.parentNode, match ? p.el.dom : null);
}else{
px.moveProxy(c.el.dom, null);
}

this.lastPos = {c: c, col: col, p: match && p ? pos : false};
this.scrollPos = portal.body.getScroll();

portal.fireEvent('dragover', overEvent);

return overEvent.status;;
}else{
return overEvent.status;
}

},

notifyOut : function(){
delete this.grid;
},

notifyDrop : function(dd, e, data){
delete this.grid;
if(!this.lastPos){
return;
}
var c = this.lastPos.c, col = this.lastPos.col, pos = this.lastPos.p;

var dropEvent = this.createEvent(dd, e, data, col, c,
pos !== false ? pos : c.items.getCount());

if(this.portal.fireEvent('validatedrop', dropEvent) !== false &&
this.portal.fireEvent('beforedrop', dropEvent) !== false){

dd.proxy.getProxy().remove();
dd.panel.el.dom.parentNode.removeChild(dd.panel.el.dom);
if(pos !== false){
c.insert(pos, dd.panel);
}else{
c.add(dd.panel);
}

c.doLayout();

this.portal.fireEvent('drop', dropEvent);

// scroll position is lost on drop, fix it
var st = this.scrollPos.top;
if(st){
var d = this.portal.body.dom;
setTimeout(function(){
d.scrollTop = st;
}, 10);
}

}
delete this.lastPos;
},

// internal cache of body and column coords
getGrid : function(){
var box = this.portal.bwrap.getBox();
box.columnX = [];
this.portal.items.each(function(c){
box.columnX.push({x: c.el.getX(), w: c.el.getWidth()});
});
return box;
},

// unregister the dropzone from ScrollManager
unreg: function() {
//Ext.dd.ScrollManager.unregister(this.portal.body);
Ext.ux.Portal.DropZone.superclass.unreg.call(this);
}
});

Ext.ux.PortalColumn = Ext.extend(Ext.Container, {
layout: 'anchor',
autoEl: 'div',
defaultType: 'portlet',
cls:'x-portal-column'
});
Ext.reg('portalcolumn', Ext.ux.PortalColumn);

Ext.ux.Portlet = Ext.extend(Ext.Panel, {
anchor: '100%',
frame:true,
collapsible:true,
draggable:true,
cls:'x-portlet'
});
Ext.reg('portlet', Ext.ux.Portlet);


portal.css is:



/*
* Ext JS Library 2.2
* Copyright(c) 2006-2008, Ext JS, LLC.
* licensing@extjs.com
*
* http://extjs.com/license
*/

.x-portal .x-panel-dd-spacer {
margin-bottom:10px;
}

.x-portlet {
margin-bottom:10px;
}

/* Clean up the look of the portlets */
.x-portlet .x-panel-ml {
padding-left:2px;
}
.x-portlet .x-panel-mr {
padding-right:2px;
}
.x-portlet .x-panel-bl {
padding-left:2px;
}

.x-portlet .x-panel-br {
padding-right:2px;
}
.x-portlet .x-panel-body {
background:white;
}
.x-portlet .x-panel-mc {
padding-top:2px;
}
.x-portlet .x-panel-bc .x-panel-footer {
padding-bottom:2px;
}
.x-portlet .x-panel-nofooter .x-panel-bc {
height:2px;
}


You have to make sure to load the jquery stuff first or I get an error. Also, there are many other flot files you can add like pie and barflot, plus the latest and greatest. This should get you working though.

Marty

moegal
20 Jul 2009, 3:24 PM
let me know if you want me to zip it up as well.

Scorpie
20 Jul 2009, 11:49 PM
Thanks for the code Marty, I tried to get it running but I keep getting an 'types[config.xtype || defaultType] is not a constructor' error on the flot item. If you could zip it up, I could try to see where my code differs from yours.

Scorpie
21 Jul 2009, 12:30 AM
Ignore my last comment, I got it working now.
Moegal, how do you go about using Ajax requests for setting series etc?
I tried using the beforerender event to update it, but it doesnt work as aspected, I need to set the 'series' config, and after that, the grid renders nothing, even when doing element.render().

kiyoto01
21 Jul 2009, 2:01 AM
Hi Scorpie and Marty

I'd like to entrust this issue to Marty.
Please talk to him.
I will just observe...

Marty, thank you for your kindness!

If you require my comment or work, please call me by name.

Thanks

moegal
21 Jul 2009, 4:13 AM
Scorpie,

I have a pie and bar example earlier from Kiyoto. Here is an example of a bar with data from json:



var chartOnestore = new Ext.data.Store({
url: 'includes/home-orders-chart-data.asp',
reader: new Ext.data.JsonReader({
root: 'Records',
fields: ['month', 'items', 'others', 'totals']
})
});

var chartOne = new Ext.ux.BarFlot({
id: 'chartOnechart',
xaxis: { min: 0, max: 12},
yaxis: { min: 0, max: 10000 },
series: [
{ name: 'items', label: 'Items' },
{ name: 'others', label: 'Items +Addons +Mailshop' },
{ name: 'totals', label: 'Totals' }
]
});
chartOnestore.on('load', function(store, records, options) {
var data = [];
for (var i = 0; i < records.length; i++) {
data.push(Ext.apply({
label: records[i].data.month
}, records[i].data));
}
var myMaxArray=new Array();
for ( var i=0, len=store.data.items.length; i<len; ++i ){
myMaxArray[i]=parseFloat(store.data.items[i].data.totals);
}
this.yaxis.max = Math.ceil(Math.max.apply(0,myMaxArray))
this.updateData(data);
this.baseRanges = this.getRanges();
}, chartOne);
chartOnestore.on('beforeload', function(store, records, options) {
//notify loading if you like
}, chartOne);

var chartOnepanel = new Ext.Panel({
id: 'chartOnepanel-id',
items:[chartOne],
tbar:[
{
xtype: 'storeautorefresher',
interval: 60,
linkedStore: chartOnestore
},{
text: 'Refresh',
handler: function(){
chartOnestore.load({});
}
}
]
})
chartOnestore.load({});


json looks like:



{"Records": [

{"totals":"93864.62","items":"46160.84","others":"55788.59","month":"May 2009"},

{"totals":"342056.57","items":"178750.95","others":"216687.16","month":"June 2009"},

{"totals":"188916.07","items":"97545.34","others":"121072.74","month":"July 2009"}

], "RecordCount":"3" } )


Here is a pie that I do get the series and data from a remote source:




var chartTwostore = new Ext.data.Store({
url: 'includes/home-products-chart-data.asp',
reader: new Ext.data.JsonReader({
root: 'Records',
fields: ['catname', 'total']
})
});
var chartTwo = new Ext.ux.PieFlot({
id: 'chartTwochart',
pies: {
show: true,
fillOpacity: 1
},
title: 'Todays Product Mix',
xaxis: {
tickFormatter: function(v, axis) {
//do nothing here
}
},
legend: {
show: true
},
series: []
});

var chartTwopanel = new Ext.Panel({
id: 'chartTwopanel-id',
items:[chartTwo],
tbar:[
{
xtype: 'storeautorefresher',
interval: 60,
linkedStore: chartTwostore
},{
text: 'Refresh',
handler: function(){
chartTwostore.load({});
}
}
]
})
chartTwostore.on('load', function(store, records, options) {
var series = this.createSeries(store, 'catname', 'total');
this.plot(series);
this.baseRanges = this.getRanges();
}, chartTwo);

chartTwostore.on('beforeload', function(store, records, options) {
//notify loading if you like
}, chartTwo);
chartTwostore.load({});


The json for this is:



( {"Records": [

{"total":"105","catname":"Product 1"},

{"total":"14","catname":"Product 2"}

], "RecordCount":"2" } )


Finally you may see some code for my generic store autorefresher. Here it is.



/*
* Ext.ux.StoreAutoRefresher
*
* Refresh a store every x minutes
*/
Ext.ux.StoreAutoRefresher = Ext.extend(Ext.Container, {
layout: 'table',
layoutConfig: {
columns: 3
},
autoEl: {
cls: 'ytb-text'
},
initComponent: function() {
//set min params that can be overwritten by parameters set by caller
var defConfig = {
intervals: [[0],[5],[10],[30],[60]],
interval: 0,
beforeText: 'Refresh every',
afterText: 'minutes',
linkedStore: ''
};

Ext.applyIf(this,defConfig);
// Create a Combo
this.autoCombo = new Ext.form.ComboBox({
maskRe: /^d*$/,
store: new Ext.data.SimpleStore({
fields: ['autoRefresh'],
data : this.intervals
}),
triggerAction: 'all',
displayField: 'autoRefresh',
typeAhead: true,
mode: 'local',
triggerAction: 'all',
selectOnFocus: true,
width: 50,
listeners:
{
select: this.onFieldSelect,
scope: this
}
});

this.autobeforeText = new Ext.ux.MsgPanel({
msg: 'Refresh every',
style: 'margin-left:10px;margin-right:4px'
});

this.autoafterText = new Ext.ux.MsgPanel({
msg: 'minutes',
style: 'margin-left:4px;margin-right:10px'
});

this.autoCombo.setValue(this.interval);

this.items = [ this.autobeforeText, this.autoCombo, this.autoafterText ];

if (this.interval > 0) {
this.linkedStore.startAutoRefresh(this.interval*60);
} else {
this.linkedStore.stopAutoRefresh();
}

Ext.ux.StoreAutoRefresher.superclass.initComponent.apply(this, arguments);
},

onFieldSelect: function(combo, rec, index) {
if(rec.json[0] > 0){
this.linkedStore.startAutoRefresh(rec.json[0]*60);
}else{
this.linkedStore.stopAutoRefresh();
}
},

getValue: function() {
return this.autoCombo.getValue();
},
onDestroy: function() {
this.linkedStore.stopAutoRefresh();
}
});
Ext.reg('storeautorefresher', Ext.ux.StoreAutoRefresher);


You will need this override to use this extension though.



Ext.override(Ext.data.Store, {
startAutoRefresh : function(interval, params, callback, refreshNow){
if(refreshNow){
this.load({params:params, callback:callback});
}
if(this.autoRefreshProcId){
clearInterval(this.autoRefreshProcId);
}
this.autoRefreshProcId = setInterval(this.load.createDelegate(this, [{params:params, callback:callback}]), interval*1000);
},
stopAutoRefresh : function(){
if(this.autoRefreshProcId){
clearInterval(this.autoRefreshProcId);
}
}
});


Whew!

Let me know what else I can do to help. I am auto loading these charts into a portal in a viewport and am working on integrating into a desktop as well. I do get one nuisance error about the chart size being 0. You can fix this by setting a size fro the charts. I am using layout: 'fit' and hoping that at some point the error will be fixed.


Marty

Scorpie
21 Jul 2009, 11:16 PM
Moegal, thanks for your code example! I`m trying to adapt your code to mine, but it seems i`m missing an extended class of yours, called Ext.ux.MsgPanel. I searched the forums but can`t find it. Can you give any pointers?

EDIT:

Nevermind, found it ! Awesome code moegal, I just have one irritating issue which seems to be giving me headaches about my JSON :( It says its malformed, even though its not!

The problem is in the jquery package, which one do you use Moegal?

moegal
22 Jul 2009, 2:04 AM
i am using the extjs 2.2 and the jquery that comes with it.

Scorpie
22 Jul 2009, 2:08 AM
i am using the extjs 2.2 and the jquery that comes with it.

Ah, i`m using 3.0 Final. I`ve solved the problem, it was a Tomcat issue :(

Moegal, i`m having another problem. The load event isnt being fired by the store.
Here is my code, the JSON response is the same as your example.
Therefore, it doesnt draw anything!
You can check if the loadevent gets fired by adding console.log('loadevent'); to the load listener.
It doesnt do anything in my code.

moegal
22 Jul 2009, 3:33 AM
it loads up for me just fine. I will send a link via private message so you can see

PS: I will be tied up in meetings for the next few hours. The time difference makes it hard to be timely, I know.

Scorpie
22 Jul 2009, 3:57 AM
Awesome Moegal, with the help of your deployment it now works. I just rechecked everything, and now the drawing works!

moegal
22 Jul 2009, 4:04 AM
great, glad I could help.

Marty

kiyoto01
22 Jul 2009, 6:05 AM
Hi Scorpie and Marty

I have 1 comment about jquery for Ext 2.2.x and Ext 3.0.

Ext 2.2.x and Flot before r160 uses jquery 1.2.3.
Ext 3.0 and Flot after r160 users jquery 1.3.2.

The jquery.extend method of jquery 1.3.x applies all elements of the object deeply.
jquery.extend() is equal with Ext.apply() in 1.2.3, but 1.3.2 is not.
So you consider to jquery-1.3.2-old-extend.js.
It solves jquery.flot.js issue, but maybe cause any problems...

I plan to support latest flot, and support jquery 1.3.2.
But recently, I don't touch this work. So, this takes amount of times...

Thanks.

moegal
22 Jul 2009, 8:24 AM
thanks, I will keep that is mind.

Scorpie
23 Jul 2009, 1:17 AM
kiyoto01 (http://extjs.com/forum/member.php?u=60768), roger that!

Marty, did you experience problems with the layout: 'fit' configuration for your panels in the portal? It seems to me that the first time the panels are rendered, the panel shrinks too much, so it doesnt fit anymore. See screenshot. After I adjust the viewport by minimizing the western border, it does a doLayout() after which it renders perfect. Any idea?

moegal
23 Jul 2009, 1:37 AM
I did not notice that exact problem but Kiyoto recommended that I set the with and height. fit doesn't appear to work perfectly here.

I do not have a solution.

Marty

Scorpie
23 Jul 2009, 1:40 AM
I did not notice that exact problem but Kiyoto recommended that I set the with and height. fit doesn't appear to work perfectly here.

I do not have a solution.

Marty

Ah no problem, will set the height & width then. BTW, when I use IE 7 to drag&drop one of my panels, the colours in the chart dissapear. Very ackward behaviour. Anybody else have the same issue?

moegal
23 Jul 2009, 4:46 AM
I can drag portlets with a charts around and the colors stay the same. I have 1 pie chart, 1 bar chart and several grids. works the same in IE7 as FF2+

Scorpie
23 Jul 2009, 5:10 AM
I can drag portlets with a charts around and the colors stay the same. I have 1 pie chart, 1 bar chart and several grids. works the same in IE7 as FF2+


Weird stuff. I`m gonna do some more testing.

Scorpie
24 Jul 2009, 3:55 AM
Hm, i`m now having issues with reloading the chart. Im trying to use a gear-tooltip in the portal panel to accomplish this, however, it keeps telling me that this.proxy = undefined:

Creation of the store:




var chartOnestore =new Ext.data.JsonStore({

url: host+'/DashboardService/monitor/incomingmessages/total'+test,

root:'Records',

fields:[]
});


Handler to refresh:



id:'refresh',

handler:function(e, target, panel){
var chart = panel.items.get(0);

console.log(chart.getStore());

chart.getStore().reload();



What am I doing wrong here?

moegal
24 Jul 2009, 4:49 AM
can't you just call:

chartOnestore.reload()

or i do this:

chartOnestore.load({});

is chart really returning the correct reference?

Marty

fangzhouxing
24 Jul 2009, 6:37 PM
Does anyone use Ext.ux.Flot in IE6 successfully?

moegal
24 Jul 2009, 7:19 PM
i haven't tried.

Marty

moegal
7 Aug 2009, 2:28 AM
Kiyoto,

Any idea why I might be seeing this? I am using 2.2 and the ext desktop. I have flot working in a viewport but not here

$.plot is not a function
plot([Object data=[11] id=flot-series863 legend=Object, Object data=[8] id=flot-series864 legend=Object])flot.js (line 2243)
onRender(Object dom=div#ext-gen860.x-panel-body id=ext-gen860, null)flot.js (line 1466)
Component(Object dom=div#ext-gen860.x-panel-body id=ext-gen860, undefined)ext-all.js (line 58)
ContainerLayout(Object initialConfig=Object id=flot-visitors31 xtype=flot, 0, Object dom=div#ext-gen860.x-panel-body id=ext-gen860)ext-all.js (line 65)
ContainerLayout(Object initialConfig=Object title=Visitors id=visitors31, Object dom=div#ext-gen860.x-panel-body id=ext-gen860)ext-all.js (line 65)
ContainerLayout(Object initialConfig=Object title=Visitors id=visitors31, Object dom=div#ext-gen860.x-panel-body id=ext-gen860)ext-all.js (line 65)
ContainerLayout()ext-all.js (line 65)
initComponent(undefined)ext-all.js (line 64)
doLayout()overrides.js (line 72)
initComponent(undefined)ext-all.js (line 64)
doLayout()overrides.js (line 72)
camelFn()ext-all.js (line 14)
getViewWidth()ext-base.js (line 10)
getViewWidth()ext-base.js (line 10)
[Break on this error] this.flot = $.plot($('#' + this.id), _series, this);

Thanks, Marty

kiyoto01
9 Aug 2009, 7:55 AM
Hi Marty

I think the phenomenon tells that the jQuery ('$') is destroyed by any troubles.

In past, I encounted it, but it occurred when I mis-typed the jquery.js path...

But I detect one small point.



getViewWidth()ext-base.js (line 10)
getViewWidth()ext-base.js (line 10)


Do you use ext-base.js, instead of ext-jquery-adapter.js?
I have not tested this code set...

Thanks

moegal
9 Aug 2009, 8:12 AM
Kiyoto,

Let me check the paths. Maybe it is something simple. I am loading both ext-base.js and ext-jquery-adapter.js. Should I only be loading one?

Thanks, Marty

moegal
9 Aug 2009, 2:13 PM
I've got the paths right, not sure why i get the error at this moment. Must be something in one of the other extensions that are loaded.

I will try to narrow down my problem a little more.

Marty

Scorpie
17 Sep 2009, 11:30 PM
kyoto01 or moegal,

Im trying to get cross-domain requests working with the Flot. I`ve seen that jQuery 1.2 supports this feature, however, how can I make this work with the flot implementation?

moegal
19 Sep 2009, 4:12 AM
Scorpie,

Sorry I did not see the post before now. What are you trying to do? Load the data remotely?

I am not sure if I can help but I will try.

Marty

Scorpie
22 Sep 2009, 4:06 AM
Scorpie,

Sorry I did not see the post before now. What are you trying to do? Load the data remotely?

I am not sure if I can help but I will try.

Marty

NP Marty, I already solved it with the ScriptTagProxy. Works like a charm, loading in different URL`s with data :)

Quick question though; I have a store that loads data, I want the chart to be masked/notify the user the data is still loading. How can I go about something like this?

Disabling works, but using a loadmask would be super...

moegal
22 Sep 2009, 1:48 PM
I cheated a little with this and used containerMask. Here is some sample code. Essentially I show the mask beforeload and hide it after load.



var flotExamplestore = new Ext.data.Store({
url: 'includes/home-orders-chart-data.asp',
reader: new Ext.data.JsonReader({
root: 'Records',
fields: ['month', 'items', 'others', 'totals']
})
});

var flotExample = new Ext.ux.BarFlot({
id: 'flotExamplechart',
plugins: [ new Ext.ux.plugins.ContainerMask (
{
msg:'Loading...',
masked:false
}
)],
xaxis: { min: 0, max: 12},
yaxis: { min: 0, max: 10000 },
series: [
{ name: 'items', label: 'Items' },
{ name: 'others', label: 'Items +Addons +Mailshop' },
{ name: 'totals', label: 'Totals' }
]
});
flotExamplestore.on('load', function(store, records, options) {
var data = [];
for (var i = 0; i < records.length; i++) {
data.push(Ext.apply({
label: records[i].data.month
}, records[i].data));
}
var myMaxArray=new Array();
for ( var i=0, len=store.data.items.length; i<len; ++i ){
myMaxArray[i]=parseFloat(store.data.items[i].data.totals);
}
this.yaxis.max = Math.ceil(Math.max.apply(0,myMaxArray))
this.updateData(data);
this.baseRanges = this.getRanges();
this.hideMask();
}, flotExample);
flotExamplestore.on('beforeload', function(store, records, options) {
this.showMask();
}, flotExample);

var flotExamplepanel = new Ext.Panel({
id: 'flotExamplepanel-id',
items:[flotExample],
tbar:[
{
xtype: 'storeautorefresher',
interval: 60,
linkedStore: flotExamplestore
},{
text: 'Refresh',
iconCls: Ext.ux.TDGi.iconMgr.getIcon('database_refresh'),
handler: function(){
flotExamplestore.load({});
}
}
]
})
flotExamplestore.load({});


http://www.extjs.com/forum/showthread.php?t=28894

Let me know if you need any more help.
Marty

Scorpie
30 Sep 2009, 6:26 AM
Thanks Marty, that containermask looks nice.
Did you ever have to extend the Ext.ux.Flot class? I keep getting an error 'flot' is undefined whenever I try to extend one. It only happens whenever the onHover event gets fired. I think im doing something wrong here.



Ext.ns('Dashboard.Chart.Retryjob');

Dashboard.Chart.Retryjob.BarChart = Ext.extend(Ext.ux.Flot, {

createStore: function(){

var retryjobsURL = dataHost + '/DashboardService/monitor/RetryJob/';


var retryJobStore = new Ext.data.Store({
proxy: new Ext.data.ScriptTagProxy({
url: retryjobsURL + 'AVG?contentType=text/javascript',
callbackParam: 'callback',
timeout: 2500,
listeners: {
'exception': function(dataProxy, type, action, options, response, arg){
Ext.Msg.alert('Exception occurred loading data!');
}
}
}),
reader: this.createReader()
});

/*
retryJobStore.on('load', function(store, records, options){

var data = [];
for (var i = 0; i < records.length; i++) {
data.push(records[i].json);
}
this.insertSeries(data);
}, this);

//retryJobStore.load({});
*/
return retryJobStore;
},

createReader: function(){
return new Ext.data.JsonReader({
root: 'Records',
fields: []
})
},


initComponent: function(){


Ext.apply(this, {

id: 'retryJobsChartConfig',
height: 180,
//autoWidth: true,
width: 370,
store: this.createStore(),

bars: {
show: true,
barWidth: 1,
align: "center",
horizontal: false
},
xaxis: {
mode: "time",
timeformat: "%H:%M:%S"
},
colors: ["#426bba"],
series: []

});


Dashboard.Chart.Retryjob.BarChart.superclass.initComponent.apply(this, arguments);

},

onRender: function(){
Dashboard.Chart.Retryjob.BarChart.superclass.onRender.apply(this, arguments);
}


});


Ext.reg('retryjobchartbarchart', Dashboard.Chart.Retryjob.BarChart);



Any thoughts Marty?

Scorpie
1 Oct 2009, 5:36 AM
I cheated a little with this and used containerMask. Here is some sample code. Essentially I show the mask beforeload and hide it after load.



var flotExamplestore = new Ext.data.Store({
url: 'includes/home-orders-chart-data.asp',
reader: new Ext.data.JsonReader({
root: 'Records',
fields: ['month', 'items', 'others', 'totals']
})
});

var flotExample = new Ext.ux.BarFlot({
id: 'flotExamplechart',
plugins: [ new Ext.ux.plugins.ContainerMask (
{
msg:'Loading...',
masked:false
}
)],
xaxis: { min: 0, max: 12},
yaxis: { min: 0, max: 10000 },
series: [
{ name: 'items', label: 'Items' },
{ name: 'others', label: 'Items +Addons +Mailshop' },
{ name: 'totals', label: 'Totals' }
]
});
flotExamplestore.on('load', function(store, records, options) {
var data = [];
for (var i = 0; i < records.length; i++) {
data.push(Ext.apply({
label: records[i].data.month
}, records[i].data));
}
var myMaxArray=new Array();
for ( var i=0, len=store.data.items.length; i<len; ++i ){
myMaxArray[i]=parseFloat(store.data.items[i].data.totals);
}
this.yaxis.max = Math.ceil(Math.max.apply(0,myMaxArray))
this.updateData(data);
this.baseRanges = this.getRanges();
this.hideMask();
}, flotExample);
flotExamplestore.on('beforeload', function(store, records, options) {
this.showMask();
}, flotExample);

var flotExamplepanel = new Ext.Panel({
id: 'flotExamplepanel-id',
items:[flotExample],
tbar:[
{
xtype: 'storeautorefresher',
interval: 60,
linkedStore: flotExamplestore
},{
text: 'Refresh',
iconCls: Ext.ux.TDGi.iconMgr.getIcon('database_refresh'),
handler: function(){
flotExamplestore.load({});
}
}
]
})
flotExamplestore.load({});
http://www.extjs.com/forum/showthread.php?t=28894

Let me know if you need any more help.
Marty

Perfect, works like a charm :)

Scorpie
1 Oct 2009, 6:28 AM
Marty,

i`m trying to extend a Ext.ux.Flot, using a store & a scripttagproxy. I keep getting the error
TypeError: root is undefined.

I have no clue what is happening. Do you have experience with extending one of the Flot classes?

moegal
1 Oct 2009, 11:55 AM
I really don't have a clue. Glad the mask helped. I won't be able to look at it until at least this weekend. This may be something that kiyoto can help with.

Marty

Scorpie
7 Oct 2009, 2:00 AM
Marty,

Im using pure timestamps to generate my charts, and I wish to make the bars fill up nicely to the next tick. Im not explicitly setting my ticks, and I cannot seem to get this filling up right: I keep getting very thin, small bars plotted.

Any suggestions?

moegal
7 Oct 2009, 11:09 AM
what kind of chart are you using? line or bar?

Scorpie
7 Oct 2009, 11:12 AM
A bar, we extend Ext.ux.Flot and use bars: { show: true } .

ChWild
13 Oct 2009, 6:37 PM
Hi there,
first i wanna say it's grate work you did.

I just got al little problem and hope someone can help me.
I'm trying to get some data from a store and wanna put them into a flot.
The x-axis should be a date.




function createGraph(Options){



var MaxEntrys = 10; //1000; // Maximale Anzahl an Eintr├Ągen in Graph


var graph = new Ext.Panel({
title: 'Diagramm'


,id: 'GraphTab' + g_WinID
,width: 600

,height: 480

,layout: 'fit'

,items: [{
xtype: 'flot'
,id: 'flot' + g_WinID

,autoScale: true

,cls: 'x-panel-body'
,hideMode: 'offsets'
,series: []
,crosshair: {mode: "xy"}


,xaxis: {

mode: "time"
,timeformat: "%y-%m-%d h:M:s"//"%d.%m.%y h:M"

}
}]
});

//JSON-STORE
var storURL = Options['DataStore'].url;

var graphStore = GetStore(storURL);

graphStore.addListener('load', function(store, records){DrawLines(store, records,Options);});
graphStore.load({params:{maxEntrys: MaxEntrys}}); //Store laden -> Maximale anzahl begrenzen!



return graph;


}

//Draw flot


function DrawLines(store, records, Options){


var flot = Ext.getCmp('flot' + Options['WinID']); //get Flot



var series = flot.createSeries(store, 'ServerDate')
//var series = flot.createSeries(store, 'ID');


flot.plot(series);


}



The store retrieves following data:
({"total":"29","results":[{"0":"446542","ID":"446542","1":"2009-10-07 04:37:22","ServerDate":"2009-10-07 04:37:22","2":"579","HTO_R1_IW":"579","3":"569","HTO_R2_IW":"569","4":"552","HTO_R3_IW":"552","5":"189","HTO_KZE_IW":"189","6":"580","HTO_R1_SW":"580","7":"570","HTO_R2_SW":"570","8":"550","HTO_R3_SW":"550","9":"1,881481","V_Rollgang":"1,881481..........}]})





But there are no lines shown in the flot (see atachment).
If i'm creating the series with 'ID' the lines are shown.
It must be something wrong with the date but i'm trying different things since a few hours without any solution. ~o)

Thx for help

ChWild
16 Oct 2009, 7:34 PM
Hey there,
i already solved the problem.

Problem was the date. It was not declared as date in the store's configuration.
I had a few problem's with the dateformat but now it's okay.

Scorpie
21 Oct 2009, 5:25 AM
Moegal,

Im trying to plot three series in a canvas; one barflot and 2 line flots, the latter being a max and a min boundary, so they are straight lines.

We use timestamps as ticks, and the barflot is centered in each tick. Whenever I plot the max/min lines, They start half-way the bar-graph.

Basically I want to have one straight line, right trough the canvas, with dynamic ticks. How can I make this?

ricarline
2 Nov 2009, 8:50 AM
hi,

first thanks to for kiyoto01 (http://www.extjs.com/forum/member.php?u=60768) his flot

When I plot series made by 'createSeries()' from a jsonstore i have no problem.
I can load new data without any problems.
But after a zoom or a move in the lineflot if I load new data when I plot it, I have no update of ranges.

thx per advance
(http://www.extjs.com/forum/member.php?u=60768)

nickman
8 Feb 2010, 8:45 PM
Thanks for the code Marty, I tried to get it running but I keep getting an 'types[config.xtype || defaultType] is not a constructor' error on the flot item. If you could zip it up, I could try to see where my code differs from yours.

Hi,Scorpie,I got 'types[config.xtype || defaultType] is not a constructor' error too.

And I use Ext Lib 2.2 .

could you please tell me how to solve this problem? Thanks .

moegal
9 Feb 2010, 9:47 AM
that usually means the extension path is incorrect.

Marty

nickman
9 Feb 2010, 6:21 PM
that usually means the extension path is incorrect.

Marty

Hi, moegal ,I checked the code for serval times and my I did it as the demo ,

still this error.

And the source code extend path like this:

Ext.ux.Flot extend Ext.BoxComponent

Ext.ux.BarFlot extend Ext.ux.Flot


I just want to create a BarFlot : var bar= new Ext.ux.BarFlot({ .... });

geoffd
16 Feb 2010, 1:17 PM
Using this extension with Ext 3.1.0 / jquery 1.4.1 and flot 0.6 and the ext-jquery-adapter.

Everything seems to work nicely but I have a strange error when clicking anywhere in the graphs.

The error is:
this.el.dom is undefined
line 9738 in ext-all-debug

the immediate context around that line:


onEnable : function(){
this.getActionEl().removeClass(this.disabledClass);
this.el.dom.disabled = false;
},


The setup for my flot panels:



Ext.ns('TM.ui.graph');

TM.ui.graph.Base = Ext.extend(Ext.Panel, {
initComponent: function () {
var store = new Ext.data.JsonStore({
url:'/observations/graph',
restful: true,
root: 'series',
fields:['label','data']
});

var flot = new Ext.ux.Flot({
xaxis:{
mode:'time',
timeformat: "%y-%m-%d %H:%M:%S"
},
cls: 'x-panel-body'
});

var devices = this.params.devices;
flot.on('render', function() {
store.load({
params: {
devices: devices
},
callback: function() {
var seriesData = [];

store.each(function(record){
seriesData.push({
label: record.get('label'),
data: record.get('data')
});
});
flot.plot(seriesData);

}
});
});

var config = {
items: flot
};

Ext.apply(this, Ext.apply(this.initialConfig, config));
TM.ui.graph.Base.superclass.initComponent.apply(this, arguments);

this.on('render',function(){
var mask = new Ext.LoadMask(this.getEl(),{
store: store
});
},this,{single: true});
}
});

Ext.reg('TM.ui.graph.Base', TM.ui.graph.Base);


Any ideas?

enpasos
6 Mar 2010, 1:14 PM
Hi kiyoto01, I appreciate your work very much. What are your plans with extflot?

hansl1963
9 Mar 2010, 7:36 AM
Having the same problem as geoffd (http://www.extjs.com/forum/member.php?u=40791).

this.el.dom is undefined
line 9738 in ext-all-debug

This problem does not occure with version 3.0 only with version 3.1+

vtulin
18 Mar 2010, 3:37 AM
The same problem to geoffd...

steve2
8 Apr 2010, 12:15 AM
Just updating this one - solved it.

I used the optional 3rd parameter for a point to define the lower edge.

i.e. [x1,y,x2] will draw from x1 to x2 (at y). Note that I also have my bars going horizontally here - usually you would graph as x and draw from y1 to y2 ([x,y1,y2]).

Evgeny Fisher
2 May 2010, 8:35 AM
Thank you kiyoto01 for the great work with flot extension.
Does anyone aware about Java extension for that library, did somebody implement it?

steve2
10 May 2010, 12:32 AM
Has anyone got pie charts working with mouse hover in IE? I read this was an issue with excanvas, but there were some workarounds, but not sure if this ever got applied to an EXT flotpanel.

i.e. I have something like this:



var chart = new Ext.FlotPanel({ ... build panel with desired options and data ...});

var panel = new Ext.Panel({
width: 'auto',
height: 400,
items: [ chart ]
});

return panel;


And there is no default hovering behaviour happening, nor could I get anything going with defining a tooltip or tooltip function. Has anyone used flot this way and got hovering working with Pies? I only saw an example where you define the xtype as 'flot' and set the tooltip function - what about when creating an Ext.FlotPanel?

Thanks!

enpasos
10 May 2010, 9:13 PM
The chart market on top of canvas is developing fast. Highcharts (http://www.highcharts.com/demo/) has high market momentum and the Highcharts-Adapter (http://www.extjs.com/forum/showthread.php?93669-Highcharts-adapter-and-plugin-for-ExtJS) seams to be active, too. So do Flot and ExtJS. I can not see any development on Ext.ux.Flot. Anyone taking the Ext.ux.Flot role?

pipiet06
18 Jul 2010, 8:02 PM
Hi All..

I'm creating a line chart using Ext.ux.Flot,
but I don't have an idea how to call the jsonStore I've created in the flot.

Here is my jsonStore :


var flotExamplestore = new Ext.data.Store({
url: 'index.php/ed/graph/get_data',
reader: new Ext.data.JsonReader({
root: 'rows',
fields: [
{name: 'negara'},
{name: 'tahun'},
{name: 'value'}
]
})
});
Here is my line chart using Ext.ux.Flot :


items: [{
title: 'Selection',
id: 'selection',
items: [{
id: 'flot-selection',
xtype: 'flot',
lines: { show: true },
points: { show: true },
legend: { noColumns: 2 },
xaxis: { min: 0, max: 12 },
yaxis: { min: 0 },
selection: { mode: "x" },
crosshair: { mode: "x" },
// series: new flotExamplestore()
series: [
{ name: 'negara', label: 'Negara'},
{ name: 'tahun', label: 'Tahun'},
{ name: 'value', label: 'Value'}
]
}]
}]

Can someone help me how to call the jsonStore using this plugin ???


Thanks :)

pipiet06
19 Jul 2010, 12:12 AM
can someone help me...??
show me the code to create a line chart using Ext.ux.flot by getting data from database..

Please..

imnphd
8 Sep 2010, 5:16 AM
Take a look at this one.

http://canvasxpress.org/

Condor
8 Sep 2010, 5:34 AM
Take a look at this one.

http://canvasxpress.org/

Enough! You post this so much I would almost say that you are spamming!

Also, Flot is canvas based, so why would you want to use your product?

imnphd
8 Sep 2010, 5:39 AM
Sorry about the spamming. Take a look, it supports a lot more of charting capabilities than flot

scblue
30 Sep 2010, 2:00 AM
Has anyone successfully exported the charts?
I did it with Canvas2Image but it wouldn't let me export the axis and the labels.
Anyone have any idea how I can do that?

Thanks for any help! ;)

pczeczor
28 Nov 2010, 4:19 AM
I have spent allready a couple of hours on investigating how to add a description to yaxis. Does anyone have an idea how to put it into Ext.ux.Flot chart?

donp
14 Dec 2010, 6:35 AM
I don't kno if this question was asked before, but I didn't see a reply...

Is this UX compatible with Sencha Touch?
I don't know if the ext.core and jQuery libraries are part of Sencha Touch, so I can't tell if this UX will work with Touch.

Thanks,
Don P.

hansl1963
22 Dec 2010, 12:35 PM
Hi everyone,

I like the extjs flot very much. Lots of possibilities
I'm using extflot in my site to display measurands in serveral line-graphs. But I notice that the memory consumation is rising everytime you refresh (F5) the browser window (Firefox 3.6.13). This can go up to serveral hundreds of Mb's until the browser performance is terrible and restart is the only way to clean it up..

Does this ring a bell to anyone? Is there a solution for this problem (garbage collection or someting like that).
By the way, the memory consumation in IE browsers is less (dozens of Mb's)

Greetings, Hans

Juanito
28 Dec 2010, 2:28 PM
@hansl1963: I've experienced this problem. I found the cause to be the fact that $.plot is called every time the screen is resized. Calling $.plot recreates all the HTML and sets up handlers. The problem is that the previous HTML/handlers are not cleaned up. I do not want to post anything here because this thread is already unusable with 21 pages. Message me if you'd like to see my fix.

I modified jquery.flot.js and Flot.js so that resizing does not call $.plot again.



Hi everyone,

I like the extjs flot very much. Lots of possibilities
I'm using extflot in my site to display measurands in serveral line-graphs. But I notice that the memory consumation is rising everytime you refresh (F5) the browser window (Firefox 3.6.13). This can go up to serveral hundreds of Mb's until the browser performance is terrible and restart is the only way to clean it up..

Does this ring a bell to anyone? Is there a solution for this problem (garbage collection or someting like that).
By the way, the memory consumation in IE browsers is less (dozens of Mb's)

Greetings, Hans

harel
22 Jan 2011, 1:36 AM
@Juanito, your fix sounds like it could be useful for many people, myself included. Could you please post it here or in a new thread in the forums?
Much appreciated,
Harel

rowebdev
5 Apr 2011, 1:48 PM
Hello,

I'm searching for a solution to print some textboxes(near the points; like it is the point tooltip, but to be printed all time, not only on hover) on chart. Any suggestions are welcome. Many thanks!

SpinoWeb
9 Apr 2011, 5:37 PM
I have series from two store. When I try to plot both in the same graph I see just the data of last store.

my code:

store1.on('load', function(store, records, options) {
var series = this.createSeries(store, 'x');
this.plot(series);
}, flot);

store2.on('load', function(store, records, options) {
var series = this.createSeries(store, 'x');
this.plot(series);
}, flot);


How can I plot both series of data in the same graph?

SpinoWeb
10 Apr 2011, 12:56 AM
How can I plot both series of data in the same graph? I use an ajax request:


var Obj2Flot = function(obj) {
var srs = [];
for(var i = 0; i < obj.length; i++){
srs.push([ obj[i].x, obj[i].y ]);
}
//console.log(srs);
return srs;
};

var doSecFChart = function(){
//status bar
WrStBar('Drawing...');

//input
var xyG = Ext.getCmp('xyGrid');
var vertex = new Array();
xyG.store.each(function(rec){ // go through all the records
//id = rec.get('id');
vertex.push(rec.data)
});

var rbG = Ext.getCmp('rbGrid');
var rebars = new Array();
rbG.store.each(function(rec){ // go through all the records
rebars.push(rec.data)
});

//ajax
Ext.Ajax.request({
url : 'draw.php',
params : {vertex: Ext.encode(vertex), rebars: Ext.encode(rebars)},
success : function(response) {
var result = Ext.decode(response.responseText);
var points = result.points; //console.log(points);
var rebars = result.rebars;

var c = Ext.getCmp('secFChart');
var flot_id = c.findByType('flot')[0];

//var ptS = flot_id.createSeries(points, 'x'); //console.log(ptS);
//var rbS = flot_id.createSeries(rebars, 'x');

var series = [{
label : 'points'
,data : Obj2Flot(points)
,lines : { show: true }
,points : { show: true }
,color : '#369'
},{
label : 'rebars'
,data : Obj2Flot(rebars)
,points : { show: true }
,color : '#f00'
}];

flot_id.plot(series);
flot_id.baseRanges = flot_id.getRanges();
}
});
};

var secFChart = new Ext.Panel({
title : 'Section',
width : 400,
height : 400,
id : 'secFChart',
bbar : [{
tooltip : 'Draw',
iconCls : 'silk-chart-curve',
handler : doSecFChart
}, '-'],
items : [{
xtype : 'flot',
cls : 'x-panel-body',
legend : {show: false},
grid : {backgroundColor: '#fff'},
series : []
}]
});I obtain 25566
I don't understand why in the second series 'lines' is show, I'd want just points. The 'color' option is correctly plotted for both series (curve 'points' is blue and curve 'rebars' is red), but for options 'lines' and 'points' the flot return the same result.
I hope to have been clear with my poor english :)

huucongit
16 Jun 2011, 11:59 PM
Hi everyone.
I want to draw a pie chart 3D in extjs 4.0 and I don't know Flot can be used in 4.0
sorry for my poor English.
thanks for reading