Hybrid View

  1. #1
    Sencha - Ext JS Dev Team
    Join Date
    Jun 2011
    Location
    San Diego, CA
    Posts
    199
    Vote Rating
    38
    nohuhu has a spectacular aura about nohuhu has a spectacular aura about

      0  

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

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


    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:
    Screen shot 2011-11-20 at 8.21.06 PM.png

    And this:
    Screen shot 2011-11-20 at 8.33.39 PM.png

    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.
    Last edited by nohuhu; 14 Aug 2012 at 3:15 PM. Reason: Added demo link

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,220
    Vote Rating
    859
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Would love to see the chart package handle this natively but now we have this! Great job!
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha - Ext JS Dev Team
    Join Date
    Jun 2011
    Location
    San Diego, CA
    Posts
    199
    Vote Rating
    38
    nohuhu has a spectacular aura about nohuhu has a spectacular aura about

      0  

    Default


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

    Regards,
    Alex.

  4. #4
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,220
    Vote Rating
    859
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    How about $5 USD?
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  5. #5
    Sencha - Ext JS Dev Team
    Join Date
    Jun 2011
    Location
    San Diego, CA
    Posts
    199
    Vote Rating
    38
    nohuhu has a spectacular aura about nohuhu has a spectacular aura about

      0  

    Default


    Mitchell,

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

    Regards,
    Alex.

  6. #6
    Sencha - Ext JS Dev Team
    Join Date
    Jun 2011
    Location
    San Diego, CA
    Posts
    199
    Vote Rating
    38
    nohuhu has a spectacular aura about nohuhu has a spectacular aura about

      0  

    Default


    Version 0.99 supports Ext JS 4.1.

  7. #7
    Sencha User Daniil's Avatar
    Join Date
    Jun 2010
    Location
    Saint-Petersburg, Russia
    Posts
    974
    Vote Rating
    110
    Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all

      0  

    Default


    I just tried it. Works nicely! The only thing I didn't admit is:
    Code:
    chart.legend.redraw(); 
    chart.redraw();
    in the Demo.

    I would use it like this:
    Code:
    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
        });
    });
    Ext.NET - ASP.NET for Ext JS
    MVC and WebForms
    Examples | Twitter

  8. #8
    Sencha - Ext JS Dev Team
    Join Date
    Jun 2011
    Location
    San Diego, CA
    Posts
    199
    Vote Rating
    38
    nohuhu has a spectacular aura about nohuhu has a spectacular aura about

      1  

    Default


    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.

  9. #9
    Sencha User Daniil's Avatar
    Join Date
    Jun 2010
    Location
    Saint-Petersburg, Russia
    Posts
    974
    Vote Rating
    110
    Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all

      0  

    Default


    Hi @nohuhu,

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

    You meant that I should write something like this:
    Code:
    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?
    Ext.NET - ASP.NET for Ext JS
    MVC and WebForms
    Examples | Twitter

  10. #10
    Sencha - Ext JS Dev Team
    Join Date
    Jun 2011
    Location
    San Diego, CA
    Posts
    199
    Vote Rating
    38
    nohuhu has a spectacular aura about nohuhu has a spectacular aura about

      1  

    Default


    @Daniil,

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

    PHP Code:
    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 answer for more explanations.

    Regards,
    Alex.