Results 1 to 9 of 9

Thread: Scrollable charts not working in 6.0 on Chrome

    Looks like we can't reproduce the issue or there's a problem in the test case provided.
  1. #1

    Default Scrollable charts not working in 6.0 on Chrome

    Charts with scrollable:true aren't working in 6.0.1 and 6.0.2 on Chrome 52.0.2743.82 m
    or IE 11, v. 11.494.10586.0 (no chart is displayed , only a few horizontal lines)

    It's working as expected on Firefox; also working correctly in ExtJS 6.2
    on both Chrome and IE.

    Oddly enough, it's working correctly for ExtJS 6.0 on earlier version of IE 11: 11.0.9600.18349CO

    Please see the sample code here:

    https://fiddle.sencha.com/#fiddle/1e43

  2. #2
    Sencha Premium User evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    19,258

    Default

    It doesn't really make sense to do this. Charts are required to have a size set on them (either explicitly or via a layout). If you wanted a "scrollable" chart, then the chart itself should have a size and the thing containing it should be scrollable.
    Twitter - @evantrimboli
    Former Sencha framework engineer, available for consulting.
    As of 2017-09-22 I am not employed by Sencha, all subsequent posts are my own and do not represent Sencha in any way.

  3. #3

    Default

    evant - I don't think I agree with you. In my application I create charts at run-time inside
    their containers; some of these charts should be scrollable, and some not.
    scrollable is a valid config option for a chart; besides it's working correctly in 6.2
    (and it has always been working with autoScroll:true in ExtJs 4)
    I wonder what is different in the 6.2 implementation vs 6.0.

  4. #4

    Default

    Also, to simplify this example, I removed the outside panel, leaving just the chart, with the width and height explicitly set (fiddle updated). It's working correctly in 6.2, but not in 6.0.

  5. #5
    Sencha Premium User evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    19,258

    Default

    In that case I'm not following. It renders the same way in both versions.

    As I said above, the chart "viewport" fits to the size of the parent. So saying the chart should be scrollable doesn't really fit.

    You may want to do something like this:

    Code:
    Ext.application({
        name: 'Fiddle',
    
        launch: function() {
    
            var chart = Ext.create('Ext.chart.Chart', {
                width: 600,
                height: 600,
                store: {
                    fields: ['pet', 'households', 'total'],
                    data: [{
                        pet: 'Cats',
                        households: 38,
                        total: 93
                    }, {
                        pet: 'Dogs',
                        households: 45,
                        total: 79
                    }, {
                        pet: 'Fish',
                        households: 13,
                        total: 171
                    }]
                },
                axes: [{
                    type: 'numeric',
                    position: 'left'
                }, {
                    type: 'category',
                    position: 'bottom'
                }],
                series: [{
                    type: 'bar',
                    xField: 'pet',
                    yField: 'households'
                }],
            });
    
            new Ext.container.Container({
                renderTo: document.body,
                width: 300,
                height: 300,
                scrollable: true,
                items: chart
            });
    
        }
    });
    Attached Images Attached Images
    Twitter - @evantrimboli
    Former Sencha framework engineer, available for consulting.
    As of 2017-09-22 I am not employed by Sencha, all subsequent posts are my own and do not represent Sencha in any way.

  6. #6

    Default

    This is indeed very odd. To make this example simpler, I removed the outer
    container altogether (see the code below, I also changed it in the fiddle), and when
    I run it, I get just a faint blue line at the top of the display area (screenshot attached)
    The code also throws a JavaScript error ( screenshot attached as well).

    /**********************/

    Ext.application({
    name: 'Fiddle',


    launch: function() {
    Ext.require(['Ext.chart.*',
    'Ext.layout.container.Fit']
    );


    Ext.onReady(function() {


    var chart = Ext.create('Ext.chart.Chart', {


    scrollable: true,
    width: 200,
    height: 150,
    store: {
    fields: ['pet', 'households', 'total'],
    data: [{
    pet: 'Cats',
    households: 38,
    total: 93
    }, {
    pet: 'Dogs',
    households: 45,
    total: 79
    }, {
    pet: 'Fish',
    households: 13,
    total: 171
    }]
    },
    axes: [{
    type: 'numeric',
    position: 'left'
    }, {
    type: 'category',
    position: 'bottom'
    }],
    series: [{
    type: 'bar',
    xField: 'pet',
    yField: 'households'
    }],
    renderTo: Ext.getBody()
    });


    });


    }
    });
    Attached Images Attached Images

  7. #7
    Sencha Premium User evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    19,258

    Default

    I don't see that error, but regardless, the chart canvas requires an explicit size to be set, which means it has to read it from the Ext.chart.Chart component. In what case does setting scrollable: true on a chart "work"? For example, in the screenshots I posted, no matter the size you set on the chart, the display ends up the same. You get 2 scrollbars where you can scroll ~20px or so, which isn't useful.
    Twitter - @evantrimboli
    Former Sencha framework engineer, available for consulting.
    As of 2017-09-22 I am not employed by Sencha, all subsequent posts are my own and do not represent Sencha in any way.

  8. #8

    Default

    True, it only makes sense to set 'scrollable' on the outside container.
    I guess Ext.chart.Chart is 'scrollable' simply because it inherits from Ext.container.Container,
    but the scrollbars are not useful. It's strange though that it works (that is, doesn't fail
    to render) in 6.2, but not in 6.0; don't know why you're unable to see it in the latest Chrome,
    but that's beyond the point. Thanks for looking into it.

  9. #9
    Sencha User
    Join Date
    Mar 2011
    Location
    Arvada, CO
    Posts
    404

    Default

    I realize this is a closed thread, but I ran across this issue today... I basically want an auto layout, comparable to a container with an auto layout and a grid... it'll create a height based off of each row and scroll the entire page. It would be nice if I could set the width of the bars, and then let the overflow scroll... I think that's a reasonable use case. I would also expect the scroll to not affect the entire chart, like I would be able to lock the axis that shouldn't scroll, so in the example posted, the y-axis wouldn't disappear when I start scrolling horizontally.

Similar Threads

  1. Replies: 1
    Last Post: 20 Jan 2016, 10:48 AM
  2. Replies: 3
    Last Post: 7 Jan 2016, 9:57 AM
  3. Scrollable charts legend
    By jksuf in forum Ext 5: Q&A
    Replies: 2
    Last Post: 24 Apr 2015, 11:54 AM
  4. ST Charts 2.1.0beta working on Mac Chrome, not on Safari or iPad
    By QuestingForTruth in forum Sencha Touch 2.x: Q&A
    Replies: 1
    Last Post: 31 Jul 2012, 6:15 AM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •