Wait! Looks like we don't have enough information to add this to bug database. Please follow this template bug format.
  1. #1
    Sencha User
    Join Date
    Feb 2011
    Posts
    5
    Vote Rating
    0
    John O Donovan is on a distinguished road

      0  

    Default Ext bar series chart lengths

    Ext bar series chart lengths


    I have two bar charts each having two series. The values used are

    Object { range1=66, range2=34} // displays with normal length Object { range1=19, range2=81} // displays at about 60% normal length
    both add up to 100, so I would expect the total length of the bar to be the same

    Code:
    createChart: function() {
           // I call a function here to get the data
           // For these purposes we can use
          // 
         rangeData = {};
         rangeData.range1  = 19;
         rangeData.range2  = 81;
    
            if (rangeData === null) {
                console.log("no data usable for chart");
                return null;
            }
    
            var store = Ext.create('Ext.data.JsonStore', {
                fields: ['range1', 'range2'],
                data: rangeData ,
                clearOnPageLoad: false
            }),
                capacityColors = ['#8CBA32', '#068EE3'],
                chart = Ext.create('Ext.chart.Chart', {
                    xtype: 'chart',
                    animate: true,
                    shadow: false,
                    store: store,
                    width: this.chartWidth,
                    height: 50,
                    series: [{
                        type: 'bar',
                        axis: 'bottom',
                        gutter: 0,
                        yField: ['range1', 'range2'],
                        renderer: function(sprite, record, attr, index, store) {
                            var colour = '';
                            switch (index) {
                            case 0:
                                colour = capacityColors[0];
                                break;
                            case 1:
                                colour = capacityColors[1];
                                break;
                            }
                            return Ext.apply(attr, {
                                fill: colour
                                //radius: 5 //adds a border radius of 5px to all corners of all items in the stack, which isn't what we need.
                            });
                        },
                        stacked: true
                    }]
                });
            return chart;
        },
    The problem is that I have a number of these charts on the page, and for most the length is fine, but sometimes the chart is rendered at about 60% of normal length.

    In Firefox I am unable to attach the images. It will be obvious enough when you run the code.
    This happens using the latest version of Firefox and chrome and IE.
    I am using Ext JS 4.1
    Build date: 2012-10-25 15:13:53 (240477695016a85fb9ed1098fd5f8e116327fcc3)

    Please let me know if this is desired behavior and not a bug

    Best Regards

    John
    Last edited by John O Donovan; 4 Dec 2012 at 7:45 AM. Reason: fix typo

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


    Can I get a test case to reproduce the issue you are reporting?
    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
    Feb 2011
    Posts
    5
    Vote Rating
    0
    John O Donovan is on a distinguished road

      0  

    Default Working test

    Working test


    Please find a working version.
    I would have expected both charts to have the same length as they have the same total data. I really need to be able to ensure that they have the same length, as I display multiple charts on the page.

    Let me know if you want me to submit in the format specified.

    I am using the ext-all from ext 4.1.3, Build date: 2012-10-25 15:13:53 (240477695016a85fb9ed1098fd5f8e116327fcc3)

    This happens on all browsers.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <!-- ExtJS -->
    <link rel="stylesheet" type="text/css" href="ext-all.css" />
    <script type="text/javascript" src="ext-all.js"></script>
    
    <script>
    
        function createPanel() {
            var data1 = {};
            data1.range1 = 20;
            data1.range2 = 80;
    
            var data2 = {};
            data2.range1 = 50;
            data2.range2 = 50;
    
            var firstStore = new Ext.data.JsonStore({
                fields : [ 'range1', 'range2' ],
                data : data1
            });
    
            var secondStore = new Ext.data.JsonStore({
                fields : [ 'range1', 'range2' ],
                data : data2
            });
    
            Ext.create("Ext.panel.Panel", {
                renderTo : 'divchart',
                defaults : {
                    xtype : 'chart',
                    width : 400,
                    height : 50,
                    series : [ {
                        type : 'bar',
                        axis : 'bottom',
                        gutter : 0,
                        yField : [ 'range1', 'range2' ],
                        stacked : true
                    } ]
                },
                items : [ {
                    store : firstStore
                }, {
                    store : secondStore,
                }
    
                ]
            });
        }
    </script>
    
    </head>
    
    <body onLoad="createPanel();">
        <div id="divchart" style="width: 500px; height: 300px;"></div>
    </body>
    
    </html>

  4. #4
    Sencha User
    Join Date
    Feb 2011
    Posts
    5
    Vote Rating
    0
    John O Donovan is on a distinguished road

      0  

    Default


    REQUIRED INFORMATION


    Ext version tested:
    • Ext 4.1.3


    Browser versions tested against:
    • ____
    • IE9
    • FF17.0.1 (firebug 1.11 installed)


    DOCTYPE tested against:
    • !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"


    Description:
    • Bar series charts with the same total values are appearing as different lengths. I would hvae expected a series chart with 45 and 55 series values to have the same length as a bar series chart with 70 and 30


    Steps to reproduce the problem:
    [LIST][*] Run the code attached./LIST]
    The result that was expected:
    • Two charts with the same length


    The result that occurs instead:
    • Each bar chart has a different length.


    Test Case:

    Code:
        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <!-- ExtJS -->
    <link rel="stylesheet" type="text/css" href="ext-all.css" />
    <script type="text/javascript" src="ext-all.js"></script>
    
    <script>
    
        function createPanel() {
            var data1 = {};
            data1.range1 = 20;
            data1.range2 = 80;
    
            var data2 = {};
            data2.range1 = 50;
            data2.range2 = 50;
    
            var firstStore = new Ext.data.JsonStore({
                fields : [ 'range1', 'range2' ],
                data : data1
            });
    
            var secondStore = new Ext.data.JsonStore({
                fields : [ 'range1', 'range2' ],
                data : data2
            });
    
            Ext.create("Ext.panel.Panel", {
                renderTo : 'divchart',
                defaults : {
                    xtype : 'chart',
                    width : 400,
                    height : 50,
                    series : [ {
                        type : 'bar',
                        axis : 'bottom',
                        gutter : 0,
                        yField : [ 'range1', 'range2' ],
                        stacked : true
                    } ]
                },
                items : [ {
                    store : firstStore
                }, {
                    store : secondStore,
                }
    
                ]
            });
        }
    </script>
    
    </head>
    
    <body onLoad="createPanel();">
        <div id="divchart" style="width: 500px; height: 300px;"></div>
    </body>
    
    </html>


    HELPFUL INFORMATION


    Screenshot or Video:
    • attached


    See this URL for live test case: http://


    Debugging already done:
    • none


    Possible fix:
    • not provided


    Additional CSS used:
    • only default ext-all.css
    • custom css (include details)


    Operating System:
    • ________
    • WinXP Pro

  5. #5
    Sencha User
    Join Date
    Feb 2011
    Posts
    5
    Vote Rating
    0
    John O Donovan is on a distinguished road

      0  

    Default


    no one is reading this so I'm going to create a new thread

Thread Participants: 1

Tags for this Thread