PDA

View Full Version : How to create a chart with expandable bars



Garima Verma
11 Feb 2014, 9:28 PM
Hi,

I want bars of a chart to be expandable.
Can I implement this using bar chart,if yes,then how to do the same?
If no, then which chart I need to use to make the bars expandable with what configs to be used for the same.

scottmartin
12 Feb 2014, 7:04 AM
Can you explain this a little more?

Do you want to select with mouse and resize, or double click and have it expand .. or do you mean to zoom in on the chart?

Garima Verma
12 Feb 2014, 7:37 PM
I want to select with mouse and resize it from left and right by stretching it from left or right directions.

FatihBekdemir
13 Feb 2014, 12:01 AM
Having same issue, i need to create expandable bars. When i tap it or clicked it to the bar, it should expand and shows it's container & datas etc. How can we do that ? We need quick update for that if not exist in current version of Sencha Architect

scottmartin
13 Feb 2014, 7:51 AM
@Garima: We so not have DnD support for resizing the bars at this time.

@FatihBekdemir: This sounds like you want to have drill down? You can just use store.loadData(newData) to redraw the chart or open a new container. If this is not what you meant, please provide more info.

FatihBekdemir
13 Feb 2014, 8:30 AM
@Garima: We so not have DnD support for resizing the bars at this time.

@FatihBekdemir: This sounds like you want to have drill down? You can just use store.loadData(newData) to redraw the chart or open a new container. If this is not what you meant, please provide more info.

What i need to create when i say expandable bars is something like that;
47917

scottmartin
13 Feb 2014, 8:38 AM
So an accordion layout:
http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.layout.container.Accordion
http://docs.sencha.com/extjs/4.2.1/extjs-build/examples/build/KitchenSink/ext-theme-neptune/#layout-accordion

FatihBekdemir
14 Feb 2014, 7:34 AM
Thanks but i still couldnt figure it out. Should i use Panel or Container to build expandable bars ?

scottmartin
14 Feb 2014, 7:45 AM
The accordion is just a layout, so per the example in the API (first link) it uses a panel. You could use 'Ext.container.Container' as well.
The rest is just config and then you have the items that are the expandable panels in the main panel

Paste the following code in our fiddle at RUN
https://fiddle.sencha.com/#home



Ext.application({
name : 'Fiddle',

launch : function() {

Ext.create('Ext.panel.Panel', { // or Ext.container.Container
title: 'Header',
width: 300,
height: 300,
defaults: {
// applied to each contained panel
bodyStyle: 'padding:15px'
},
layout: {
// layout-specific configs go here
type: 'accordion',
titleCollapse: false,
animate: true,
// activeOnTop: true
},

dockedItems: [{
xtype: 'toolbar',
dock : 'top',

items: [{
text: 'Menu'
}]

}],
items: [{
title: 'Panel 1',
html: 'Panel content!'
},{
title: 'Panel 2',
html: 'Panel content!'
},{
title: 'Panel 3',
html: 'Panel content!'
}],
renderTo: Ext.getBody()
});

}
});

FatihBekdemir
16 Feb 2014, 12:52 AM
Thanks for the instructions. It looks very simple but my problem is, both my panel and my container 's layout settings dont have an option for accordion. There are only "card,default,fit, hbox and vbox" inside the list. Should i add a plugin or add on to see accordion ?

scottmartin
16 Feb 2014, 8:27 AM
Which version of Architect? When I select panel/Layout I see:
absolute
accordion
auto
border
card
column
fit
hbox
table
vbox

FatihBekdemir
16 Feb 2014, 8:30 AM
I'm using;Sencha Architectversion: 3.0.2.1375 channel: 3.0.1- stableplatform: 1.3.0.795 cmd: 4.0.1.45 framework: Sencha Touch 2.3.x

scottmartin
16 Feb 2014, 9:04 AM
You realize this is the ExtJS forum?

For touch, you can have a look at the following UX's

https://github.com/mitchellsimoens/Ux.layout.Accordion
https://github.com/kawanoshinobu/Ext.ux.AccordionList

FatihBekdemir
16 Feb 2014, 9:07 AM
Nope, sorry about that. I'm checking your links. Thanks a lot