View Full Version : Resizable Container to hold Chart Component

16 Feb 2011, 3:27 AM
I need to be able to place the charts I am making for my spreadsheet project (http://www.aztec-online.com/spreadsheet) so that I can render them to the grid, having all the data indepedent to the window, so it is easier to save the data on the sheet.

What I think I want to do is extend a container or Ext.Resizable to be passed a chart object (with data store) and it will be added to a container/element which can be resized and dragged about over the top of the spreadsheet.

Any suggestions on the best way to do this?


16 Feb 2011, 4:45 AM
I had a rethink and maybe I am over complicating it. I dont think I even need to extend and create my own custom component. I think that I could get my chart that I can rendered from spreadsheet data. That all works ok, needs some tweaks buts ok.

Next I want to attach that chart to a element somehow

Then Create a Resizable and pass the element with the chart on it.

That could be my plan of action, and obviously I would append the element to the correct div on my spreadsheet.

17 Feb 2011, 1:23 AM
Does anyone have any ideas? I am desperately working on this at the moment but could use an outside opinion

17 Feb 2011, 2:40 AM
The chart should be rendered to the grid scroller and not to a row or cell and be positioned absolutely.

ps. The current chart implementation uses Flash and some browsers don't handle Flash positioning and resizing very well.

17 Feb 2011, 3:48 AM
I will be using the new ExtJs 4 Charts when its been released.

I will be adding to the scroller, I have done the same thing for my selection cover. But I am struggling with getting the chart to be attached to an element.

How would you go about putting the chart onto a container/element etc then add that to the scroller and then make it draggable. (Resize no as important)

17 Feb 2011, 5:34 AM
In Ext4 you can make any component draggable by configuring it with draggable:true.

What exactly do you mean by 'putting the chart onto a container/element'?

17 Feb 2011, 7:32 AM
What I mean is that I have created the chart, the store, the axis etc. But I want to be able to just have the rendered chart sat ontop of my spreadsheet. So that it will remain there, and so that I can save it and when the spreadsheet is reloaded it will remain there.

I am going to save it by sending data for the grid store, grid columns, formula store and now some kind of chart store to the server. Then when I intialise the grid it will load from the server, if not then a new spreadsheet.

What I want to do is like the images below:


17 Feb 2011, 8:45 AM
I assume that you thought about how you want to store the chart configuration with the spreadsheet data?

You would have to write something like a grid plugin that would create the chart(s) from extra data in the store after the grid has loaded.

17 Feb 2011, 9:29 AM
Yes, I am planning on putting a listener on the grid when it has finished rendering, then call a function that will render and position the charts. Which will be in a "chartStore" on my grid.

This will contain the chart + chart data, width and height, x and y. I assume that this is all I am going to need to get it to display correctly.

I think I may have to extend the resizable object so that when I resize or move the element, it will update my store as well. Or at the end get all the locations and dimentions.

18 Feb 2011, 12:10 AM
Do you want the chart absolutely positioned (x, y) or aligned to a specific cell (row, col)?

18 Feb 2011, 1:09 AM
X and Y, i just want it to glide over the top of the grid itself, not attached to it.

18 Feb 2011, 1:18 AM
Then your current solution to render to the scroller and position it at (x, y) is fine.