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

      0  

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

    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
    Vote Rating
    0
    panjiesw is on a distinguished road

      0  

    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 Trozdol's Avatar
    Join Date
    Jan 2009
    Location
    Nashville
    Posts
    19
    Vote Rating
    0
    Trozdol is on a distinguished road

      0  

    Default


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

Thread Participants: 1

Tags for this Thread

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar