1. #1
    Sencha User
    Join Date
    Oct 2011
    Posts
    5
    Vote Rating
    0
    kn21069 is on a distinguished road

      0  

    Default Unanswered: Bar chart legend issues

    Unanswered: Bar chart legend issues


    What's the best way to get a simple bar chart to show a legend? I noticed that when I was using the legend on a bar chart that it would only give one item for the legend.

    http://i43.tinypic.com/2u4r8kx.png

    I was able to get it to work correctly with a stacked and group charts fairly easily. Also, the pie chart worked with the same data the bar chart was using.

    http://i44.tinypic.com/j74tvm.png

    From what I've read in the docs, it said that the legend is tied to the series of the chart. After working with that for a while and not finding a way to make it work, it made me wonder if it was even possible to get the bar chart legend to work like the pie chart one using the same data store.


    Here is a sample code of the bar chart with a legend, I kept it simple so it wouldn't have too many distractions in it.

    Code:
    Ext.onReady(function() {
        Ext.define('testModel', {
            extend: 'Ext.data.Model',
            fields: [
                {name: 'names', type: 'string'},
                {name: 'sleep',    type: 'int'},
            ]
        });
        
        var store = Ext.create('Ext.data.Store', {
            model: 'testModel',
            data: [
                {'names': 'Tom', 'sleep': '5'},
                {'names': 'Bob', 'sleep': '7'},
                {'names': 'Steve', 'sleep': '8'},
                {'names': 'Eric', 'sleep': '9'},
                {'names': 'Ed', 'sleep': '8'}
            ]
        });
        
        Ext.create('Ext.panel.Panel', {
            height: 400,
            width: 500,
            frame: true,
            renderTo: Ext.getBody(),
            items: [{
                height: 400,
                width: 500,
                xtype: 'chart',
                store: store,
                legend: {
                    position: 'right'
                },
                axes: [{
                    type: 'Category',
                    position: 'left',
                    fields: 'names',
                    title: 'Friends'
                }, {
                    type: 'Numeric',
                    position: 'bottom',
                    fields: 'sleep',
                    title: 'Hours of Sleep',
                    grid: true,
                    minimum: 0
                }],
                series: [{
                    showInLegend: true,
                    type: 'bar',
                    axis: 'bottom',
                    xField: 'names',
                    yField: 'sleep'
                }]
            }]
        });
    });
    If you have any advice or ideas on how I can get it to act like the pie chart one I'd appreciate it.


    Thanks

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,647
    Vote Rating
    899
    Answers
    3575
    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


    This is showing one for me (edited the Bar Chart example)

    Code:
    var win = Ext.create('Ext.Window', {
            width: 800,
            height: 600,
            minHeight: 400,
            minWidth: 550,
            hidden: false,
            maximizable: true,
            title: 'Bar Chart',
            renderTo: Ext.getBody(),
            layout: 'fit',
            tbar: [{
                text: 'Reload Data',
                handler: function() {
                    store1.loadData(generateData());
                }
            }],
            items: {
                id: 'chartCmp',
                xtype: 'chart',
                animate: true,
                shadow: true,
                store: store1,
                legend : {
                    position: 'right'
                },
                axes: [{
                    type: 'Numeric',
                    position: 'bottom',
                    fields: ['data1'],
                    label: {
                        renderer: Ext.util.Format.numberRenderer('0,0')
                    },
                    title: 'Number of Hits',
                    grid: true,
                    minimum: 0
                }, {
                    type: 'Category',
                    position: 'left',
                    fields: ['name'],
                    title: 'Month of the Year'
                }],
                theme: 'White',
                background: {
                  gradient: {
                    id: 'backgroundGradient',
                    angle: 45,
                    stops: {
                      0: {
                        color: '#ffffff'
                      },
                      100: {
                        color: '#eaf1f8'
                      }
                    }
                  }
                },
                series: [{
                    type: 'bar',
                    axis: 'bottom',
                    highlight: true,
                    tips: {
                      trackMouse: true,
                      width: 140,
                      height: 28,
                      renderer: function(storeItem, item) {
                        this.setTitle(storeItem.get('name') + ': ' + storeItem.get('data1') + ' views');
                      }
                    },
                    label: {
                      display: 'insideEnd',
                        field: 'data1',
                        renderer: Ext.util.Format.numberRenderer('0'),
                        orientation: 'horizontal',
                        color: '#333',
                      'text-anchor': 'middle'
                    },
                    xField: 'name',
                    yField: ['data1']
                }]
            }
        });
    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 User
    Join Date
    Oct 2011
    Posts
    5
    Vote Rating
    0
    kn21069 is on a distinguished road

      0  

    Default


    Thanks for the reply mitchellsimoens. I took a look at that and it's showing only 1 item, "data1", for the legend.

    http://i41.tinypic.com/jf8a5l.png

    What I was hoping to get was the multiple items from the chart to show up in the legend. Such as having all the months as a separate item in the legend instead of one that will show or hide all of the data. Similar to how the group chart does it but on a smaller scale. Is it possible to make a bar chart like that without having to use the group chart method? This is an example of what I'm trying to accomplish.

    http://i43.tinypic.com/4uuhp2.png

    This is what I had to do to get that. Is there a better way to get similar results?

    Code:
    Ext.onReady(function() {
        Ext.define('testModel', {
            extend: 'Ext.data.Model',
            fields: [
                {name: 'label', type: 'string'},
                {name: 'Tom',   type: 'int'},
                {name: 'Bob',   type: 'int'},
                {name: 'Steve', type: 'int'},
                {name: 'Eric',  type: 'int'},
                {name: 'Ed',    type: 'int'},
            ]
        });
        
        var store = Ext.create('Ext.data.Store', {
            model: 'testModel',
            data: [{
                'label':'Friends',
                'Tom':   '5',
                'Bob':   '7',
                'Steve': '8',
                'Eric':  '9',
                'Ed':    '8'
            }]
        });
        
        Ext.create('Ext.panel.Panel', {
            height: 400,
            width: 500,
            frame: true,
            renderTo: Ext.getBody(),
            items: [{
                height: 400,
                width: 500,
                xtype: 'chart',
                store: store,
                legend: {
                    position: 'right'
                },
                axes: [{
                    type: 'Category',
                    position: 'left',
                    fields: 'label',
                    title: 'Friends'
                }, {
                    type: 'Numeric',
                    position: 'bottom',
                    fields: ['Tom', 'Bob', 'Steve', 'Eric', 'Ed'],
                    title: 'Hours of Sleep',
                    grid: true,
                    minimum: 0
                }],
                series: [{
                    showInLegend: true,
                    type: 'bar',
                    axis: 'bottom',
                    xField: 'label',
                    yField: ['Tom', 'Bob', 'Steve', 'Eric', 'Ed'],
                }]
            }]
        });
    });

  4. #4
    Sencha User
    Join Date
    Jun 2012
    Posts
    1
    Vote Rating
    0
    neha-sardana is on a distinguished road

      0  

    Default


    I am facing the same issue with the bar chart. Any answers or any workaround possible for this?

Thread Participants: 2

Tags for this Thread