Results 1 to 4 of 4

Thread: Sencha Touch 2.1 RC2 Horizontal Bar Chart how to

  1. #1
    Sencha User
    Join Date
    Oct 2011
    Posts
    5
    Answers
    1

    Default Answered: Sencha Touch 2.1 RC2 Horizontal Bar Chart how to

    Config:
    Windows 7 x64
    sencha touch 2.1.0-RC2
    sencha cmd v3.0.0.190

    Intro:
    I'm trying to implement some basic chart using Chart that comes with Sencha Touch 2.1 RC2, based on example of Sencha Touch Chart 1. I know it's different, and i'm not copy and paste the code from Sencha Touch Chart 1 example, i only want to implement some basic chart and compare the difficulty of configuring Chart in Touch 1 and Touch 2.

    Problem:
    In Touch Chart 1, there is an example of horizontally stacked bar series, and i'm trying to implement it in Touch Chart 2.1 but the Chart is not displaying how it should be. Here is the code of what i'm trying to do:

    Code:
    var store = Ext.create('Ext.data.JsonStore', {
        fields: ['name', 'data1', 'data2', 'data3', 'data4', 'data5'],
        data: [
            {'name':'metric one', 'data1':10, 'data2':12, 'data3':14, 'data4':8, 'data5':13},
            {'name':'metric two', 'data1':7, 'data2':8, 'data3':16, 'data4':10, 'data5':3},
            {'name':'metric three', 'data1':5, 'data2':2, 'data3':14, 'data4':12, 'data5':7},
            {'name':'metric four', 'data1':2, 'data2':14, 'data3':6, 'data4':1, 'data5':23},
            {'name':'metric five', 'data1':27, 'data2':38, 'data3':36, 'data4':13, 'data5':33}
        ]
    });
    
    
    
    
    var chart = Ext.create('Ext.chart.Chart',{
        store: store,
        axes: [{
            type: 'numeric',
            position: 'bottom',
            title: {
                text: 'Sample Values',
                fontSize: 15
            },
            fields: ['data1','data2','data3']
        }, {
            type: 'category',
            position: 'left',
            title: {
                text: 'Sample Values',
                fontSize: 15
            },
            fields: 'name'
        }],
        series: [{
            type: 'bar',
            xField: ['data1','data2','data3'],
            yField: 'name',
            style: {
                fill: 'blue'
            }
        }]
    });
    and here is what's come up with that :

    touchchart.jpg

    Can someone point out what i'm doing wrong?
    Thanks

  2. Found it

    Simply use Ext.chart.CartesianChart, set the FlipXY property to true, the category axis to left, and the numeric axis to bottom position.

    Here is the code:

    Code:
    var store = Ext.create('Ext.data.JsonStore', {
        fields: ['name', 'data1', 'data2', 'data3', 'data4', 'data5'],
        data: [
            {'name':'metric one', 'data1':10, 'data2':12, 'data3':14, 'data4':8, 'data5':13},
            {'name':'metric two', 'data1':7, 'data2':8, 'data3':16, 'data4':10, 'data5':3},
            {'name':'metric three', 'data1':5, 'data2':2, 'data3':14, 'data4':12, 'data5':7},
            {'name':'metric four', 'data1':2, 'data2':14, 'data3':6, 'data4':1, 'data5':23},
            {'name':'metric five', 'data1':27, 'data2':38, 'data3':36, 'data4':13, 'data5':33}
        ]
    });
    
    
    var chart = Ext.create('Ext.chart.CartesianChart',{
        store: store,
        legend : {
            position: 'bottom'
        },
        flipXY: true,
        axes: [{
            type: 'numeric',
            position: 'bottom',
            title: 'Number of Hits',
            grid: {
                odd: {
                    opacity: 1,
                    fill: '#ddd',
                    stroke: '#bbb',
                    lineWidth: 1
                }
            },
            minimum: 0
        }, {
            type: 'category',
            position: 'left',
            title: 'Month of the Year',
            grid: true,
            label: {
                rotate: {
                    degrees: 315
                }
            }
        }],
        series: [{
            title : ['data1','data2','data3'],
            type: 'bar',
            xField: 'name',
            yField: ['data1','data2','data3'],
            style: {
                fill: 'blue',
                stroke: '#333',
                minGapWidth: 10
            },
            stacked : false
        }]
    });
    And the result :

    Attachment 39550

    Also, the flipXY property is added since 2.1.0-b3 release, as mentioned in note:

    Code:
    Added FlipXY configuration to cartesian charts. Simplifies bar to column conversion
    just need to read the docs and every notes thoroughly and it's there
    Thanx

  3. #2
    Sencha User
    Join Date
    Oct 2011
    Posts
    5
    Answers
    1

    Default

    Found it

    Simply use Ext.chart.CartesianChart, set the FlipXY property to true, the category axis to left, and the numeric axis to bottom position.

    Here is the code:

    Code:
    var store = Ext.create('Ext.data.JsonStore', {
        fields: ['name', 'data1', 'data2', 'data3', 'data4', 'data5'],
        data: [
            {'name':'metric one', 'data1':10, 'data2':12, 'data3':14, 'data4':8, 'data5':13},
            {'name':'metric two', 'data1':7, 'data2':8, 'data3':16, 'data4':10, 'data5':3},
            {'name':'metric three', 'data1':5, 'data2':2, 'data3':14, 'data4':12, 'data5':7},
            {'name':'metric four', 'data1':2, 'data2':14, 'data3':6, 'data4':1, 'data5':23},
            {'name':'metric five', 'data1':27, 'data2':38, 'data3':36, 'data4':13, 'data5':33}
        ]
    });
    
    
    var chart = Ext.create('Ext.chart.CartesianChart',{
        store: store,
        legend : {
            position: 'bottom'
        },
        flipXY: true,
        axes: [{
            type: 'numeric',
            position: 'bottom',
            title: 'Number of Hits',
            grid: {
                odd: {
                    opacity: 1,
                    fill: '#ddd',
                    stroke: '#bbb',
                    lineWidth: 1
                }
            },
            minimum: 0
        }, {
            type: 'category',
            position: 'left',
            title: 'Month of the Year',
            grid: true,
            label: {
                rotate: {
                    degrees: 315
                }
            }
        }],
        series: [{
            title : ['data1','data2','data3'],
            type: 'bar',
            xField: 'name',
            yField: ['data1','data2','data3'],
            style: {
                fill: 'blue',
                stroke: '#333',
                minGapWidth: 10
            },
            stacked : false
        }]
    });
    And the result :

    touchchart2.jpg

    Also, the flipXY property is added since 2.1.0-b3 release, as mentioned in note:

    Code:
    Added FlipXY configuration to cartesian charts. Simplifies bar to column conversion
    just need to read the docs and every notes thoroughly and it's there
    Thanx

  4. #3
    Sencha User
    Join Date
    Jan 2009
    Location
    Nashville
    Posts
    64
    Answers
    2

    Default

    Thank you for posting! I was struggling with this for a while.

  5. #4
    Sencha User
    Join Date
    Mar 2013
    Location
    Ahmedabad, India
    Posts
    15
    Answers
    1

    Default

    lots of thanks. its working fine for me.

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
  •