PDA

View Full Version : Ext.ux.chart.SmartLegend - Multi-column self adjusting Chart Legend



nohuhu
20 Nov 2011, 8:49 AM
Stock Ext JS Chart Legend is not very usable for charts with many Series points, which happens quite often. This class implements a Legend that will adjust itself to Chart dimensions to avoid ugly-looking charts.

It looks like this:
29426

And this:
29427

Legend can be placed at top, bottom, left or right edge, with Chart adjusting its size accordingly. Legend items sizes are based on font used for item titles.

Usage is very easy; in fact SmartLegend was intended a drop-in replacement for stock Legend class. See demo application for details.

Source code is released under GPL 3.0 on Github: https://github.com/nohuhu/Ext.ux.chart.SmartLegend. Commercial licensing is also available.

Live demo: http://nohuhu.org/demos/demo_smartlegend.html

Sencha Market page: https://market.sencha.com/users/30/extensions/59

Regards,
Alex.

mitchellsimoens
20 Nov 2011, 1:15 PM
Would love to see the chart package handle this natively but now we have this! Great job!

nohuhu
21 Nov 2011, 6:11 AM
Well, I said commercial licensing is available. Make me an offer. ;)

Regards,
Alex.

mitchellsimoens
2 Dec 2011, 8:27 AM
How about $5 USD?

nohuhu
2 Dec 2011, 10:05 AM
Mitchell,

You mean $5 per copy? I'll throw TitleChart in for $7 and call it a deal. What say you?

Regards,
Alex.

nohuhu
14 Aug 2012, 3:14 PM
Version 0.99 supports Ext JS 4.1.

fordprefect
27 Aug 2012, 1:48 PM
Hi,

Thanks for this, looks great. I did want to mention that if the legend item text is long the top and bottom positions don't show the legend items entirely (having the legend right/left works fine):

38289

Cheers.

jchau
5 Apr 2013, 7:58 AM
Does this work with v4.2?

nohuhu
8 Apr 2013, 3:19 PM
@jchau I haven't tested it yet but it should work.

Regards,
Alex.

jchau
8 Apr 2013, 6:55 PM
I tried it and it works great. Thanks!

nohuhu
8 Apr 2013, 7:07 PM
Cool. Note that Ext.ux.Legend and Ext.ux.LegendItem overrides are not needed with 4.2 - that code is already in the framework.

Regards,
Alex.

Jeegnesh
27 Apr 2013, 10:50 PM
Can you give me the demo for working with column chart using SmartLegend.... Please!!

Jeegnesh
27 Apr 2013, 11:04 PM
i'm trying to use smart legend in column chart, but it's not working
can you give me the demo to use SmartLegend in column chart
please help me!

Jeegnesh
29 Apr 2013, 9:25 PM
OK I solved out

Jeegnesh
30 Apr 2013, 1:26 AM
not work for me, just see it...
My code Like this

me.chart = new Ext.create('Ext.chart.Chart', {
width: me.width, height: me.height,
store: chartStore, animate: me.animate,
shadow: me.shadow,
legend: true,
backGround: me.backGround,
axes: me.axes, series: me.series
});

legend = me.chart.legend = new Ext.create('Ext.ux.chart.SmartLegend', {
position: 'bottom',
chart: me.chart,
rebuild: true,
boxStrokeWidth: 1
});


me.chart.legend.redraw();
me.chart.redraw();

then it give me error of

Microsoft JScript runtime error: Unable to get value of the property 'add': object is null or undefined

on this line

box = me.boxSprite = me.chart.surface.add(Ext.apply({ . .of ext-all-debug.js file:-/

Jeegnesh
1 May 2013, 10:36 PM
Problem arrives in SmartLegend

My code Like this

me.chart = new Ext.create('Ext.chart.Chart', {
width: me.width, height: me.height,
store: chartStore, animate: me.animate,
shadow: me.shadow,
legend: true,
backGround: me.backGround,
axes: me.axes, series: me.series
});

legend = me.chart.legend = new Ext.create('Ext.ux.chart.SmartLegend', {
position: 'bottom',
chart: me.chart,
rebuild: true,
boxStrokeWidth: 1
});


me.chart.legend.redraw();
me.chart.redraw();

then it give me error of

MicrosoftJScript runtime error: Unable to get value of the property'add':objectisnullorundefined

on this line

box = me.boxSprite = me.chart.surface.add(Ext.apply({ . .of ext-all-debug.js file:-/

JEEGNESH
INDIA

jchau
2 Jul 2013, 6:50 AM
SmartLegend no longer works with ExtJS 4.2.1 . I get a bunch of


SVG4601: SVG Path data has incorrect format and could not be completely parsed.

Any tips to resolve this? Slightly annoyed this isn't part of the native ExtJS code....

jchau
2 Jul 2013, 7:35 AM
Fixed this.

In SmartLegend.alignItems, change



var maxWidth = dim.maxWidth,
maxHeight = dim.maxHeight,
totalWidth = dim.totalWidth,
totalHeight = dim.totalHeight,
spacing = dim.spacing;


to



var maxWidth = dim.maxWidth,
maxHeight = dim.maxHeight,
totalWidth = dim.totalWidth,
totalHeight = dim.totalHeight,
spacing = itemSpacing;

nohuhu
2 Jul 2013, 9:19 AM
SmartLegend hasn't been updated to 4.2.1 yet.

Regards,
Alex.

Daniil
13 Jan 2014, 5:12 AM
I just tried it. Works nicely! The only thing I didn't admit is:

chart.legend.redraw();
chart.redraw();
in the Demo.

I would use it like this:

Ext.chart.Chart.prototype.initComponent = Ext.Function.createSequence(Ext.chart.Chart.prototype.initComponent, function() {
this.legend = Ext.create('Ext.ux.chart.SmartLegend', {
position: 'right',
chart: this,
rebuild: true,
boxStrokeWidth: 1
});
});

nohuhu
13 Jan 2014, 9:41 AM
Daniil,

Is there any compelling reason to use prototype munging instead of the normal class inheritance model? I don't see any, and you shouldn't, too.

Regards,
Alex.

Daniil
13 Jan 2014, 7:42 PM
Hi @nohuhu,

I think it is my bad habit, thank you for pointing that out.

You meant that I should write something like this:

Ext.chart.Chart.override({
initComponent: function() {
this.callParent();
this.legend = Ext.create('Ext.ux.chart.SmartLegend', {
position: 'right',
chart: this,
rebuild: true,
boxStrokeWidth: 1
});
}
});
or create a new class inheriting from Chart, right?

nohuhu
14 Jan 2014, 10:37 AM
@Daniil,

Not exactly. To override a stock class, use Ext.define instead:



Ext.define('MyOverrides.chart.Chart', {
override: 'Ext.chart.Chart',
...
});


This will allow you to take advantage of the class system, dynamic loading and Sencha Cmd build process. However, the preferred way to reuse the code is class inheritance. See my Stackoverflow (http://stackoverflow.com/questions/18249715/steps-to-overriding-sencha-extjs-standard-component-functionality-ext-tree-pane/18281965#18281965) answer for more explanations.

Regards,
Alex.

Daniil
14 Jan 2014, 8:21 PM
Oh, I see the Ext.Base.override method is marked as deprecated. Thank you, Alex.

Also thank you for the Stackoverflow link. It was worth to read!

dedarshan
19 Feb 2014, 5:44 AM
Hi, I have implemented smart legend in ext.net mvc application this legend does not get rendered fine in IE 11.

Any help would be gr8

Please find the below image:

47972