Ext.ux.chart.SmartLegend - Multi-column self adjusting Chart Legend

[nohuhu]

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]

Would love to see the chart package handle this natively but now we have this! Great job!

[nohuhu]

Well, I said commercial licensing is available. Make me an offer. ;)

Regards,
Alex.

[mitchellsimoens]

How about $5 USD?

[nohuhu]

Mitchell,

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

Regards,
Alex.

[nohuhu]

Version 0.99 supports Ext JS 4.1.

[fordprefect]

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]

Does this work with v4.2?

[nohuhu]

@jchau I haven't tested it yet but it should work.

Regards,
Alex.

[jchau]

I tried it and it works great. Thanks!

[nohuhu]

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]

Can you give me the demo for working with column chart using SmartLegend.... Please!!

[Jeegnesh]

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]

OK I solved out

[Jeegnesh]

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]

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