PDA

View Full Version : Show / hide labels on maximize / restore



ben.gillis
8 Feb 2012, 8:48 AM
On maximize, the labels in a bar chart need to be shown. Then, when restored to original size they need to be hidden.

Label is listed under configs for a series, but I have not found a programmatic way to either add/remove the labels or hide/show them.

mitchellsimoens
8 Feb 2012, 8:54 AM
This may work... you may have to set the property and then have the chart redraw the chart.

ben.gillis
8 Feb 2012, 9:02 AM
I've tried the series.drawSeries (http://docs.sencha.com/ext-js/4-0/#!/api/Ext.chart.series.Bar-method-drawSeries)() but got a method not defined.

I'm attempting this in the 'maximize' event and tried various things using the documentation and the debugger. No luck thus far. In the maximize event, I have the window and digging into it via the debugger couldn't get to the series/label without this:

window.items.items[0].series.drawSeries();

Messy.

And, I'm not sure if doLayout is sufficient and/or I have to redraw the series???

Any code or clues most appreciated.

'maximize': function (window, eOpts) {

// ... add labels to series, then hope doLayout and/or redrawing the series works, but no luck...


window.doLayout();
window.items.items[0].series.drawSeries(); // Only way I found how to get to it using the debugger
}

ben.gillis
8 Feb 2012, 9:12 AM
How?

mitchellsimoens
8 Feb 2012, 9:14 AM
Try redraw on the chart

ben.gillis
8 Feb 2012, 9:25 AM
The chart redraw I can do.

But, how to add / remove labels on-the-fly as the window the chart is in is maximized / restored using a handle to the window in the maximize/restore events? i.e. some points on APIs, whatever would be most helpful.

(Yes, I am looking at the doc, too. And, digging into it via a debugger. But, it's not so obvious / intuitive as e.g. myChart.Labels.Add(...) or myChart.Labels.Remove(...). ).

ben.gillis
8 Feb 2012, 1:02 PM
hello?

ben.gillis
22 Feb 2012, 3:55 PM
I never got any answer to this, what should seem to be both intuitive and simple.

- Dynamically hide/show the labels on a chart.

if I put a button in a tbar on a window, and have a chart inside that window. I want to toggle the labels ON/OFF via that button.

The window is created first.

Then an items object of type 'chart' added to the window via myWindow.add(items).

Now the real fun begins:

(a) how can I reference the chart inside the window? (I can't use the config 'id', because multiple instances would create multiple id's, no?)

(b) I can go digging into Sencha's framework w/ jQuery, but that seems odd. Why not something simple like myWindow.chart[0].labels.show() or .hide()?

Here's my tbar button event handler (that doesn't work, but built from debugging it):

handler: function () {
...._bLabels = !_bLabels;
.....var c = _myWindow.getComponent(0); // Not really good, who says index '0' will always be the chart?
.....if (_bLabels) {
........c.series.items[0].labelsGroup.show();
.....}
....else {
.........c.series.items[0].labelsGroup.hide(); // Nothing happens
....}
....c.redraw(); // Nothing happens
}

Does anyone have a way to do this seemingly 'hello, world!' usage scenario with a chart in a window? This seems like it should be a no-brainer OO API: myWindow.charts['nameOfChart'].labels.hide() or .show() then .redraw().