Results 1 to 3 of 3

Thread: How to show horizontal scroll bar for chart in extjs4.1

  1. #1

    Default How to show horizontal scroll bar for chart in extjs4.1

    Hi
    Can anybody tell How to show horizontal scroll bar for chart in extjs4.1.If data is more how to show horizontal scroll bar

    Thanks

  2. #2
    Sencha User slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    6,165
    Answers
    505

    Default

    I think you'll want to have it contained by an overflowable container and set the width of the chart beyond the width of the parent container.

    Code:
    var store = Ext.create('Ext.data.JsonStore', {
        fields: ['name', 'data'],
        data: [
            { 'name': 'metric one',   'data':10 },
            { 'name': 'metric two',   'data': 7 },
            { 'name': 'metric three', 'data': 5 },
            { 'name': 'metric four',  'data': 2 },
            { 'name': 'metric five',  'data':27 }
        ]
    });
    
    
    var chart = Ext.create('Ext.chart.Chart', {
        width: 500,
        height: 300,
        animate: true,
        store: store,
        axes: [{
            type: 'Numeric',
            position: 'bottom',
            fields: ['data'],
            label: {
                renderer: Ext.util.Format.numberRenderer('0,0')
            },
            title: 'Sample Values',
            grid: true,
            minimum: 0
        }, {
            type: 'Category',
            position: 'left',
            fields: ['name'],
            title: 'Sample Metrics'
        }],
        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('data') + ' views');
              }
            },
            label: {
              display: 'insideEnd',
                field: 'data',
                renderer: Ext.util.Format.numberRenderer('0'),
                orientation: 'horizontal',
                color: '#333',
                'text-anchor': 'middle'
            },
            xField: 'name',
            yField: 'data'
        }]
    });
    
    
    Ext.widget('panel', {
        renderTo: document.body,
        autoScroll: true,
        height: 300,
        width: 300,
        layout: 'anchor',
        items: [chart]
    });

  3. #3

    Default

    Hi slemmon,
    Thanks for reply .I have a requirement.I need to show chart with 100% width upto 10 record.If it is more than 10 need to show scroll horizontal

    Thanks

Tags for this Thread

Posting Permissions

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